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

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Jecelyn Yeen

Используйте DevTools на предпочитаемом вами языке.

Chrome DevTools теперь поддерживает более 80 языков, что позволяет вам работать на предпочитаемом вами языке!

Откройте «Настройки» , затем выберите предпочитаемый язык в раскрывающемся списке «Настройки» > «Язык» и перезагрузите DevTools.

Настройки" width="800" height="494">

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

Новые устройства Nest Hub в списке устройств.

Теперь вы можете моделировать размеры Nest Hub и Nest Hub Max в режиме устройства .

Нажмите «Переключить панель инструментов устройства». , выберите Nest Hub или Nest Hub Max в списке устройств.

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

Исходные пробные версии в представлении сведений о раме

Теперь вы можете получить информацию о пробных версиях сайта в представлении сведений о фрейме на панели «Приложение».

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

Откройте страницу с пробными версиями Origin (например, демо-страницу ). На панели «Приложение» прокрутите вниз до раздела «Кадры» и выберите верхний кадр.

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

Новый значок запросов контейнера CSS

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

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

Новый флажок для инвертирования сетевых фильтров.

Используйте новый флажок «Инвертировать» , чтобы инвертировать фильтры на панели «Сеть».

Например, вы можете ввести «код состояния: 404», чтобы отфильтровать сетевые запросы со статусом 404. Установите флажок «Инвертировать» , чтобы отключить фильтр (показать все сетевые запросы, которые не имеют статуса 404).

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

Предстоящее прекращение поддержки боковой панели консоли.

Боковая панель консоли будет удалена в пользу перемещения пользовательского интерфейса фильтра на панель инструментов. Есть ли у вас какие-либо проблемы или отзывы? Сообщите нам об этом через систему отслеживания проблем .

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

Отображать необработанные заголовки Set-Cookie на вкладке «Проблемы» и панели «Сеть».

DevTools теперь отображает необработанные заголовки Set-Cookie на вкладке «Проблемы» .

Ранее DevTools не отображал некорректные файлы cookie (неправильный заголовок Set-Cookie ) на панели «Сеть». Благодаря новому фильтру response-header-set-cookie добавленному на панель «Сеть» , пользователи могут фильтровать необработанный ответ заголовка Set-Cookie . DevTools свяжет необработанные заголовки Set-Cookie на вкладке «Проблемы» с панелью «Сеть» .

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

Согласованное отображение собственных средств доступа как собственных свойств в консоли.

Консоль теперь последовательно отображает собственные средства доступа как их собственные свойства.

Например, при оценке new Int8Array([1, 2, 3]) в консоли собственные средства доступа, такие как length и byteOffset , не отображались в предварительном просмотре. В этом последнем обновлении встроенные средства доступа отображаются в предварительном просмотре, а значения быстро оцениваются при раскрытии.

Проблемы с хромом: 1076820 , 1199247

Правильная трассировка стека ошибок для встроенных скриптов с #sourceURL

DevTools теперь правильно разрешает встроенные сценарии с #sourceURL и отображает правильные трассировки стека ошибок для отладки.

Раньше DevTools отображал неправильное расположение встроенных скриптов с #sourceURL относительно окружающего документа, а не относительно открывающего тега <script> .

Проблемы с хромом: 1183990 , 578269

Изменение формата цвета на панели «Вычисляемые»

Теперь вы можете изменить цветовой формат любого элемента на панели «Вычисления», удерживая клавишу Shift + щелчок по предварительному просмотру цвета.

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

Замените пользовательские всплывающие подсказки собственными HTML-подсказками.

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

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

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

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

[Экспериментальное] Скрытие проблем на вкладке «Проблемы»

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

На вкладке «Проблема» наведите курсор на проблему и щелкните меню проблемы. справа выберите «Скрыть подобные проблемы», чтобы скрыть их.

Проблема с хромом: 1175722.

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

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

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

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

• Отправляйте нам отзывы и запросы на добавление новых функций на crbug.com .
• Сообщите о проблеме DevTools, используя more_vert Дополнительные параметры > Справка > Сообщить о проблеме DevTools в DevTools.
• Напишите в Твиттере @ChromeDevTools .
• Оставляйте комментарии к видеороликам YouTube «Что нового в DevTools» или «Советы разработчика» на YouTube .

Что нового в DevTools

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

Jecelyn Yeen

Используйте Devtools на предпочтительном языке

Chrome Devtools теперь поддерживает более 80 языков, что позволяет вам работать на предпочтительном языке!

Откройте настройки , затем выберите предпочтительный язык в соответствии с предпочтениями > выпадающим языком и перезагружайте Devtools.

Предпочтения "ширина =" 800 "высота =" 494 ">

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

Новые устройства Nest Hub в списке устройств

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

Нажмите на панель инструментов Device Device , выберите Nest Hub или Nest Hub Max в списке устройств.

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

Испытания происхождения в просмотре деталей кадры

Теперь вы можете получить информацию о испытаниях происхождения сайта в просмотре сведений о кадре под панелью приложения.

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

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

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

