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

Джеселин Йин

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

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

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

Настройки" ширина="800" высота="494">

Номер выпуска Chromium: 1163928

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

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

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

Устройство Nest Hub в режиме устройства.

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

Исходные испытания отображаются в подробном представлении Frame.

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

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

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

Исходные испытания отображаются в подробном представлении Frame.

Проблема Chromium: 607555

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

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

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

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

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

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

Например, вы можете ввести "status-code: 404", чтобы отфильтровать сетевые запросы со статусом 404. Установите флажок "Invert" , чтобы отменить фильтр (показать все сетевые запросы, не имеющие статуса 404).

Инвертируйте сетевые фильтры

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

В ближайшее время боковая панель консоли будет упразднена.

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

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

Номер выпуска Chromium: 1232937

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

В инструментах разработчика теперь на вкладке «Проблемы» отображаются необработанные заголовки Set-Cookie .

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

Исходные заголовки 'Set-Cookie' на вкладке "Проблемы" и в панели "Сеть".

Номер выпуска Chromium: 1179186

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

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

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

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

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

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

Теперь инструменты разработчика корректно обрабатывают встроенные скрипты с помощью #sourceURL и отображают правильные трассировки стека ошибок для отладки.

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

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

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

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

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

Нажмите Shift + Щелкните по предварительному просмотру цвета, чтобы изменить формат цвета.

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

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

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

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

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

Всплывающая подсказка инструментов разработчика

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

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

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

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

Экспериментальное контекстное меню для скрытия проблемы

Проблема с Chromium: 1175722

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

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

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

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

Что нового в инструментах разработчика

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