Что нового в 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 были обновлены в соответствии с современными версиями браузеров.

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

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

Выпуск Chromium № 1029031

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

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

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

Новый пользовательский интерфейс для настройки.

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

Режимы покрытия для отдельных функций или блоков

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

Выпадающее меню режима покрытия.

Теперь для запуска проверки покрытия страницы необходимо перезагрузить страницу.

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

Проблема Chromium № 1004203

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

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

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

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

Что нового в инструментах разработчика

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