Что нового в 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, используя дополнительные параметры. > Справка > Сообщить о проблемах DevTools в DevTools.
• Напишите в Твиттере @ChromeDevTools .
• Оставляйте комментарии к нашим видеороликам «Что нового в DevTools на YouTube » или «Советы по DevTools» на YouTube .

Что нового в DevTools

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

Kayce Basques

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

• Наведите живое выражение, чтобы выделить узел DOM
• Хранить узлы DOM как глобальные переменные
• Информация о инициаторе и приоритете в настоящее время в импорте и экспорте HAR
• Доступ к меню команд из главного меню
• Picture-in-картинки точки останова
• (Бонусный совет) Запустите Monitorevents () в консоли, чтобы посмотреть на огонь событий элемента

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поле _initiator обеспечивает больше контекста о том, что вызвало запрос ресурса. Это отображает в столбце инициатора в таблице запросов.

Рисунок 9 . ��толбец инициатора

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

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

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

Рисунок 11 . Приоритетная столбец

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

Рисунок 12 . Как показать приоритетный столбец

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

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

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

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

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

Picture-in-картинки точки останова

Picture-in-Picture -это новый экспериментальный API, который позволяет странице создавать плавающее видео с окном видео над рабочим столом.

Включите флажки enterpictureinpicture , leavepictureinpicture и resize на панели точек Breaker Supints, чтобы сделать паузу, когда одно из этих событий в картине. Devtools останавливается на первой линии обработчика.

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

(Бонусный совет) Запустите Monitorevents () в консоли, чтобы посмотреть на огонь событий элемента

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

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

   

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

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, используя больше вариантов > Помощь > Сообщить о вопросах DevTools в DevTools.
• Твит на @chromedevtools .
• Оставьте комментарии к нашим новому в Devtools YouTube Videos или Devtools Советы на YouTube .

Что нового в Devtools

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