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

Джеселин Йен

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Инвертировать сетевые фильтры

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подсказка инструментов разработчика

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

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

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

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

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

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

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

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

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

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

Что нового в DevTools

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