Что нового в 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 предоставляют вам доступ к новой или экспериментальной функции, позволяя вашим пользователям опробовать ее в течение ограниченного времени, прежде чем функция станет доступна всем.

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

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

Что нового в DevTools

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