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

Кейси Баски
Kayce Basques

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

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

Консоль теперь поддерживает операторы 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 .

Выделение CSS-сетки

Рисунок 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 отображает сообщение.

Пример фильтрации URL-адресов

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

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

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

Импорт файла HAR

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

Доступные для предварительного просмотра ресурсы кэша на панели «Приложение».

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

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

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

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

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

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

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

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

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

Пример вкладки «Покрытие» в Chrome 61

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

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

Пример вкладки «Покрытие» в Chrome 62

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

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

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

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

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

Что нового в DevTools

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