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

Что нового в DevTools

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

Jecelyn Yeen

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

Используйте панель Performance Insights , чтобы получить полезные и управляемые в использовании понимание производительности вашего веб-сайта.

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

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

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

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

Выпуск хрома: 1270700

Новые ярлыки, чтобы подражать свету и темным темам

Теперь вы можете быстрее подражать легким и темным темам (функция CSS Media Prefers-Scheme ) с новыми ярлыками на панели Styles .

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

Выпуск хрома: 1314299

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

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

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

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

Выпуск хрома: 833147

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

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

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

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

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

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

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

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

Выпуск хрома: 1295750

Совершить живое выражение с помощью Enter

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

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

Выпуск хрома: 1260744

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

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

Выпуск хрома: 1257499

Дисплей унаследованные псевдо-элементы на панели стилей

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

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

Выпуск хрома: 1024156

Разные основные моменты

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

• Панель свойств теперь отображает свойства доклада со значением по умолчанию. Это было скрыто ошибочно. ( 1309087 )
• На панели Styles теперь правильно показывают переопределенные правила @support как ударные. Ранее правила не были поражены. ( 1298025 )
• Исправлена ​​логика форматирования CSS на панели источников , которая вызвала несколько пустых линий при редактировании CSS. ( 1309588 )
• Уложите вариант Expand Reccursility of Object в консоли максимум 100, чтобы он не продолжается вечно для круговых объектов. ( 1272450 )

[Экспериментальный] Скопируйте изменения CSS

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

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

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

Выпуск хрома: 1268754

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

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

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

Выпуск хрома: 1245191

Скачать каналы предварительного просмотра

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

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

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

• Отправьте отзывы и запросы на функции нам на CRBUG.com .
• Сообщите о проблеме Devtools, используя More_vert More Options > Help > Сообщите о проблеме DevTools в DevTools.
• Твит на @chromedevtools .
• Оставьте комментарии о том, что нового в Devtools Videos YouTube или Devtools Советы на YouTube Videos .

Что нового в Devtools

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

Jecelyn Yeen

Preview feature: New Performance insights panel

Use the Performance insights panel to get actionable and use-case-driven insights on your website's performance.

Open the panel and start a new recording based on your use case. For example, let's measure the page load of this demo page .

Once the recording is complete, you get the performance insights on the Insights pane. Click on each insight item (for example, Render blocking request, layout shift) to understand the issue and potential fixes.

Go to the Performance insights panel documentation to learn more with the step-by-step tutorial.

This is a preview feature to help web developers (especially non-performance experts) to identify and fix potential performance issues. Our team is actively working on this feature and we are looking for your feedback for further enhancements.

Chromium issue: 1270700

New shortcuts to emulate light and dark themes

You can now emulate the light and dark themes quicker (CSS media feature prefers-color-scheme ) with the new shortcuts in the Styles pane.

Previously, it took more steps to emulate themes in the Rendering tab.

Chromium issue: 1314299

Improved security on the Network Preview tab

DevTools now apply the Content Security Policy (CSP) in the Preview tab in the Network panel.

For example, the first screenshot shows a page that contains mixed content . The page loads over a secure HTTPS connection, but the stylesheet loads over an insecure HTTP connection.

The browser blocked the stylesheet request by default. However, when you opened the page via the Preview tab in the Network panel, the stylesheet was not blocked previously (hence the background turned into red). It is now blocked as you would expect (second screenshot).

Chromium issue: 833147

Improved reloading at breakpoint

The debugger now terminates script execution when reloading at breakpoint.

For example, the script got into an endless loop previously when setting and reloading at the ReactDOM breakpoint in this React demo . The Sources panel broke due to the endless loop.

Continuing to execute JavaScript is causing a lot of trouble for developers and might leave the renderer in a broken state. This change aligns the debugging behavior with other browsers like Firefox.

Chromium issues: 1014415 , 1004038 , 1112863 , 1134899

Console updates

Handle script execution errors in the Console

Errors during script evaluation in the Console now generate proper error events that trigger the window.onerror handler and are dispatched as "error" events on the window object.

Chromium issue: 1295750

Commit live expression with Enter

Once you finish typing a live expression , you can click Enter to commit it. Previously, hitting Enter resulted in adding new lines. This is inconsistent with other parts of the DevTools.

To add a new line in the live expression editor, use Shift + Enter instead.

Chromium issue: 1260744

Cancel user flow recording at the start

You can cancel the recording during the start of user flow recording. Previously, there was no option to cancel the recording.

Chromium issue: 1257499

Display inherited highlight pseudo-elements in the Styles pane

View the inherited highlight pseudo-elements (eg ::selection , ::spelling-error , ::grammar-error , and ::highlight ) in the Styles pane. Previously, these rules were not displayed.

As mentioned in the specification , when multiple styles conflict, cascade determines the winning style. This new feature helps you understand the inheritance and priority of the rules.

Chromium issue: 1024156

Miscellaneous highlights

These are some noteworthy fixes in this release:

• The Properties pane now displays accessor properties with value by default. It was hidden mistakenly previously. ( 1309087 )
• The Styles pane now properly shows the overridden @support rules as strikethrough. Previously, the rules weren't strikethrough. ( 1298025 )
• Fixed the CSS formatting logic in the Sources panel that caused multiple blank lines when editing CSS. ( 1309588 )
• Cap the Expand recursively option of an object in the Console to maximum 100 so it does not go on forever for circular objects. ( 1272450 )

[Experimental] Copy CSS changes

With this experiment, the Styles pane highlights your CSS changes in green. You can hover over the changed rules and click on the new copy button next to it to copy it.

Apart from that, you can copy all CSS changes across declarations by right-clicking on any rule, and selecting Copy all CSS changes .

