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

Kayce Basques

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

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

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

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

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

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

Храните узлы DOM как глобальные переменные.

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

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

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

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

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

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

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

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

При экспорте файла HAR DevTools теперь включает в файл HAR информацию об инициаторе и приоритете. Когда вы импортируете файлы 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» .