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

Джеселин Йин

Функция предварительного просмотра: новая панель анализа производительности.

Используйте панель «Аналитика производительности» , чтобы получить полезные и ориентированные на конкретные сценарии использования данные о производительности вашего веб-сайта.

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

Новая панель аналитики производительности

После завершения записи вы получите аналитические данные о производительности на панели «Аналитика» . Щелкните по каждому элементу аналитики (например, «Запрос, блокирующий отрисовку», «Смещение макета»), чтобы понять проблему и возможные способы ее решения.

Для получения более подробной информации и пошагового руководства перейдите к документации по панели «Аналитика производительности» .

Это предварительная версия функции, призванная помочь веб-разработчикам (особенно тем, кто не является экспертом по производительности) выявлять и устранять потенциальные проблемы с производительностью. Наша команда активно работает над этой функцией, и мы ждем ваших отзывов для дальнейших улучшений.

Проблема с Chromium: 1270700

Новые сочетания клавиш для имитации светлой и темной тем оформления.

Теперь вы можете быстрее эмулировать светлую и темную темы (функция CSS media prefers-color-scheme ) с помощью новых сочетаний клавиш на панели «Стили» .

Ранее для эмуляции тем на вкладке «Рендеринг» требовалось больше шагов.

Новые сочетания клавиш для имитации светлой и темной тем оформления.

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

Улучшена безопасность на вкладке «Предварительный просмотр сети».

Теперь в инструментах разработчика политика безопасности контента (CSP) применяется на вкладке «Предварительный просмотр» в панели «Сеть» .

Например, на первом скриншоте показана страница со смешанным контентом . Страница загружается через защищенное HTTPS-соединение, но таблица стилей загружается через незащищенное HTTP-соединение.

Браузер по умолчанию блокировал запрос таблицы стилей. Однако, когда вы открыли страницу через вкладку «Предварительный просмотр» в панели «Сеть» , таблица стилей не была заблокирована (поэтому фон стал красным). Теперь она заблокирована, как и следовало ожидать (второй скриншот).

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

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

Улучшена перезарядка в точке перелома.

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

Например, ранее скрипт попадал в бесконечный цикл при установке и перезагрузке на точке останова ReactDOM в этом демонстрационном примере React . Из-за бесконечного цикла панель «Источники» перестала работать.

Продолжение выполнения JavaScript доставляет разработчикам много проблем и может привести к некорректной работе средства отрисовки. Это изменение приводит поведение отладки в соответствие с другими браузерами, такими как Firefox.

Улучшена перезарядка в точке перелома.

Проблемы Chromium: 1014415 , 1004038 , 1112863 , 1134899

Обновления консоли

Обработка ошибок выполнения скрипта в консоли.

Теперь ошибки, возникающие во время выполнения скрипта в консоли, генерируют соответствующие события ошибок, которые запускают обработчик window.onerror и передаются в виде событий "error" объекту window.

Обработка ошибок выполнения скрипта в консоли.

Проблема с Chromium: 1295750

Выразите себя вживую с помощью Enter

После ввода выражения в реальном времени вы можете нажать Enter , чтобы подтвердить его. Ранее нажатие Enter приводило к добавлению новых строк. Это противоречит другим функциям инструментов разработчика.

Чтобы добавить новую строку в редакторе выражений в реальном времени , используйте сочетание Shift + Enter .

Выразите себя вживую с помощью Enter

Проблема Chromium: 1260744

Отменить запись пользовательского сценария в начале.

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

Отменить запись пользовательского сценария в начале.

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

Отображение унаследованных псевдоэлементов подсветки на панели «Стили».

Просмотрите унаследованные псевдоэлементы подсветки (например ::selection , ::spelling-error , ::grammar-error и ::highlight ) на панели «Стили» . Ранее эти правила не отображались.

Как указано в спецификации , при конфликте нескольких стилей каскад определяет победивший стиль. Эта новая функция помогает понять наследование и приоритет правил.

Отображение унаследованных псевдоэлементов подсветки на панели «Стили».

Проблема с Chromium: 1024156

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

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

  • Теперь в панели «Свойства» по умолчанию отображаются свойства доступа со значением. Ранее она была ошибочно скрыта. ( 1309087 )
  • В панели «Стили» теперь правила @support корректно отображаются переопределенными зачеркнутыми. Ранее правила не были зачеркнуты. ( 1298025 )
  • Исправлена ​​логика форматирования CSS в панели «Источники» , из-за которой при редактировании CSS возникало множество пустых строк. ( 1309588 )
  • Ограничьте параметр «Рекурсивное расширение» объекта в консоли до максимума в 100 раз, чтобы это не продолжалось бесконечно для круглых объектов. ( 1272450 )

[Экспериментальная версия] Копирование изменений CSS

В этом эксперименте панель «Стили» выделяет ваши изменения CSS зелёным цветом. Вы можете навести курсор на изменённые правила и нажать на новую кнопку «Копировать» рядом с ними, чтобы скопировать их.

Кроме того, вы можете скопировать все изменения CSS во всех объявлениях, щелкнув правой кнопкой мыши по любому правилу и выбрав пункт «Скопировать все изменения CSS» .

На вкладке «Изменения» также добавлена ​​новая кнопка «Копировать» , которая поможет вам легко отслеживать и копировать изменения в CSS-коде!

Скопируйте изменения CSS.

Проблема с Chromium: 1268754

[Экспериментальная версия] Выбор цвета вне браузера

Включите этот эксперимент, чтобы выбирать цвет вне браузера с помощью палитры цветов. Ранее выбор цвета был возможен только внутри браузера.

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

Выбор цвета вне браузера

Проблема с Chromium: 1245191

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

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

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

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

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

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