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

Джеселин Йен

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

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

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

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

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

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

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

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

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

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

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

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

Просмотр исходного заказа

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

Просмотр исходного заказа

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

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

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

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

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

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

Просмотр деталей рамы

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

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

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

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

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

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

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

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

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

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

Фильтрация типа ресурса Wasm на панели «Сеть»

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

Фильтровать по Wasm

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

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

Подсказки клиента агента пользователя теперь применяются к устройствам в поле «Агент пользователя» на вкладке «Условия сети» .

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

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

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

Сообщайте о проблемах в режиме Quirks на вкладке «Проблемы».

DevTools теперь сообщает о проблемах в режиме Quirks Mode и Limited-quirks Mode .

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

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

Сообщайте о проблемах в режиме Quirks на вкладке «Проблемы».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Проблемы с хромом: 1204004 , 1204466.

[Экспериментальное] Блокфлейта кукольника

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

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

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

Кукловод-блок-флейта

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

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

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

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

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

Что нового в DevTools

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