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

Jecelyn Yeen

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

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

Если к 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. Нажмите, чтобы развернуть каждую проблему и узнать о возможных причинах и решениях.

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

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

Переименовать метку XHR в Fetch/XHR

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что нового в DevTools

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