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

Кейси Баски

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если вы хотите диагностировать сетевые журналы вместе с коллегами, вы можете экспортировать сетевые запросы в файл 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() .

    Передача узла в MonitorEvents().

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

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

    События узла в Console.

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