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

Kayce Basques

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

• Визуализируйте показатели производительности на панели «Производительность».
• Выделите текстовые узлы в дереве DOM.
• Скопируйте путь JS к узлу DOM из дерева DOM.
• Обновления панели «Аудит» , включая новый аудит, который обнаруживает библиотеки JS, и новые ключевые слова для доступа к панели «Аудит» из командного меню.

Видеоверсия этих примечаний к выпуску

Визуализация показателей производительности

После записи загрузки страницы DevTools теперь отмечает в разделе «Тайминги» метрики производительности, такие как DOMContentLoaded и First Meaningful Paint .

Рисунок 1 . Первая значимая краска в разделе «Время»

Выделить текстовые узлы

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

Рисунок 2 . Выделение текстового узла

Скопировать путь JS

Предположим, вы пишете тест автоматизации, который включает в себя щелчок узла (возможно, с использованием функции page.click() Puppeteer), и вы хотите быстро получить ссылку на этот узел DOM. Обычный рабочий процесс — перейти на панель «Элементы», щелкнуть правой кнопкой мыши узел в дереве DOM, выбрать «Копировать» > «Копировать селектор» , а затем передать этот селектор CSS в document.querySelector() . Но если узел находится в теневом DOM, этот подход не работает, поскольку селектор выдает путь из теневого дерева.

Чтобы быстро получить ссылку на узел DOM, щелкните узел DOM правой кнопкой мыши и выберите «Копировать» > «Копировать путь JS» . DevTools копирует в буфер обмена выражение document.querySelector() , указывающее на узел. Как упоминалось выше, это особенно полезно при работе с Shadow DOM, но вы можете использовать его для любого узла DOM.

Рисунок 3 . Скопировать путь JS

DevTools копирует выражение, подобное приведенному ниже, в буфер обмена:

document.querySelector('#demo1').shadowRoot.querySelector('p:nth-child(2)')

Обновления панели аудитов

На панели «Аудит» теперь работает Lighthouse 3.2 . Версия 3.2 включает новый аудит под названием «Обнаруженные библиотеки JavaScript» . В этом аудите перечислены библиотеки JS, обнаруженные Lighthouse на странице. Вы можете найти этот аудит в своем отчете в разделе «Лучшие практики» > «Пройденные аудиты» .

Рисунок 4 . Обнаруженные библиотеки JavaScript

Кроме того, теперь вы можете получить доступ к панели «Аудит» из командного меню, набрав Lighthouse или PWA .

Рисунок 5 . Ввод lighthouse в меню команд.

Загрузите предварительный просмотр каналов

Рассмотрите возможность использования Chrome Canary , Dev или Beta в качестве браузера для разработки по умолчанию. Эти каналы предварительного просмотра дают вам доступ к новейшим функциям DevTools, тестируют передовые API-интерфейсы веб-платформы и находят проблемы на вашем сайте раньше, чем это сделают ваши пользователи!

Связь с командой Chrome DevTools

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

• Отправьте нам предложение или отзыв через crbug.com .
• Сообщите о проблеме DevTools, используя дополнительные параметры. > Справка > Сообщить о проблемах DevTools в DevTools.
• Напишите в Твиттере @ChromeDevTools .
• Оставляйте комментарии к нашим видеороликам «Что нового в DevTools на YouTube » или «Советы по DevTools» на YouTube .

Что нового в DevTools

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