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

Kayce Basques

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

• Поддержка операторов await верхнего уровня в консоли .
• Снимки экрана части области просмотра и снимки отдельных узлов HTML .
• CSS Grid-подсветка .
• Новый консольный 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) . Возвращает все обещания.
• 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» .