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

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

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

Читайте дальше или посмотрите видеоверсию этой страницы:

Наведите курсор на Live Expression, чтобы выделить узел DOM.

Когда выражение Live Expression возвращает результат в виде узла DOM, наведите курсор на результат Live Expression, чтобы выделить этот узел в области просмотра.

Наведите курсор на результат выполнения выражения в реальном времени, чтобы выделить узел в области просмотра.

Рисунок 1. Наведение курсора на результат Live Expression позволяет выделить узел в области просмотра.

Сохраняйте узлы DOM в качестве глобальных переменных.

Чтобы сохранить DOM-узел в качестве глобальной переменной, выполните в консоли выражение, результатом которого является узел, щелкните правой кнопкой мыши по результату и выберите пункт «Сохранить как глобальную переменную» .

Сохраните как глобальную переменную в консоли.

Рисунок 2. Сохранить как глобальную переменную в консоли.

Или щелкните правой кнопкой мыши по узлу в DOM-дереве и выберите «Сохранить как глобальную переменную» .

Сохраните как глобальную переменную в DOM-дереве.

Рисунок 3. Сохранение в качестве глобальной переменной в дереве DOM.

Информация об инициаторе и приоритете теперь доступна в импорте и экспорте HAR.

Если вы хотите диагностировать сетевые журналы вместе с коллегами, вы можете экспортировать сетевые запросы в файл HAR .

Экспорт сетевых запросов в HAR-файл.

Рисунок 8. Экспорт сетевых запросов в файл HAR.

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

При экспорте HAR-файла DevTools теперь включает информацию об инициаторе и приоритете в сам HAR-файл. При импорте HAR-файлов обратно в DevTools столбцы «Инициатор» и «Приоритет» теперь заполняются автоматически.

Поле _initiator предоставляет дополнительную информацию о причинах запроса ресурса. Оно соответствует столбцу Initiator в таблице Requests.

Столбец инициатора.

Рисунок 9. Инициирующая колонка

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

Просмотр инициаторов и зависимостей.

Рисунок 10. Отображение инициаторов и зависимостей.

Поле _priority указывает, какой уровень приоритета браузер присвоил ресурсу. Это соответствует столбцу Priority в таблице Requests, который по умолчанию скрыт.

Столбец «Приоритет».

Рисунок 11. Столбец «Приоритет».

Щелкните правой кнопкой мыши заголовок таблицы «Запросы» и выберите «Приоритет» , чтобы отобразить столбец «Приоритет» .

Как отобразить столбец «Приоритет».

Рисунок 12. Как отобразить столбец «Приоритет» .

Доступ к меню команд осуществляется из главного меню.

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

Меню команд.

Рисунок 13. Меню команд.

Теперь вы можете открыть меню команд из главного меню. Щелкните « Главное меню» . основной Нажмите кнопку и выберите «Выполнить команду» .

Открытие командного меню из главного меню.

Рисунок 14. Открытие командного меню из главного меню.

Точки переключения «Картинка в картинке»

Функция «картинка в картинке» — это новый экспериментальный API, позволяющий странице создавать плавающее видеоокно поверх рабочего стола.

Включите флажки enterpictureinpicture , leavepictureinpicture и resize на панели «Точки останова обработчика событий», чтобы приостанавливать выполнение при срабатывании одного из этих событий «картинка в картинке». Инструменты разработчика приостанавливают выполнение на первой строке обработчика.

События «картинка в картинке» отображаются на панели «Точки останова обработчика событий».

Рисунок 16. События «картинка в картинке» на панели «Точки останова обработчика событий».

(Дополнительный совет) Запустите monitorEvents() в консоли, чтобы отслеживать события элемента.

Предположим, вы хотите добавить красную рамку вокруг кнопки после того, как она будет сфокусирована и нажата клавиши R , E , D , но вы не знаете, к каким событиям добавить обработчики. Используйте monitorEvents() для вывода всех событий элемента в консоль.

  1. Получите ссылку на узел.

    Используйте функцию «Сохранить как глобальную переменную», чтобы получить ссылку на узел.

    Рисунок 17. Использование переменной Store в качестве глобальной переменной для получения ссылки на узел.

  2. Передайте узел в качестве первого аргумента функции monitorEvents() .

    Передача узла в функцию monitorEvents().

    Рисунок 18. Передача узла в функцию monitorEvents()

  3. Взаимодействуйте с узлом. Инструменты разработчика записывают все события узла в консоль.

    События узла отображаются в консоли.

    Рисунок 19. События узла в консоли.

Вызовите функцию unmonitorEvents() , чтобы прекратить запись событий в консоль.

unmonitorEvents(temp1);

Если вы хотите отслеживать только определенные события или типы событий, передайте массив в качестве второго аргумента функции monitorEvents() :

monitorEvents(temp1, ['mouse', 'focus']);

Тип mouse указывает DevTools регистрировать все события, связанные с мышью, такие как mousedown и click . Поддерживаются также другие типы: key , touch и control .

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

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

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

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

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

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

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