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

Джеселин Йен

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

DevTools теперь имеет улучшенную поддержку отладки CSS-сеток!

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

When an HTML element on your page has display: grid or display: inline-grid applied to it, you can see a grid badge next to it in the Elements panel. Щелкните значок, чтобы переключить отображение наложения сетки на странице.

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

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

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

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

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

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

Вкладка ВебАутн

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

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

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

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

Перемещение инструментов между верхней и нижней панелью

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

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

Перейти вниз

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

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

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

Обновления панели «Элементы»

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

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

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

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

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

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

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

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

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

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

Проблемы с хромом: 1096230 , 1084673 , 1106251.

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

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

Маяк

Новые аудиты в Lighthouse 6.4:

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

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

События performance.mark() в разделе «Тайминги»

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

События Performance.mark

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

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

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

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

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

Проблемы с хромом: 1121141 , 1104188.

Подробности о раме, просмотр обновлений

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

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

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

отчет в конечную точку

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

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

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

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

ярлык только для отчета

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

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

Устаревшие Settings в меню «Дополнительные инструменты»

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

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

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

Экспериментальные возможности

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что нового в DevTools

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