Новинки DevTools (Chrome 102)

Published on Updated on

Translated to: English, Español, Português, 한국어, 中文, 日本語

Переводы предоставлены Alena Batitskaia. Редактор — Maxim Salnikov.

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

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

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

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

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

После завершения записи вы получите обзор производительности на панели Insights. Кликните на каждый пункт отчёта (например, Render blocking request, Layout shift), чтобы понять проблему и возможные способы её устранения.

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

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

Задача в трекере Chromium: 1270700

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

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

До этого требовалось больше действий для эмуляции темы во вкладке Отрисовка (Rendering).

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

Задача в трекере Chromium: 1314299

Улучшение безопасности на вкладке Предварительный просмотр (Preview) панели Сеть (Network)

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

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

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

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

Задача в трекере Chromium: 833147

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

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

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

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

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

Задачи в трекере Chromium: 1014415, 1004038, 1112863, 1134899

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

Обработка ошибок выполнения сценария в Консоли (Console)

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

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

Задача в трекере Chromium: 1295750

Выполнение живых выражений с помощью Enter

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

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

Выполнение живых выражений с помощью Enter

Задача в трекере Chromium: 1260744

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

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

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

Задача в трекере Chromium: 1257499

Отображение наследуемых псевдоэлементов выделения в панели Стили (Styles)

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

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

В данный момент вам нужно запустить Chrome с флагом --enable-blink-features=HighlightInheritance, чтобы активировать эту функцию

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

Задача в трекере Chromium: 1024156

Другие важные моменты

Вот несколько заслуживающих внимания исправлений в этом выпуске:

  • На панели Свойства (Properties) теперь по умолчанию отображаются свойства-аксессоры вместе со значениями. Ранее это было скрыто по ошибке. (1309087)
  • В панели Стили (Styles) переопределенные правила @support теперь правильно отображаются как зачеркнутые. Ранее правила не зачёркивались. (1298025)
  • Исправлена логика форматирования CSS во вкладке Источники (Sources), которая приводила к появлению множества пустых строк при редактировании CSS. (1309588)
  • Добавлено максимальное ограничние 100 для параметра Расширить рекурсивно объекта в Консоли, чтобы он не продолжался бесконечно для циклических объектов. (1272450)

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

Чтобы включить этот эксперимент поставьте галочку напротив Sync CSS changes in the Styles pane в Настройки (Settings) > Эксперименты (Experiments).

С этим экспериментом панель Стили (Styles) подсвечивает зелёным ваши CSS изменения. Вы можете навести курсор на изменённое свойство и нажать на новую кнопку копирования, чтобы скопировать его.

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

Новая кнопка Copy также добавлена на вкладку Изменения, чтобы помочь вам легко отслеживать и копировать изменения в CSS!

Копирование изменений в CSS

Задача в трекере Chromium: 1268754

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

Чтобы включить этот эксперимент поставьте галочку напротив Enable color picking outside the browser window в Настройки (Settings) > Эксперименты (Experiments).

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

В панели Стили (Styles) кликните на любое превью цвета, чтобы открыть палитру цветов. Используйте пипетку, чтобы выбрать цвет из любого места.

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

Задача в трекере Chromium: 1245191

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

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

Связь с командой Chrome DevTools

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

  • Отправьте нам предложение или отзыв через crbug.com.
  • Сообщите о проблеме, связанной с DevTools, используя Больше опций (More options)   More   > Справка (Help) > Сообщить о проблемах в инструментах разработчика (Report a DevTools issues) в DevTools.
  • Твитните на @ChromeDevTools.
  • Оставьте комментарии под What's new in DevTools видео на YouTube.

Больше новинок DevTools

Чтобы увидеть полный список обновлений, перейдите на английскую версию по ссылке What's New In DevTools. Ниже перечислены материалы, переведенные на русский язык.

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.