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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Продолжение выполнения 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 .
• Оставляйте комментарии в видеороликах YouTube «Что нового в DevTools» или YouTube «Советы по DevTools» .

Что нового в DevTools

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