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

Kayce Basques

С возвращением! Прошло около 12 недель с момента нашего последнего обновления, которое было посвящено Chrome 68. Мы пропустили Chrome 69, потому что у нас не было достаточно новых функций или изменений в пользовательском интерфейсе, чтобы оправдать публикацию.

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

• Выражения в реальном времени в консоли .
• Выделение узлов DOM во время предварительной оценки .
• Оптимизация производительности панели .
• More reliable debugging .
• Включите ограничение скорости сети через командное меню .
• Условные точки останова автозаполнения .
• Прерывание работы при событиях AudioContext .
• Отладка приложений Node.js с помощью ndb .
• Дополнительный совет: измеряйте реальное взаимодействие пользователей с помощью API User Timing .

Читайте дальше или посмотрите видеоверсию этого документа:

Выражения в реальном времени в консоли

Закрепите выражение Live Expression в верхней части консоли, если хотите отслеживать его значение в режиме реального времени.

1. Нажмите «Создать живое выражение». Открывается интерфейс Live Expression.

   

   Рисунок 1. Пользовательский интерфейс Live Expression.

2. Введите выражение, которое вы хотите отслеживать.

   

   Рисунок 2. Ввод Date.now() в пользовательский интерфейс Live Expression.

3. Чтобы сохранить выражение, щелкните за пределами интерфейса Live Expression.

   

   Рисунок 3. Сохраненное живое выражение.

Значения в режиме реального времени обновляются каждые 250 миллисекунд.

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

Введите в консоли выражение, результатом которого является узел DOM, и функция «Немедленное выполнение» теперь выделит этот узел в области просмотра.

Рисунок 4. Поскольку текущее выражение возвращает значение узла, этот узел выделен в области просмотра.

Вот несколько выражений, которые могут вам пригодиться:

• document.activeElement для подсветки узла, который в данный момент находится в фокусе.
• document.querySelector(s) используется для выделения произвольного узла, где s — это CSS-селектор. Это эквивалентно наведению курсора на узел в DOM-дереве .
• $0 за выделение текущего выбранного узла в DOM-дереве.
• $0.parentElement используется для выделения родительского элемента текущего выбранного узла.

Оптимизация производительности панели

При анализе больших страниц панель «Производительность» ранее обрабатывала и визуализировала данные в течение десятков секунд. Также иногда требовалось несколько секунд для загрузки информации о событии на вкладке «Сводка». В Chrome 70 обработка и визуализация данных происходят быстрее.

Рисунок 5. Данные о производительности обработки и загрузки.

Более надежная отладка

В Chrome 70 исправлены некоторые ошибки, из-за которых точки останова исчезали или не срабатывали.

Также исправлены ошибки, связанные с картами исходного кода. Некоторые пользователи TypeScript указывали DevTools игнорировать определенный файл TypeScript при пошаговом выполнении кода, в результате чего DevTools игнорировали весь встроенный файл JavaScript. Эти исправления также устраняют проблему, из-за которой панель «Источники» в целом работала медленно.

Включите ограничение скорости сети через командное меню.

Теперь вы можете установить ограничение скорости сети на быстрый или медленный режим 3G через меню команд .

Рисунок 6. Команды регулирования сетевого трафика в меню команд.

Условные точки останова автозаполнения

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

Рисунок 7. Интерфейс автозаполнения.

А вы знали? Автозаполнение интерфейса стало возможным благодаря CodeMirror , который также используется в консоли.

Прерывание обработки событий AudioContext

Используйте панель « Точки останова обработчика событий» , чтобы приостановить выполнение на первой строке обработчика событий жизненного цикла AudioContext .

AudioContext является частью Web Audio API, который можно использовать для обработки и синтеза звука.

Рисунок 8. События AudioContext на панели «Точки останова прослушивателя событий».

Отладка приложений Node.js с помощью ndb

ndb — это новый отладчик для приложений Node.js. Помимо стандартных функций отладки, доступных в DevTools , ndb также предлагает:

• Выявление дочерних процессов и прикрепление к ним.
• Необходимо устанавливать точки останова перед модулями.
• Редактирование файлов в пользовательском интерфейсе DevTools.
• По умолчанию игнорируются все скрипты, находящиеся за пределами текущего рабочего каталога.

Рисунок 9. Пользовательский интерфейс ndb.

Для получения более подробной информации ознакомьтесь с файлом README библиотеки ndb .

Дополнительный совет: измеряйте реальное взаимодействие пользователей с помощью API User Timing.

Хотите измерить, сколько времени требуется реальным пользователям для завершения важных этапов на ваших страницах? Рассмотрите возможность использования API User Timing для мониторинга времени выполнения операций.

Например, предположим, вы хотите измерить, сколько времени пользователь проводит на вашей главной странице, прежде чем нажать кнопку призыва к действию (CTA). Сначала вы отметите начало этого пути в обработчике событий, связанном с событием загрузки страницы, например, DOMContentLoaded :

document.addEventListener('DOMContentLoaded>9;, () = {
  window.performance.mark('start');
});

Затем вы отмечаете конечную точку маршрута и рассчитываете его продолжительность в момент нажатия кнопки:

document.querySelector('#CTA').addEventListener('>click', () = {
  window.performance.mark('end');
  window.performance.measure(';CTA', 'start', 'end');
});

Вы также можете извлекать результаты измерений, что упрощает их отправку в вашу аналитическую службу для сбора анонимных агрегированных данных:

const CTA = window.performance.getEntriesByName('CTA')[0].duration;

DevTools автоматически добавляет пометки к измерениям пользовательского времени в разделе «Пользовательское время» ваших записей производительности.

Рисунок 10. Раздел «Время, отведенное пользователем».

Это также пригодится при отладке или оптимизации кода. Например, если вы хотите оптимизировать определенный этап жизненного цикла, вызовите window.performance.mark() в начале и в конце функции жизненного цикла. React делает это в режиме разработки.

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

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

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

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

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

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

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