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

Sofia Emelianova

Jecelyn Yeen

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

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

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 в файле flow.report.html .

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

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

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

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

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

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 возможность использовать панель 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 добавил это устройство в Настройки > Устройства .

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

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

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

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

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

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

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

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

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

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

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

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

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

Что нового в DevTools

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