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

Kayce Basques

Новые функции и изменения в DevTools в Chrome 62:

• Поддержка операторов await верхнего уровня в консоли .
• Скриншоты части области просмотра и скриншоты определенных узлов HTML .
• Подсветка CSS-сетки .
• Новый консольный API для запроса объектов .
• Негативные фильтры и URL-фильтры в консоли .
• Импорт HAR на панели «Сеть» .
• Ресурсы кэша с возможностью предварительного просмотра .
• Более предсказуемая отладка кэша .
• Покрытие кода на уровне блоков .

Операторы верхнего уровня ждут в консоли

Консоль теперь поддерживает операторы await верхнего уровня.

Рисунок 1. Использование операторов await верхнего уровня в консоли

Новые рабочие процессы создания снимков экрана

Теперь вы можете сделать снимок экрана части области просмотра или определенного узла HTML.

Скриншоты части области просмотра

Чтобы сделать снимок части области просмотра:

1. Нажмите «Проверить». или нажмите Command + Shift + C (Mac) или Control + Shift + C (Windows, Linux), чтобы войти в режим проверки элементов.
2. Удерживайте клавишу Command (Mac) или Control (Windows, Linux) и выберите часть области просмотра, снимок экрана которой вы хотите сделать.
3. Отпустите кнопку мыши. DevTools загрузит снимок экрана выбранной вами части.

Рисунок 2. Создание снимка экрана части области просмотра.

Скриншоты определенных узлов HTML

Чтобы сделать снимок экрана определенного узла HTML:

1. Выберите элемент на панели «Элементы» .

   

   Рисунок 3. В этом примере нужно сделать снимок экрана синего заголовка, содержащего текст Tools . Обратите внимание, что этот узел уже выбран в дереве DOM на панели «Элементы» .

2. Откройте меню команд .

3. Начните вводить node и выберите Capture node screenshot . DevTools загрузит снимок экрана выбранного узла.

   

   Рисунок 4. Результат выполнения команды Capture node screenshot

Подсветка CSS-сетки

Чтобы просмотреть CSS-сетку, влияющую на элемент, наведите указатель мыши на элемент в дереве DOM на панели «Элементы» . Вокруг каждого элемента сетки появится пунктирная рамка. Это работает только в том случае, если к выбранному элементу или его родительскому элементу применено свойство display:grid .

Рисунок 5. Выделение CSS-сетки

Посмотрите видео ниже, чтобы изучить основы CSS Grid менее чем за 2 минуты.

Новый API для запросов к объектам кучи

Вызовите queryObjects(Constructor) из консоли , чтобы вернуть массив объектов, созданных указанным конструктором. Например:

• queryObjects(Promise) . Возвращает все Promise.
• queryObjects(HTMLElement) . Возвращает все элементы HTML.
• queryObjects(foo) , где foo — имя функции. Возвращает все объекты, созданные с помощью new foo() .

Областью действия queryObjects() является текущий выбранный контекст выполнения в консоли . См. раздел Выбор контекста выполнения .

Новые консольные фильтры

Консоль теперь поддерживает отрицательные и URL-фильтры.

Отрицательные фильтры

Введите -<text> в поле Фильтр , чтобы отфильтровать все сообщения консоли , содержащие <text> .

Рисунок 6. Первый оператор выводит на консоль значения one , two , three и four . Значение two скрыто, поскольку в поле фильтра указано -two .

DevTools отфильтровывает сообщение, если найден <text> :

• В тексте сообщения.
• В имени файла, из которого пришло сообщение.
• В тексте трассировки стека.

Отрицательный фильтр также работает с регулярными выражениями, такими как -/[4-5]*ms/ .

URL-фильтры

Введите url:<text> в поле Фильтр , чтобы отображать только сообщения, отправленные из скрипта, URL-адрес которого содержит <text> .

Фильтр использует нечёткое соответствие. Если <text> встречается где-либо в URL, DevTools выводит сообщение.

Рисунок 7. Использование фильтрации URL-адресов для отображения только сообщений, отправленных из скриптов, URL-адрес которых содержит hymn . Наведя курсор на имя скрипта, можно увидеть, что имя хоста содержит этот текст.

Импорт HAR на панели «Сеть»

Перетащите файл HAR на панель «Сеть» , чтобы импортировать его.

Рисунок 8. Импорт HAR-файла

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

Щелкните строку в таблице хранилища кэша , чтобы увидеть предварительный просмотр этого ресурса под таблицей.

Рисунок 9. Предварительный просмотр кэшированного ресурса

Более отзывчивая отладка кэша

В Chrome 61 и более ранних версиях отладка кэшей, созданных с помощью Cache API, ... сложна. Например, когда страница создаёт новый кэш, приходится вручную обновлять страницу или DevTools, чтобы увидеть новый кэш.

В Chrome 62 вкладка «Хранилище кэша» теперь обновляется в режиме реального времени при создании, обновлении или удалении кэша или ресурса. Посмотрите видео ниже с примером.

Посмотрите демонстрацию Cache Storage, чтобы попробовать ее самостоятельно.

Покрытие кода на уровне блоков

В Chrome 61 и более ранних версиях вкладка «Покрытие» отмечает весь код внутри функции как используемый, пока функция вызывается.

Рисунок 10. Пример вкладки «Покрытие» в Chrome 61. Строка 4 отмечена как используемая, хотя она никогда не выполняется.

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

Рисунок 11. Пример вкладки «Покрытие» в Chrome 62. Строка 4 отмечена как неиспользуемая.

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

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

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

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

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

Что нового в DevTools

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