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

Кейс Баскс
Kayce Basques
X GitHub

Поддержка повторных объявлений let и class в консоли

Консоль теперь поддерживает переопределение операторов let и class . Отсутствие возможности переопределения часто раздражало веб-разработчиков, экспериментировавших с новым JavaScript-кодом в консоли.

Например, ранее при повторном объявлении локальной переменной с помощью let консоль выдавала ошибку:

Скриншот консоли в Chrome 78, показывающий, что повторное объявление let не удается.

Теперь Консоль позволяет выполнить повторное объявление:

Скриншот консоли в Chrome 80, показывающий, что повторное объявление let выполнено успешно.

Проблема с Chromium № 1004193

Улучшенная отладка WebAssembly

DevTools начал поддерживать стандарт отладки DWARF , что означает расширенную поддержку обхода кода, установки точек останова и разрешения трассировок стека на исходных языках в DevTools. Подробнее см. в статье «Улучшенная отладка WebAssembly в Chrome DevTools» .

Скриншот новой отладки WebAssembly на базе DWARF.

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

Запросить цепочки инициаторов на вкладке «Инициатор»

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

Скриншот цепочки инициаторов запросов на вкладке «Инициатор»

После регистрации сетевой активности на панели «Сеть» щелкните ресурс, а затем перейдите на вкладку «Инициатор» , чтобы просмотреть его цепочку инициаторов запросов :

  • Проверенный ресурс выделен жирным шрифтом. На скриншоте выше проверенным ресурсом является https://web.dev/default-627898b5.js .
  • Ресурсы, расположенные выше проверяемого, являются инициаторами . На снимке экрана выше https://web.dev/bootstrap.js является инициатором https://web.dev/default-627898b5.js . Другими словами, https://web.dev/bootstrap.js стал причиной сетевого запроса к https://web.dev/default-627898b5.js .
  • Ресурсы, расположенные ниже проверяемого ресурса, являются зависимостями . На снимке экрана выше https://web.dev/chunk-f34f99f7.js — это зависимость https://web.dev/default-627898b5.js . Другими словами, https://web.dev/default-627898b5.js вызвал сетевой запрос к https://web.dev/chunk-f34f99f7.js .

Проблема с Chromium № 842488

Выделите выбранный сетевой запрос в обзоре.

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

Скриншот панели обзора, на которой выделен проверенный ресурс.

Проблема с Chromium № 988253

Столбцы URL и пути на панели «Сеть»

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

Скриншот новых столбцов «Путь» и «URL» на панели «Сеть».

Щелкните правой кнопкой мыши заголовок таблицы Waterfall и выберите Путь или URL , чтобы отобразить новые столбцы.

Проблема с Chromium № 993366

Обновленные строки User-Agent

DevTools поддерживает настройку пользовательской строки User-Agent на вкладке «Сетевые условия» . Строка User-Agent влияет на HTTP-заголовок User-Agent прикрепляемый к сетевым ресурсам, а также на значение navigator.userAgent .

Предопределенные строки User-Agent были обновлены с учетом современных версий браузеров.

Скриншот меню «User Agent» на вкладке «Сетевые условия».

Чтобы получить доступ к состоянию сети , откройте меню команд и выполните команду Show Network Conditions .

Проблема с Chromium № 1029031

Обновления аудиторской панели

Новый пользовательский интерфейс конфигурации

Интерфейс настройки имеет новый, адаптивный дизайн, а параметры настройки регулирования были упрощены. Подробнее об изменениях в интерфейсе регулирования см. в разделе «Регулирование панели аудита» .

Новый пользовательский интерфейс конфигурации.

Обновления вкладки «Покрытие»

Режимы покрытия по функциям или по блокам

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

Раскрывающееся меню режима покрытия.

Теперь освещение должно инициироваться перезагрузкой страницы.

Функция переключения покрытия кода без перезагрузки страницы была удалена, поскольку данные о покрытии были ненадёжными. Например, функция может быть отмечена как неиспользуемая, если она выполнялась давно и сборщик мусора V8 её очистил.

Проблема с Chromium № 1004203

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

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

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

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

Что нового в DevTools

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