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

Кейс Баскс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поле _initiator предоставляет больше контекста вокруг того, что вызвало запрос ресурса. Это соответствует столбцу Initiator в таблице Requests.

Инициаторская колонка.

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

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

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

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

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

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

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

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

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

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

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

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

Меню команд.

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

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

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

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

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

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

Включите флажки enterpictureinpicture , leavepictureinpicture и resize на панели Event Listener Breakpoints для приостановки при возникновении одного из этих событий «картинка в картинке». DevTools приостанавливается на первой строке обработчика.

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

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

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

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

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

    Использование «Сохранить как глобальную переменную» для получения ссылки на узел.

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

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

    Передача узла в 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.

Что нового в DevTools

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