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

Новые инструменты отладки CSS Grid

В инструментах разработчика теперь улучшена поддержка отладки CSS-сеток!

Отладка CSS-сеток

Когда к HTML-элементу на вашей странице применяется display: grid или display: inline-grid , рядом с ним в панели «Элементы» отображается значок grid . Щелкнув по значку, вы можете переключить отображение сетки на странице.

В новой панели «Макет» есть раздел «Сетка» , предлагающий несколько вариантов отображения сеток.

Для получения более подробной информации ознакомьтесь с документацией .

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

Новая вкладка WebAuthn

Теперь вы можете эмулировать аутентификаторы и отлаживать API веб-аутентификации с помощью новой вкладки WebAuthn .

Чтобы открыть вкладку WebAuthn, выберите «Дополнительные параметры» > «Дополнительные инструменты» > «WebAuthn» .

Вкладка WebAuthn

До появления новой вкладки WebAuthn в Chrome отсутствовала встроенная поддержка отладки WebAuthn. Разработчикам требовались физические аутентификаторы для тестирования веб-приложений с помощью API веб-аутентификации.

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

Ознакомьтесь с нашей документацией , чтобы узнать больше о функции WebAuthn.

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

Перемещайте инструменты между верхней и нижней панелями.

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

Например, если вы хотите просмотреть панели «Элементы» и «Источники» одновременно, вы можете щелкнуть правой кнопкой мыши на панели «Источники» и выбрать «Переместить вниз» , чтобы переместить ее в конец списка.

Перейти вниз

Аналогичным образом, вы можете переместить любую нижнюю вкладку вверх, щелкнув правой кнопкой мыши по вкладке и выбрав «Переместить вверх» .

Перейти наверх

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

Обновления панели элементов

Перейдите в панель «Вычисляемые» в разделе «Стили».

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

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

Вычисленная боковая панель

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

Группировка свойств CSS на панели «Вычисляемые»

Теперь вы можете группировать свойства CSS по категориям на панели «Вычисления» .

Благодаря новой функции группировки станет проще перемещаться по панели «Вычисления» (меньше прокрутки) и выборочно фокусироваться на наборе связанных свойств для проверки CSS.

На панели «Элементы» выберите элемент. Установите флажок «Группировать» , чтобы сгруппировать/разгруппировать свойства CSS.

Группировка свойств CSS

Проблемы Chromium: 1096230 , 1084673 , 1106251

Маяк 6.4 на панели «Маяк»

В панели Lighthouse теперь используется Lighthouse 6.4. Полный список изменений см. в примечаниях к выпуску .

Маяк

В Lighthouse 6.4 появились новые функции аудита:

  • Предварительная загрузка шрифтов . Проверяет, были ли предварительно загружены все шрифты, использующие font-display: optional .
  • Проверка корректности исходных карт . Проверяет, содержит ли страница корректные исходные карты для больших файлов JavaScript собственного производства.
  • [Экспериментальная версия] Большая библиотека JavaScript . Большие библиотеки JavaScript могут приводить к низкой производительности. В этом обзоре предлагаются более дешевые альтернативы распространенным, большим библиотекам JavaScript, таким как moment.js .

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

События performance.mark() в разделе Timings

В разделе «Время» записи выступления теперь отмечаются события, отмечаемые performance.mark() .

События Performance.mark

В панели «Сеть» появились новые фильтры resource-type и url .

Используйте новые ключевые слова resource-type и url на панели «Сеть» для фильтрации сетевых запросов.

Например, используйте resource-type:image , чтобы сосредоточиться на сетевых запросах, содержащих изображения.

фильтр типа ресурса

Воспользуйтесь фильтрами запросов по свойствам , чтобы найти более специальные ключевые слова, такие как resource-type и url .

Проблемы Chromium: 1121141 , 1104188

Обновления отображения подробной информации о кадре

Отображение reporting to конечной точке

Теперь вы можете просмотреть reporting to конечную точку, в разделе «Безопасность и изоляция» .

API для создания отчетов определяет новый HTTP-заголовок Report-To , который позволяет веб-разработчикам указывать конечные точки серверов, на которые браузер будет отправлять предупреждения и ошибки.

передача данных на конечную точку

Прочитайте эту статью , чтобы узнать больше о том, как включить COEP и COOP и сделать ваш веб-сайт "изолированным от междоменных запросов".

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

Отображение report-only COEP и COOP.

В инструментах разработчика теперь отображается метка report-only для COEP и COOP, которые установлены в режим report-only .

метка только для отчета

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

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

Прекращение поддержки Settings в меню «Дополнительные инструменты».

Функция Settings в меню «Дополнительные инструменты» устарела. Вместо этого открывайте « Настройки» из главной панели.

Настройки в главной панели

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

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

Просматривайте и исправляйте проблемы с контрастностью цветов на панели «Обзор CSS».

В панели «Обзор CSS» теперь отображается список текстов с низким цветовым контрастом на вашей странице.

В этом примере на демонстрационной странице обнаружена проблема с низким цветовым контрастом. Щелкнув по проблеме, вы сможете просмотреть список элементов, имеющих эту проблему.

Проблемы с низким цветовым контрастом

Щелкните по элементу в списке, чтобы открыть его на панели «Элементы» . Инструменты разработчика автоматически подскажут цвет , как исправить текст с низким контрастом.

Проблема Chromium: 1120316

Настройка сочетаний клавиш в инструментах разработчика

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

Перейдите в «Настройки» > «Сочетания клавиш» , наведите курсор на нужный элемент и нажмите кнопку «Изменить» (значок пера), чтобы настроить сочетание клавиш.

Настройка сочетаний клавиш

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

Выпуск Chromium: 174309

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

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

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

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

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

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