Новый значок запросов контейнеров CSS

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

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

Новый флажок для инвертирования сетевых фильтров

Используйте новый флажок Invert , чтобы инвертировать фильтры на сетевой панели.

Например, вы можете ввести «код состояния: 404», чтобы отфильтровать сетевые запросы со состоянием 404. Включить флажок Invert для отмены фильтра (покажите все сетевые запросы, которые не имеют состояния 404).

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

Предстоящая установка боковой панели консоли

Боковая панель консоли будет удалена в пользу перемещения пользовательского интерфейса фильтра на панель инструментов. У вас есть какие -либо проблемы или отзывы? Дайте нам знать через этот трекер выпуска .

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

Отображение Set-Cookie заголовков на вкладке «Проблемы» и «Сетевой панели

Devtools теперь отображает необработанные заголовки Set-Cookie на вкладке «Проблемы» .

Ранее DevTools не показывали невернообразных файлов cookie (неверный заголовок Set-Cookie ) на сетевой панели. Благодаря новому фильтру response-header-set-cookie добавленным на панели сети , пользователи могут отфильтровать отклик заголовка Set-Cookie . Devtools свяжет заголовки Set-Cookie с Raw-Cookie на вкладке «Выпуск» с сетевой панелью.

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

Последовательный дисплей, нативные аксессов как собственные свойства в консоли

Консоль теперь отображает нативные аксессов как их собственные свойства последовательно.

Например, при оценке new Int8Array([1, 2, 3]) в консоли , нативные аксессов, такие как length , byteOffset не отображался в предварительном просмотре. С помощью этого последнего обновления нативные аксессов показаны в предварительном просмотре, а значения с нетерпением оцениваются при расширении.

Проблемы с хромом: 1076820 , 1199247

Правильные трассировки стека ошибок для встроенных сценариев с #SourCeurl

DevTools теперь регулируют встроенные сценарии с #sourceURL и показывают правильные трассировки стека ошибок для отладки.

Ранее Devtools отображали неправильное местоположение для встроенных сценариев с #sourceURL , относительно окружающего документа, а не относительно первого <script> тега.

Проблемы с хромом: 1183990 , 578269

Изменить формат цвета на вычисленной панели

Теперь вы можете изменить формат цвета любого элемента в вычисленной панели путем Shift + Нажмите на предварительный просмотр цвета.

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

Замените пользовательские подсказки на нативные подсказки HTML

В настоящее время Devtools принимает нативные инструменты HTML во всех компонентах. Devtools долгое время имела пользовательскую реализацию подсказки инструментов из -за отсутствия стиля нативной HTML -подсказки.

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

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

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

[Экспериментально] скрыть проблемы на вкладке «Проблемы»

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

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

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

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

Рассмотрите возможность использования 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

Use DevTools in your preferred language

Chrome DevTools now supports more than 80 languages, allowing you to work in your preferred language!

Open Settings , then select your preferred language under the Preferences > Language dropdown and reload DevTools.

Preferences" width="800" height="494">

Chromium issue: 1163928

New Nest Hub devices in the Device list

You can now simulate the dimensions of Nest Hub and Nest Hub Max in the Device mode .

Click Toggle Device Toolbar , select Nest Hub or Nest Hub Max under the device list.

Chromium issue: 1223525

Origin trials in the Frame details view

You can now get information about a site's origin trials in the frame details view under the Application panel.

Origin trials gives you access to a new or experimental feature, to build functionality your users can try out for a limited time before the feature is made available to everyone.

Open a page with origin trials (eg demo page ). In the Application panel, scroll down to the Frames section and select the top frame.

Chromium issue: 607555

New CSS container queries badge

A new container badge is added next to the container elements (the ancestor elements that match the criteria of @container at-rules). Click the badge to toggle the display of an overlay of the chosen container and all its querying descendants on the page.

Chromium issue: 1146422

New checkbox to invert the network filters

Use the new Invert checkbox to invert the filters in the Network panel.

For example, you can type "status-code: 404" to filter the network requests with status 404. Enable the Invert checkbox to negate the filter (show all network requests which are not with status 404).

Chromium issue: 1054464

Upcoming deprecation of the Console sidebar

The Console sidebar will be removed in favor of moving the filter UI to the toolbar. Do you have any concerns or feedback? Let us know via this issue tracker .

Chromium issue: 1232937

Display raw Set-Cookie headers in the Issues tab and Network panel

DevTools now displays raw Set-Cookie headers in the Issues tab.

Previously, DevTools did not show malformed cookies (incorrect Set-Cookie header) in the Network panel. With the new response-header-set-cookie filter added in the Network panel, users can filter the raw Set-Cookie header response. DevTools will link the raw Set-Cookie headers in the Issues tab to the Network panel.

Chromium issue: 1179186

Consistent display native accessors as own properties in the Console

The Console now displays native accessors as their own properties consistently.

For example, when evaluating the new Int8Array([1, 2, 3]) expression in the Console , native accessors like length , byteOffset did not display in the preview. With this latest update, native accessors are shown in the preview and values are eagerly evaluated when expanded.

