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

Kayce Basques

Новые функции и основные изменения в Chrome DevTools в Chrome 71 включают:

• Наведите указатель мыши на живое выражение, чтобы выделить узел DOM.
• Сохраняйте узлы DOM как глобальные переменные
• Информация об инициаторе и приоритете теперь доступна в импорте и экспорте HAR
• Доступ к меню команд из главного меню
• Точки останова «картинка в картинке»
• (Дополнительный совет) Запустите monitorEvents() в консоли, чтобы наблюдать за срабатыванием событий элемента.

Продолжайте читать или смотрите видеоверсию этой страницы:

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

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

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

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

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

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

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

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

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

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

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

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

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

Поле _initiator предоставляет более подробную информацию о причине запроса ресурса. Оно соответствует столбцу «Инициатор» в таблице «Запросы».

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

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

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

Поле _priority указывает уровень приоритета, назначенный браузером ресурсу. Он соответствует столбцу «Приоритет» в таблице «Запросы», который по умолчанию скрыт.

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

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

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

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

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

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

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

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

Точки останова «картинка в картинке»

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

Установите флажки enterpictureinpicture , leavepictureinpicture и resize на панели точек останова прослушивателя событий, чтобы приостанавливать выполнение при возникновении одного из этих событий «картинка в картинке». DevTools останавливается на первой строке обработчика.

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

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

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

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

   

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

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

   

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

3. Взаимодействуйте с узлом. DevTools регистрирует все события узла в консоли.

   

   Рисунок 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.

• Отправляйте отзывы и предложения по функциям нам на crbug.com .
• Сообщить о проблеме с DevTools можно с помощью функции more_vert Дополнительные параметры > Справка > Сообщить о проблеме с DevTools в DevTools.
• Напишите твит в @ChromeDevTools .
• Оставляйте комментарии в видеороликах YouTube «Что нового в DevTools» или YouTube «Советы по DevTools» .

Что нового в DevTools

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