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

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

Новые функции и основные изменения в DevTools в Chrome 66 включают:

Продолжайте читать или смотрите видеоверсию примечаний к выпуску ниже.

Игнорировать скрипт на панели «Сеть»

Столбец «Инициатор» на панели «Сеть» содержит информацию о причине запроса ресурса. Например, если JavaScript вызывает загрузку изображения, столбец «Инициатор» отображает строку кода JavaScript, вызвавшую запрос.

Раньше, если ваш фреймворк обёртывал сетевые запросы в обёртку, столбец «Инициатор» был не так полезен. Все сетевые запросы указывали на одну и ту же строку кода обёртки.

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

  1. Наведите указатель мыши на столбец «Инициатор» . Стек вызовов, вызвавший запрос, появится во всплывающем окне.
  2. Щелкните правой кнопкой мыши вызов, который вы хотите скрыть из результатов инициатора.
  3. Выберите «Добавить сценарий в список игнорируемых» . В столбце «Инициатор» теперь скрыты все вызовы из сценария, которые вы проигнорировали.

Игнорирование «requests.js».

Рисунок 1. Игнорирование requests.js

Управляйте игнорируемыми скриптами на вкладке «Список игнорируемых» в настройках .

Дополнительные сведения об игнорировании сценариев см. в разделе Игнорирование сценария или шаблона сценариев .

Красивая печать на вкладках «Предварительный просмотр» и «Ответ»

Вкладка «Предварительный просмотр» на панели «Сеть» теперь по умолчанию выводит на экран ресурсы в удобном виде при обнаружении их минимизации.

Вкладка «Предварительный просмотр» по умолчанию отображает содержимое analytics.js.

Рисунок 2. Вкладка «Предварительный просмотр» — отображение содержимого analytics.js по умолчанию.

Чтобы просмотреть неминифицированную версию ресурса, используйте вкладку «Ответ» . Вы также можете вручную настроить форматирование ресурсов на вкладке «Ответ» с помощью новой кнопки «Формат» .

Ручная распечатка содержимого analytics.js с помощью кнопки «Формат».

Рисунок 3. Ручная печать содержимого analytics.js с помощью кнопки «Формат»

Предварительный просмотр HTML-содержимого на вкладке «Предварительный просмотр»

Раньше вкладка «Предварительный просмотр» на панели «Сеть» в одних ситуациях отображала код HTML-ресурса, а в других — отображала предварительный просмотр HTML-кода. Теперь вкладка «Предварительный просмотр» всегда отображает базовый HTML-код. Она не предназначена для полноценного браузера, поэтому HTML-код может отображаться не совсем так, как вы ожидаете. Чтобы увидеть HTML-код, перейдите на вкладку «Ответ» или щёлкните правой кнопкой мыши ресурс и выберите «Открыть на панели «Источники»» .

Предварительный просмотр HTML на вкладке «Предварительный просмотр».

Рисунок 4. Предварительный просмотр HTML на вкладке «Предварительный просмотр»

Автоматическая настройка масштабирования в режиме устройства

В режиме устройства откройте раскрывающийся список Масштаб и выберите Автоматическая настройка масштаба , чтобы автоматически изменять размер области просмотра при каждом изменении ориентации устройства.

Локальные переопределения теперь работают с некоторыми стилями, определенными в HTML.

Когда DevTools запустил функцию Local Overrides в Chrome 65, одним из ограничений было то, что она не могла отслеживать изменения стилей, определённых в HTML. Например, на рисунке 7 в head документа есть правило стиля, которое объявляет font-weight: bold для элементов h1 .

Пример стилей, определенных в HTML

Рисунок 5. Пример стилей, определенных в HTML.

В Chrome 65, если вы изменяли значение начертания font-weight через панель «Стиль» в DevTools, функция «Локальные переопределения» не отслеживала изменения. Другими словами, при следующей загрузке стиль возвращался к значению font-weight: bold . Но в Chrome 66 подобные изменения теперь сохраняются при каждой загрузке страницы.

Дополнительный совет: игнорируйте скрипты фреймворка, чтобы сделать точки останова прослушивателя событий более полезными.

Когда я создавал видео «Начало работы с отладкой JavaScript» , некоторые зрители отмечали, что точки останова прослушивателей событий бесполезны для приложений, созданных на основе фреймворков, поскольку они часто обёрнуты в код фреймворка. Например, на рисунке 8 я установил точку останова click в DevTools. При нажатии кнопки в демоверсии DevTools автоматически останавливается на первой строке кода прослушивателя. В данном случае остановка происходит в коде обёртки Vue.js на строке 1802, что не очень полезно.

Точка останова по щелчку останавливается в коде-оболочке Vue.js.

Рисунок 6. Точка останова click останавливается в коде-обёртке Vue.js.

Поскольку скрипт Vue.js находится в отдельном файле, я могу игнорировать этот скрипт на панели «Стек вызовов» , чтобы сделать эту точку останова click более полезной.

Игнорирование скрипта Vue.js из панели стека вызовов.

Рисунок 7. Игнорирование скрипта Vue.js из панели «Стек вызовов»

В следующий раз, когда я нажму кнопку и активирую точку click , код Vue.js будет выполнен без паузы, а затем остановится на первой строке кода в прослушивателе моего приложения, и именно там я и хотел сделать паузу с самого начала.

Точка останова по щелчку теперь останавливается на коде прослушивателя приложения.

Рисунок 8. Точка останова click теперь останавливается на коде прослушивателя приложения.

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

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

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

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

Что нового в DevTools

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