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

Кейси Баски

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

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

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

После записи загрузки страницы 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.

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

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

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

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

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

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

Обнаруженные библиотеки JavaScript

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

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

Ввод «маяк» в меню команд.

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

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

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

Свяжитесь с командой Chrome DevTools

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

Что нового в DevTools

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