Что нового в 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» .

,

Кейс Баски

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

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

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

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

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

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

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

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

Хранить как глобальная переменная в консоли.

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

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

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

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

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

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

События с картинками на панели Breakpoints Слушатель.

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