Chromium issues: 1076820 , ​​1199247

Proper error stack traces for inline scripts with #sourceURL

DevTools now resolves inline scripts with #sourceURL properly and shows proper error stack traces for debugging.

Previously DevTools displayed incorrect location for inline scripts with #sourceURL , relative to the surrounding document rather than relative to the opening <script> tag.

Chromium issues: 1183990 , ​​578269

Change color format in the Computed pane

You can now change the color format of any element in the Computed pane by Shift + click on the color preview.

Chromium issue: 1226371

Replace custom tooltips with native HTML tooltips

DevTools now adopts native HTML tooltips across all components. DevTools has had a custom tooltip implementation for a long time due to the lack of styling of a native HTML tooltip.

Unfortunately, maintaining a custom tooltip implementation is complicated and we regularly run into complicated bugs.

After reweighting the benefits of the custom implementations, we find that the native HTML tooltips are sufficient for DevTools and adopting the tooltips prevents a vast variety of problems for our users.

Chromium issue: 1223391

[Experimental] Hide issues in the Issues tab

Enable the hide issues menu experiment to hide issues in the Issues tab. This way, you can focus on the important issues that matter to you.

In the Issue tab, hover an issue, click on the issue menu on the right, select Hide issues like this to hide it.

Chromium issue: 1175722

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

Use DevTools in your preferred language

Chrome DevTools now supports more than 80 languages, allowing you to work in your preferred language!

Open Settings , then select your preferred language under the Preferences > Language dropdown and reload DevTools.

Preferences" width="800" height="494">

Chromium issue: 1163928

New Nest Hub devices in the Device list

You can now simulate the dimensions of Nest Hub and Nest Hub Max in the Device mode .

Click Toggle Device Toolbar , select Nest Hub or Nest Hub Max under the device list.

Chromium issue: 1223525

Origin trials in the Frame details view

You can now get information about a site's origin trials in the frame details view under the Application panel.

Origin trials gives you access to a new or experimental feature, to build functionality your users can try out for a limited time before the feature is made available to everyone.

Open a page with origin trials (eg demo page ). In the Application panel, scroll down to the Frames section and select the top frame.

Chromium issue: 607555

New CSS container queries badge

A new container badge is added next to the container elements (the ancestor elements that match the criteria of @container at-rules). Click the badge to toggle the display of an overlay of the chosen container and all its querying descendants on the page.

Chromium issue: 1146422

New checkbox to invert the network filters

Use the new Invert checkbox to invert the filters in the Network panel.

For example, you can type "status-code: 404" to filter the network requests with status 404. Enable the Invert checkbox to negate the filter (show all network requests which are not with status 404).

Chromium issue: 1054464

Upcoming deprecation of the Console sidebar

The Console sidebar will be removed in favor of moving the filter UI to the toolbar. Do you have any concerns or feedback? Let us know via this issue tracker .

Chromium issue: 1232937

Display raw Set-Cookie headers in the Issues tab and Network panel

DevTools now displays raw Set-Cookie headers in the Issues tab.

Previously, DevTools did not show malformed cookies (incorrect Set-Cookie header) in the Network panel. With the new response-header-set-cookie filter added in the Network panel, users can filter the raw Set-Cookie header response. DevTools will link the raw Set-Cookie headers in the Issues tab to the Network panel.

Chromium issue: 1179186

Consistent display native accessors as own properties in the Console

The Console now displays native accessors as their own properties consistently.

For example, when evaluating the new Int8Array([1, 2, 3]) expression in the Console , native accessors like length , byteOffset did not display in the preview. With this latest update, native accessors are shown in the preview and values are eagerly evaluated when expanded.

Chromium issues: 1076820 , ​​1199247

Proper error stack traces for inline scripts with #sourceURL

DevTools now resolves inline scripts with #sourceURL properly and shows proper error stack traces for debugging.

Previously DevTools displayed incorrect location for inline scripts with #sourceURL , relative to the surrounding document rather than relative to the opening <script> tag.

Chromium issues: 1183990 , ​​578269

Change color format in the Computed pane

You can now change the color format of any element in the Computed pane by Shift + click on the color preview.

Chromium issue: 1226371

Replace custom tooltips with native HTML tooltips

DevTools now adopts native HTML tooltips across all components. DevTools has had a custom tooltip implementation for a long time due to the lack of styling of a native HTML tooltip.

Unfortunately, maintaining a custom tooltip implementation is complicated and we regularly run into complicated bugs.

After reweighting the benefits of the custom implementations, we find that the native HTML tooltips are sufficient for DevTools and adopting the tooltips prevents a vast variety of problems for our users.

Chromium issue: 1223391

[Experimental] Hide issues in the Issues tab

Enable the hide issues menu experiment to hide issues in the Issues tab. This way, you can focus on the important issues that matter to you.

In the Issue tab, hover an issue, click on the issue menu on the right, select Hide issues like this to hide it.

Chromium issue: 1175722

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.