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

Джеселин Йен
Jecelyn Yeen

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

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

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

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

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

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

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

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

Новые ярлыки для имитации светлых и темных тем.

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

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

Новые ярлыки для имитации светлых и темных тем.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Разное

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

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

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

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

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

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

Скопировать изменения CSS

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

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

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

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

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

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

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

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

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

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

Что нового в DevTools

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