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

Jecelyn Yeen

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

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

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

После завершения записи вы получите сведения о производительности на панели Insights . Щелкните каждый элемент сведений (например, запрос на блокировку рендеринга, сдвиг макета), чтобы понять проблему и возможные исправления.

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

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

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

Новые сочетания клавиш для эмуляции светлой и темной тем

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

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

Проблема с хромом: 1314299

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

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

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

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

Проблема с хромом: 833147

Улучшена перезагрузка в точке останова

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

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

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

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

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

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

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

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

Зафиксируйте живое выражение с помощью Enter

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

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

Проблема с хромом: 1260744

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

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

Проблема с хромом: 1257499

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что нового в DevTools

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