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

Кейси Баск
Kayce Basques
X GitHub

В Chrome 72 появятся новые функции и существенные изменения в инструментах разработчика Chrome, в том числе:

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

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

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

Первая значимая работа в разделе «Время»

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

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

При наведении курсора на текстовый узел в дереве DOM инструменты разработчика теперь подсвечивают этот текстовый узел в области просмотра.

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

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

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

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

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

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

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

Инструменты разработчика копируют выражение, подобное приведенному ниже, в буфер обмена:

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.

Что нового в инструментах разработчика

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