Что нового в 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. Обычный рабочий процесс заключается в переходе на панель Elements, щелчке правой кнопкой мыши по узлу в дереве DOM, выборе Copy > Copy selector , а затем передаче этого селектора CSS в document.querySelector() . Но если узел находится в Shadow 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 можно с помощью функции more_vert Дополнительные параметры > Справка > Сообщить о проблеме DevTools в DevTools.
• Твитните @ChromeDevTools .
• Оставляйте комментарии к видео «Что нового в DevTools» на YouTube или к видео «Советы по DevTools» на YouTube .

Что нового в DevTools

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