Что нового в DevTools (Chrome 112)

София Емельянова
Sofia Emelianova

Обновления регистратора

Поддержка расширений воспроизведения

В Recorder добавлена ​​поддержка пользовательских параметров воспроизведения, которые можно встроить в DevTools с помощью расширения.

Попробуйте пример расширения . Выберите новую опцию пользовательского воспроизведения, чтобы открыть пользовательский интерфейс воспроизведения.

Пользовательский интерфейс для воспроизведения.

Чтобы настроить Recorder под свои нужды и интегрировать его с вашими инструментами, рассмотрите возможность разработки собственного расширения: изучите API chrome.devtools.recorder и ознакомьтесь с другими примерами расширений .

Проблема с Chromium: 1400243 .

Запись с использованием селекторов прокола

В дополнение к пользовательским, CSS, ARIA, текстовым и XPath-селекторам , теперь можно использовать селекторы с эффектом «проникновения» . Эти селекторы ведут себя как CSS-селекторы, но также могут проникать сквозь теневые корни.

Начните новую запись на странице с теневым DOM и проверьте Флажок. Используйте селекторы для записи действий . Запишите ваше взаимодействие с элементами в теневом DOM и проанализируйте соответствующий шаг.

Настройка диктофона для использования селекторов Pierce; работа селектора Pierce.

Выпуск Chromium: 1411188 .

Экспорт в виде скрипта Puppeteer с анализом Lighthouse.

В Recorder появилась новая опция экспорта: Puppeteer (включая анализ Lighthouse) . С помощью Puppeteer вы можете автоматизировать и контролировать Chrome. С помощью Lighthouse вы можете отслеживать и улучшать производительность своего веб-сайта.

Open your recording, click Экспорт. Для экспорта выберите новый параметр и сохраните файл .js .

Экспорт данных из Puppeteer (включая анализ Lighthouse).

Запустите скрипт Puppeteer , чтобы получить отчет Lighthouse в файле flow.report.html .

Отчет Lighthouse открылся в Chrome.

Получить расширения

Изучите возможности настройки работы с программой записи, например, с помощью пользовательских параметров экспорта. Получите расширения для программы записи , нажав на кнопку. Экспорт. Экспорт > Добавить расширения в запись.

Выберите опцию «Получить расширения» в выпадающем меню «Экспорт».

Не стесняйтесь добавлять свои собственные расширения в список расширений для записи экрана . Мы будем рады видеть ваше расширение в этом списке!

Проблемы Chromium: 1417104 , 1413168 .

Элементы > Обновления стилей

Документация CSS

Как часто в день вы обращаетесь к документации по свойствам CSS? Теперь в панели «Элементы > Стили» при наведении курсора на свойство отображается его краткое описание.

Всплывающая подсказка с пояснениями к свойству CSS.

Всплывающая подсказка также содержит ссылку «Узнать больше» , которая ведет к справочнику CSS по этому свойству на MDN .

Если вы хорошо разбираетесь в CSS, всплывающие подсказки могут показаться вам раздражающими. Чтобы отключить их все, проверьте следующее: Флажок. Не показывайте .

Чтобы снова их включить, проверьте Настройки. Настройки > Предпочтения > Элементы > Флажок. Показать всплывающую подсказку в документации CSS .

Проблема с Chromium: 1401107 .

Поддержка вложенности CSS

Теперь в панели « Элементы > Стили» распознается синтаксис вложенных CSS-стилей , и вложенные стили применяются к нужным элементам.

Номер выпуска Chromium: 1172985 .

Отметка точек логирования и условных точек останова в консоли.

Для дальнейшего улучшения пользовательского интерфейса точек останова , в консоли теперь отмечаются сообщения, срабатывающие при нажатии на точки останова:

Изменения коснулись отображения сообщений в консоли, срабатывающих при установке точек останова: теперь они отображаются со значками и корректными ссылками на исходный код.

Теперь в консоли отображаются корректные якорные ссылки на точки останова в исходных файлах, а не скрипты VM<number> , которые Chrome создает для запуска любого фрагмента JavaScript на V8 .

Нажмите на ссылку рядом с сообщением о точке останова, чтобы перейти непосредственно к редактору точек останова.

Ссылка рядом с сообщением в логе открывает редактор точек останова.

Проблема с Chromium: 1027458 .

Во время отладки игнорируйте нерелевантные скрипты.

Чтобы помочь вам сосредоточиться на наиболее важных частях вашего кода, теперь вы можете добавлять ненужные скрипты в список игнорирования прямо из дерева файлов на панели «Источники > Страница» .

