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

Jecelyn Yeen

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

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

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

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

Более подробную информацию можно узнать из документации .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Просмотр вычисляемой боковой панели на панели «Стили»

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

Панель Computed sidebar в панели Styles по умолчанию свернута. Нажмите кнопку, чтобы переключить ее.

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

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

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

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

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

Проблемы с Chromium: 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() .

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

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

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

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

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

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

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

Теперь вы можете просматривать политику Cross-Origin Embedder Policy (COEP) и политику Cross-Origin Opener Policy (COOP) reporting to конечной точке, в разделе « Безопасность и изоляция» .

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

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

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

Отображение COEP и режима report-only 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.

• Отправляйте нам отзывы и запросы на новые функции на crbug.com .
• Сообщить о проблеме DevTools можно с помощью функции more_vert Дополнительные параметры > Справка > Сообщить о проблеме DevTools в DevTools.
• Твитните @ChromeDevTools .
• Оставляйте комментарии к видео «Что нового в DevTools» на YouTube или к видео «Советы по DevTools» на YouTube .

Что нового в DevTools

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