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

Джеселин Йен

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

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

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

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

После завершения записи вы получите информацию о производительности на панели 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» .