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

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

В Chrome 62 в инструментах разработчика появятся новые функции и изменения:

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

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

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

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

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

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

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

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

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

Создание скриншота части области просмотра

Рисунок 2. Скриншот части области просмотра.

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

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

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

    Пример узла

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

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

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

    Результат выполнения команды «Сделать снимок экрана узла».

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

Подсветка CSS Grid

Чтобы увидеть 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-адресам и по URL-адресам.

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

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

Пример 3 сообщений, которые будут отфильтрованы.

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

В инструментах разработчика сообщение отфильтровывается, если найдено значение <text> :

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

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

URL-фильтры

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

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

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

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

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

Для импорта перетащите HAR-файл в панель «Сеть» .

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

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

Просматриваемые ресурсы кэша в панели приложения.

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

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

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

Более оперативная отладка кэша

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

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

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

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

В 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.

Что нового в инструментах разработчика

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