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

Обновления рекордера

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

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

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

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

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

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

Запись с помощью селекторов пирса

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Проблемы с хромом: 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 использовать панель «Производительность» для профилирования производительности процессора JavaScript.

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

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

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

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

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

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

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

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

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

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

Проблемы с хромом: 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 пропускает обработчики выборки сервисных работников без операций (без операций), поскольку они могут замедлять навигацию, но не служат цели. Такие обработчики больше не требуются для того, чтобы ваш веб-сайт мог квалифицироваться как прогрессивное веб-приложение .

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

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

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

Разное

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

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

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

Связь с командой Chrome DevTools

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

Что нового в DevTools

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