Что нового в 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 панели Elements .

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

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

   

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

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

Чтобы просмотреть CSS Grid, который влияет на элемент, наведите курсор на элемент в дереве DOM на панели Elements . Вокруг каждого элемента сетки появится пунктирная граница. Это работает только в том случае, если к выбранному элементу или родительскому элементу выбранного элемента применен display:grid .

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

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

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

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

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

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

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

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

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

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

Рисунок 6. Первый оператор выводит на консоль значения one , two , three и four . two скрыто, поскольку в поле Filter введено -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 .
• Оставляйте комментарии к видео «Что нового в DevTools» на YouTube или к видео «Советы по DevTools» на YouTube .

Что нового в DevTools

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