Что нового в 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

Ошибки Cross-origin resource sharing (CORS) теперь отображаются на вкладке Issues. Существуют различные причины возникновения ошибок CORS. Щелкните, чтобы развернуть каждую проблему и понять потенциальные причины и решения.

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

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

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

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

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

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

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

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

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

Подсказки User-Agent Client теперь применяются к устройствам в поле User-Agent на вкладке Network Conditions .

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

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

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

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

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

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

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

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

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

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

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

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

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

Выпуск хрома: 772558

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что нового в DevTools

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