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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Когда я создавал видео «Начало работы с отладкой 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, используя дополнительные параметры. > Справка > Сообщить о проблемах DevTools в DevTools.
• Напишите в Твиттере @ChromeDevTools .
• Оставляйте комментарии к нашим видеороликам «Что нового в DevTools на YouTube» или «Советы по DevTools» на YouTube .

Что нового в DevTools

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