Щелкните правой кнопкой мыши любой скрипт или папку и выберите один из параметров, связанных с игнорированием. Вы можете увидеть параметры для добавления или удаления скрипта или папки из списка. Отладчик игнорирует скрипты, добавленные в список, и пропускает их в стеке вызовов.

Контекстные меню папки и скрипта с параметрами, связанными с игнорированием.

Все скрипты и папки, указанные в списке игнорирования, отображаются в файловой структуре серым цветом.

Скрипты и папки, указанные в списке игнорирования, выделены серым цветом; вы можете скрыть их с помощью экспериментальной опции в выпадающем меню «Дополнительные параметры».

Если вы выберете игнорируемый скрипт, кнопка «Настроить» переведет вас на следующую страницу. Настройки. Настройки > Список игнорируемых источников . Вы также можете скрыть игнорируемые источники из дерева файлов с помощью Меню из трех точек. > Скрыть источники, внесенные в список игнорирования Экспериментальный. .

Номер выпуска Chromium: 883325 .

Началось прекращение поддержки JavaScript Profiler.

Ещё в Chrome 58 команда DevTools планировала в конечном итоге отказаться от JavaScript Profiler и предложить разработчикам Node.js и Deno использовать панель Performance для профилирования производительности JavaScript на ЦП.

В этой версии DevTools (112) начинается четырехэтапный процесс устаревания JavaScript Profiler . Теперь на панели JavaScript Profiler отображается соответствующее предупреждение.

В верхней части окна профилировщика отображается уведомление об устаревании.

Вместо профилировщика используйте панель «Производительность» для профилирования ЦП.

Узнайте больше и оставьте свой отзыв в соответствующем RFC и на crbug.com/1354548 .

Номер выпуска Chromium: 1417647 .

Имитация пониженного контраста

Вкладка «Рендеринг» добавляет в список параметров «Имитация нарушений зрения» новую опцию — «Сниженная контрастность» . С помощью этой опции вы можете узнать, как ваш веб-сайт будет выглядеть для людей со сниженной контрастной чувствительностью.

В разделе «Имитация нарушений зрения» выбран параметр пониженной контрастности.

Обратите внимание, что параметры списка были обновлены, и теперь в них указано, какой уровень нечувствительности к цвету они соответствуют.

С помощью DevTools вы можете найти и исправить все проблемы с контрастом одновременно. Для получения дополнительной информации см. раздел «Как сделать ваш веб-сайт более читабельным» .

Проблемы Chromium: 1412719 , 1412721 .

Маяк 10

В панели Lighthouse теперь используется Lighthouse 10.0.1 . Более подробную информацию можно найти в разделе «Что нового в Lighthouse 10.0.1» .

Чтобы узнать основы использования панели Lighthouse в инструментах разработчика, см. статью «Lighthouse: оптимизация скорости веб-сайта» .

Маяк > Настройки. > Пустой флажок. Устаревшая навигация теперь отключена по умолчанию. Эта опция использует устаревшую конфигурацию Lighthouse в режиме навигации.

Устаревшая навигация отключена.

В Lighthouse 10 теперь в качестве устройства эмуляции по умолчанию используется Moto G Power. DevTools добавил это устройство в Настройки. Настройки > Устройства .

Moto G Power в списке устройств.

Номер выпуска Chromium: 772558 .

Предупреждение в консоли о необходимости удалить обработчик выборки сервисного работника, который ничего не делает.

В Chrome 112 обработчики запросов к сервисным работникам, не выполняющие никаких действий, отсутствуют, поскольку они могут замедлять навигацию, но не выполняют никакой полезной функции. Такие обработчики больше не требуются для того, чтобы ваш веб-сайт соответствовал критериям прогрессивного веб-приложения (Progressive Web App) .

Теперь в консоли отображается предупреждение, если на вашем веб-сайте обнаружен обработчик запросов, не выполняющий никаких действий. Рекомендуем его удалить.

Обработчик выборки, не выполняющий никаких действий, и соответствующее предупреждение в консоли.

Номер выпуска Chromium: 1347319 .

Различные важные моменты

В этом релизе внесены следующие существенные исправления:

Загрузите предварительные каналы

Рекомендуем использовать Chrome Canary , Dev или Beta в качестве браузера по умолчанию для разработки. Эти предварительные версии предоставляют доступ к новейшим функциям DevTools, позволяют тестировать передовые API веб-платформ и помогают выявлять проблемы на вашем сайте до того, как их обнаружат пользователи!

Свяжитесь с командой Chrome DevTools

Используйте следующие параметры для обсуждения новых функций, обновлений или чего-либо еще, связанного с DevTools.

Что нового в инструментах разработчика

Список всего, что было рассмотрено в серии статей «Что нового в инструментах разработчика» .