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

Джеселин Йин

редактор CSS-сеток

Очень востребованная функция. Теперь вы можете предварительно просматривать и создавать CSS-сетки с помощью нового редактора CSS-сеток!

Редактор CSS-сеток

Когда к HTML-элементу на вашей странице применяется свойство display: grid или display: inline-grid , рядом с ним в панели «Стили» появляется значок. Щелкните по значку, чтобы открыть редактор CSS-сетки. Здесь вы можете предварительно просмотреть возможные изменения с помощью экранных значков (например, justify-content: space-around ) и изменить внешний вид сетки одним щелчком мыши.

Проблема Chromium: 1203241

Поддержка повторного объявления const в консоли

В дополнение к существующим функциям повторного объявления let и class , консоль теперь поддерживает повторное объявление оператора const . Невозможность повторного объявления была распространенной проблемой для веб-разработчиков, использующих консоль для экспериментов с новым кодом JavaScript.

Это позволяет разработчикам копировать и вставлять код в консоль DevTools, чтобы посмотреть, как он работает, или поэкспериментировать, вносить небольшие изменения в код и повторять процесс без обновления страницы. Ранее DevTools выдавал синтаксическую ошибку, если в коде повторно объявлялась const привязка.

См. пример ниже. Повторное объявление const поддерживается в разных REPL-скриптах (см. переменную a ). Обратите внимание, что следующие сценарии не поддерживаются по задумке:

  • Повторное объявление const в скриптах страниц не допускается в скриптах REPL.
  • Повторное объявление const в рамках одного и того же скрипта REPL не допускается (см. переменную b ).

постоянные повторные объявления

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

Просмотрщик порядка источников

Теперь вы можете просматривать порядок элементов исходного кода на экране для более удобной проверки доступности.

Просмотрщик порядка источников

Порядок отображения контента в HTML-документе важен для поисковой оптимизации и доступности. Новые возможности CSS позволяют разработчикам создавать контент, который на экране выглядит совершенно иначе, чем в HTML-документе. Это серьезная проблема доступности, поскольку пользователи программ чтения с экрана получат иной, скорее всего, запутанный опыт, чем зрячие пользователи.

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

Новый ярлык для просмотра подробностей кадра.

Чтобы просмотреть подробную информацию об iframe, щелкните правой кнопкой мыши по элементу iframe на панели «Элементы» и выберите «Показать подробную информацию о фрейме» .

Показать детали рамки

Это переведет вас на страницу с подробной информацией о iframe в панели приложения, где вы сможете изучить сведения о документе, состояние безопасности и изоляции, политику разрешений и многое другое для отладки потенциальных проблем.

Детальный вид кадра

Проблема Chromium: 1192084

Расширенная поддержка отладки CORS

Ошибки междоменного обмена ресурсами (CORS) теперь отображаются на вкладке «Проблемы». Причины возникновения ошибок CORS могут быть различными. Щелкните, чтобы развернуть каждую проблему и узнать о потенциальных причинах и решениях.

Проблемы CORS указаны на вкладке «Проблемы».

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

Обновления сетевой панели

Переименуйте метку XHR в Fetch/XHR.

Метка XHR теперь переименована в Fetch/XHR . Это изменение делает более понятным, что данный фильтр включает в себя как сетевые запросы XMLHttpRequest , так и запросы Fetch API .

Получить/XHR метку

Проблема Chromium: 1201398

Отфильтруйте типы ресурсов Wasm на панели «Сеть».

Теперь вы можете нажать на новую кнопку Wasm , чтобы отфильтровать сетевые запросы Wasm.

Фильтр по Wasm

Проблема Chromium: 1103638

Подсказки клиента User-Agent для устройств на вкладке «Состояние сети»

Подсказки клиента User-Agent теперь применяются для устройств в поле User agent на вкладке «Сетевые условия» .

User-Agent Client Hints — это новое расширение API Client Hints, позволяющее разработчикам получать доступ к информации о браузере пользователя с соблюдением принципов конфиденциальности и эргономичным способом.

Подсказки клиента User-Agent для устройств на вкладке «Состояние сети»

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

Сообщайте о проблемах в режиме "Особенности" на вкладке "Проблемы".

В инструментах разработчика теперь отображаются сообщения о проблемах в режимах Quirks Mode и Limited-quirks Mode .

Режимы Quirks Mode и Limited-quirks Mode — это устаревшие режимы браузера, существовавшие до принятия веб-стандартов. Эти режимы имитируют поведение макета достандартной эпохи, что часто приводит к неожиданным визуальным эффектам.

При отладке проблем с макетом разработчики могут ошибочно полагать, что они вызваны ошибками в CSS или HTML, допущенными пользователями, в то время как реальная проблема заключается в режиме совместимости страницы. Инструменты разработчика предлагают способы его исправления.

Сообщайте о проблемах в режиме "Особенности" на вкладке "Проблемы".

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

Включите вычислительные пересечения на панели «Производительность».

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

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

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

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

В панели Lighthouse теперь используется Lighthouse 7.5. Предупреждение о «отсутствующих явно заданных ширине и высоте» теперь удалено для изображений с заданным в CSS aspect-ratio . Ранее Lighthouse отображал предупреждения для изображений, у которых не были заданы ширина и высота.

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

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

Устаревшее контекстное меню «Перезапуск кадра» в стеке вызовов.

Функция перезапуска кадра устарела. Для корректной работы этой функции требуется дальнейшая доработка, в настоящее время она не работает и часто приводит к сбоям.

Устаревшее контекстное меню окна перезапуска

Проблема Chromium: 1203606

[Экспериментальный] Монитор протокола

Chrome DevTools использует протокол Chrome DevTools Protocol (CDP) для инструментирования, проверки, отладки и профилирования браузеров Chrome. Монитор протокола позволяет просматривать все запросы и ответы CDP, отправляемые DevTools.

Для упрощения тестирования CDP добавлены две новые функции:

  • Новая кнопка «Сохранить» позволяет загрузить записанные сообщения в виде файла JSON.
  • Новое поле, позволяющее отправлять необработанную команду CDP напрямую.

Монитор протокола

Проблемы Chromium: 1204004 , 1204466

[Экспериментальный] диктофон для кукловодов

Теперь средство записи Puppeteer генерирует список шагов на основе вашего взаимодействия с браузером, тогда как ранее DevTools напрямую генерировал скрипт Puppeteer. Добавлена ​​новая кнопка «Экспорт» , позволяющая экспортировать шаги в виде скрипта Puppeteer.

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

Обратите внимание, что это эксперимент на ранней стадии. Мы планируем улучшать и расширять функциональность функции записи со временем.

Кукловод-рекордер

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

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

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

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

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

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

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