Что нового в 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 (например, страницу демо ). На панели приложений прокрутите вниз до раздела Frames и выберите верхний фрейм.

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

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

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

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

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

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

Например, вы можете ввести «status-code: 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]) в Console собственные методы доступа, такие как length , byteOffset не отображались в предварительном просмотре. С этим последним обновлением собственные методы доступа отображаются в предварительном просмотре, а значения быстро оцениваются при расширении.

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

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

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

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

Проблемы с Chromium: 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 .
• Оставляйте комментарии к видео «Что нового в DevTools» на YouTube или к видео «Советы по DevTools» на YouTube .

Что нового в DevTools

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