A new Copy button is added to the Changes tab as well to help you keep track and copy your CSS changes with ease!

Chromium issue: 1268754

[Experimental] Picking color outside of browser

Enable this experiment to pick a color outside of the browser with the color picker. Previously, you could only pick a color within the browser.

In the Styles pane, click on any color preview to open the color picker. Use the eyedropper to pick color from anywhere.

Chromium issue: 1245191

Download the preview channels

Consider using the Chrome Canary , Dev , or Beta as your default development browser. These preview channels give you access to the latest DevTools features, let you test cutting-edge web platform APIs, and help you find issues on your site before your users do!

Get in touch with the Chrome DevTools team

Use the following options to discuss the new features, updates, or anything else related to DevTools.

• Submit feedback and feature requests to us at crbug.com .
• Report a DevTools issue using the more_vert More options > Help > Report a DevTools issue in DevTools.
• Tweet at @ChromeDevTools .
• Leave comments on What's new in DevTools YouTube videos or DevTools Tips YouTube videos .

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.

Jecelyn Yeen

Preview feature: New Performance insights panel

Use the Performance insights panel to get actionable and use-case-driven insights on your website's performance.

Open the panel and start a new recording based on your use case. For example, let's measure the page load of this demo page .

Once the recording is complete, you get the performance insights on the Insights pane. Click on each insight item (for example, Render blocking request, layout shift) to understand the issue and potential fixes.

Go to the Performance insights panel documentation to learn more with the step-by-step tutorial.

This is a preview feature to help web developers (especially non-performance experts) to identify and fix potential performance issues. Our team is actively working on this feature and we are looking for your feedback for further enhancements.

Chromium issue: 1270700

New shortcuts to emulate light and dark themes

You can now emulate the light and dark themes quicker (CSS media feature prefers-color-scheme ) with the new shortcuts in the Styles pane.

Previously, it took more steps to emulate themes in the Rendering tab.

Chromium issue: 1314299

Improved security on the Network Preview tab

DevTools now apply the Content Security Policy (CSP) in the Preview tab in the Network panel.

For example, the first screenshot shows a page that contains mixed content . The page loads over a secure HTTPS connection, but the stylesheet loads over an insecure HTTP connection.

The browser blocked the stylesheet request by default. However, when you opened the page via the Preview tab in the Network panel, the stylesheet was not blocked previously (hence the background turned into red). It is now blocked as you would expect (second screenshot).

Chromium issue: 833147

Improved reloading at breakpoint

The debugger now terminates script execution when reloading at breakpoint.

For example, the script got into an endless loop previously when setting and reloading at the ReactDOM breakpoint in this React demo . The Sources panel broke due to the endless loop.

Continuing to execute JavaScript is causing a lot of trouble for developers and might leave the renderer in a broken state. This change aligns the debugging behavior with other browsers like Firefox.

Chromium issues: 1014415 , 1004038 , 1112863 , 1134899

Console updates

Handle script execution errors in the Console

Errors during script evaluation in the Console now generate proper error events that trigger the window.onerror handler and are dispatched as "error" events on the window object.

Chromium issue: 1295750

Commit live expression with Enter

Once you finish typing a live expression , you can click Enter to commit it. Previously, hitting Enter resulted in adding new lines. This is inconsistent with other parts of the DevTools.

To add a new line in the live expression editor, use Shift + Enter instead.

Chromium issue: 1260744

Cancel user flow recording at the start

You can cancel the recording during the start of user flow recording. Previously, there was no option to cancel the recording.

Chromium issue: 1257499

Display inherited highlight pseudo-elements in the Styles pane

View the inherited highlight pseudo-elements (eg ::selection , ::spelling-error , ::grammar-error , and ::highlight ) in the Styles pane. Previously, these rules were not displayed.

As mentioned in the specification , when multiple styles conflict, cascade determines the winning style. This new feature helps you understand the inheritance and priority of the rules.

Chromium issue: 1024156

Miscellaneous highlights

These are some noteworthy fixes in this release:

• The Properties pane now displays accessor properties with value by default. It was hidden mistakenly previously. ( 1309087 )
• The Styles pane now properly shows the overridden @support rules as strikethrough. Previously, the rules weren't strikethrough. ( 1298025 )
• Fixed the CSS formatting logic in the Sources panel that caused multiple blank lines when editing CSS. ( 1309588 )
• Cap the Expand recursively option of an object in the Console to maximum 100 so it does not go on forever for circular objects. ( 1272450 )

[Experimental] Copy CSS changes

With this experiment, the Styles pane highlights your CSS changes in green. You can hover over the changed rules and click on the new copy button next to it to copy it.

Apart from that, you can copy all CSS changes across declarations by right-clicking on any rule, and selecting Copy all CSS changes .

A new Copy button is added to the Changes tab as well to help you keep track and copy your CSS changes with ease!

Chromium issue: 1268754

[Experimental] Picking color outside of browser

Enable this experiment to pick a color outside of the browser with the color picker. Previously, you could only pick a color within the browser.

In the Styles pane, click on any color preview to open the color picker. Use the eyedropper to pick color from anywhere.

Chromium issue: 1245191

Download the preview channels

Consider using the Chrome Canary , Dev , or Beta as your default development browser. These preview channels give you access to the latest DevTools features, let you test cutting-edge web platform APIs, and help you find issues on your site before your users do!

Get in touch with the Chrome DevTools team

Use the following options to discuss the new features, updates, or anything else related to DevTools.

• Submit feedback and feature requests to us at crbug.com .
• Report a DevTools issue using the more_vert More options > Help > Report a DevTools issue in DevTools.
• Tweet at @ChromeDevTools .
• Leave comments on What's new in DevTools YouTube videos or DevTools Tips YouTube videos .

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.