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

Что нового в DevTools

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