Что нового в 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 .

Проблема с хромом: 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, используя дополнительные параметры. > Справка > Сообщить о проблемах DevTools в DevTools.
• Напишите в Твиттере @ChromeDevTools .
• Оставляйте комментарии к нашим видеороликам «Что нового в DevTools на YouTube» или «Советы по DevTools» на YouTube .

Что нового в DevTools

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