Эта страница переведена с помощью Cloud Translation API.

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

Sofia Emelianova

Jecelyn Yeen

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

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

В 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 .

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

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

console.* вызывает условные точки останова с оранжевым знаком вопроса ?
Сообщения Logpoint с двумя розовыми точками ..

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

Консоль теперь предоставляет правильные привязки к точкам останова в исходных файлах вместо сценариев 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 .

Разное

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

На панели «Источники» > «Точки останова» теперь отображаются различающиеся пути к файлам рядом с неоднозначными именами файлов ( 1403924 ).
В разделе «Основной» диаграммы пламени панели «Производительность» теперь CpuProfiler::StartProfiling обозначается как Profiler Overhead » ( 1358602 ).
DevTools улучшил автодополнение:
- Источники : Последовательные дополнения любого слова ( 1320204 ).
- Консоль : Arrow down выбирает первое предложение, а предложения получают подсказки Tab ( 1276960 ).
DevTools добавил точку останова прослушивателя событий , позволяющую приостанавливать работу при открытии окна документа «картинка в картинке» ( 1315352 ).
DevTools настроил обходной путь, который правильно отображает артефакты веб-пакета Vue2 в виде JavaScript ( 1416562 ).
Параметр консоли получил лучшее название: Автоматически расширять сообщения console.trace(). ( 1139616 ).

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

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

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

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

Отправьте нам предложение или отзыв через crbug.com .
Сообщите о проблеме DevTools, используя дополнительные параметры. > Справка > Сообщить о проблемах DevTools в DevTools.
Напишите в Твиттере @ChromeDevTools .
Оставляйте комментарии к нашим видеороликам «Что нового в DevTools на YouTube » или «Советы по DevTools» на YouTube .