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

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

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

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

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

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

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

Проблема с хромом #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 .

Проблема с хромом #842488

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

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

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

Проблема с хромом #988253

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

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

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

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

Проблема с хромом #993366

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

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

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

Скриншот меню «Агент пользователя» на вкладке «Состояния сети».

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

Проблема с хромом #1029031

Обновления панели аудита

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

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

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

Обновления вкладки «Охват»

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

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

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

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

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

Проблема с хромом #1004203

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

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

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

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

Что нового в DevTools

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