Что нового в 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 теперь поддерживает перемещение инструментов между верхней и нижней панелями. Таким образом, вы можете видеть любые два инструмента одновременно.

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

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

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

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

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

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

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

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

Группировка свойств 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 .

Проблема с хромом: 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

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

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

Что нового в DevTools

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