Что нового в 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» . В этом аудите перечислены библиотеки JavaScript, обнаруженные Lighthouse на странице. Вы можете найти этот аудит в отчёте в разделе «Рекомендации» > «Пройденные аудиты» .

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

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

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

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

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

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

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

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

Что нового в DevTools

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