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

Софья Емельянова
Sofia Emelianova
GitHub
Джеселин Йен

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

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

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

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

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

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

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

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

Помимо пользовательских селекторов, селекторов CSS, ARIA, текстовых и XPath , теперь можно использовать селекторы прокалывания . Эти селекторы ведут себя так же, как селекторы CSS, но также могут прокалывать теневые корни.

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

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

Проблема с хромом: 1411188 .

Экспортировать как сценарий Puppeteer с анализом Lighthouse

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

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

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

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

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

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

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

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

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

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

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

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

Сколько раз в день вы просматриваете документацию по свойствам CSS? Панель «Элементы» > «Стили» теперь показывает краткое описание при наведении курсора на свойство.

Подсказка с документацией по свойству CSS.

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

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

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

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

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

Панель «Элементы > Стили» теперь распознает синтаксис вложенности CSS и применяет вложенные стили к нужным элементам.

Проблема с хромом: 1172985 .

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

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

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

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

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

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

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

Игнорировать нерелевантные скрипты во время отладки

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

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

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

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

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

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

Проблема с хромом: 883325 .

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

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

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

Баннер об устаревании в верхней части Профайлера.

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

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

Проблема с хромом: 1417647 .

Эмулировать пониженную контрастность

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

Параметр пониженной контрастности, выбранный в функции «Эмуляция нарушений зрения».

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

С помощью DevTools вы можете сразу найти и исправить все проблемы с контрастностью. Подробнее см. в статье «Сделайте свой сайт более читабельным» .

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

Маяк 10

Панель Lighthouse теперь работает под управлением Lighthouse 10.0.1 . Подробнее см. в разделе «Что нового в Lighthouse 10.0.1» .

Чтобы изучить основы использования панели Lighthouse в DevTools, ознакомьтесь с разделом Lighthouse: Оптимизация скорости сайта .

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

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

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

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

Проблема с хромом: 772558 .

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

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

Консоль теперь выводит предупреждение при обнаружении на вашем сайте обработчика выборки без операции. Рассмотрите возможность его удаления.

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

Проблема с хромом: 1347319 .

Разные моменты

Вот некоторые важные исправления в этом выпуске:

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

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

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

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

Что нового в DevTools

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