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

Kayce Basques

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

• Игнорировать скрипт на панели «Сеть»
• Автоматическая настройка масштабирования в режиме устройства
• Красивая печать на вкладках «Предварительный просмотр» и «Ответ»
• Предварительный просмотр HTML-контента на вкладке «Предварительный просмотр»
• Локальные переопределения со стилями внутри HTML

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

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

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

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

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

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

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

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

Подробнее об игнорировании скриптов читайте в разделе Игнорирование скрипта или шаблона скриптов .

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

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

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

Для просмотра неминифицированной версии ресурса используйте вкладку Response . Вы также можете вручную красиво распечатать ресурсы из вкладки Response с помощью новой кнопки Format .

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

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

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

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

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

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

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

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

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

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

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

Когда я создавал видео Get Started With Debugging JavaScript , некоторые зрители отметили, что контрольные точки прослушивания событий бесполезны для приложений, созданных на основе фреймворков, поскольку прослушиватели событий часто обернуты в код фреймворка. Например, на рисунке 8 я установил контрольную точку click в DevTools. Когда я нажимаю кнопку в демо, DevTools автоматически останавливается на первой строке кода прослушивателя. В этом случае он останавливается в коде оболочки Vue.js на строке 1802, что не так уж и полезно.

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

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

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

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

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

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

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

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

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

• Отправляйте нам отзывы и запросы на новые функции на crbug.com .
• Сообщить о проблеме DevTools можно с помощью функции more_vert Дополнительные параметры > Справка > Сообщить о проблеме DevTools в DevTools.
• Твитните @ChromeDevTools .
• Оставляйте комментарии к видео «Что нового в DevTools» на YouTube или к видео «Советы по DevTools» на YouTube .

Что нового в DevTools

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