Что нового в 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 на вкладке «Сетевые условия» . Строка User-Agent влияет на HTTP-заголовок User-Agent , прикрепленный к сетевым ресурсам, а также на значение navigator.userAgent .

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

Скриншот меню User Agent на вкладке Network Conditions.

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

Проблема с хромом № 1029031.

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

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

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

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

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

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

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

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

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

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

Проблема с хромом № 1004203.

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

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

Связь с командой Chrome DevTools

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

Что нового в DevTools

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

,

Кейси Баски

Поддержка переобъявления 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 на вкладке «Сетевые условия» . Строка User-Agent влияет на HTTP-заголовок User-Agent , прикрепленный к сетевым ресурсам, а также на значение navigator.userAgent .

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

Скриншот меню User Agent на вкладке Network Conditions.

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

Проблема с хромом № 1029031.

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

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

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

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

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

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

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

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

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

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

Проблема с хромом № 1004203.

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

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

Связь с командой Chrome DevTools

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

Что нового в DevTools

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