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

Kayce Basques

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

Новые функции и основные изменения в DevTools в Chrome 70 включают в себя:

• Живые выражения в консоли .
• Выделение узлов DOM во время Eager Evaluation .
• Оптимизация панели производительности .
• Более надежная отладка .
• Включите регулирование сети из меню команд .
• Автозаполнение условных точек останова .
• Прерывание событий 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. Сохраненное живое выражение

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

Выделение узлов DOM во время Eager Evaluation

Введите выражение, которое вычисляется как узел DOM в консоли, и Eager Evaluation теперь выделяет этот узел в области просмотра.

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

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

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

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

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

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

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

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

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

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

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

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

Автозаполнение условных точек останова

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

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

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

Перерыв на событиях AudioContext

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

AudioContext является частью 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', () => {
  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 .
• Сообщить о проблеме DevTools можно с помощью функции more_vert Дополнительные параметры > Справка > Сообщить о проблеме DevTools в DevTools.
• Твитните @ChromeDevTools .
• Оставляйте комментарии к видео «Что нового в DevTools» на YouTube или к видео «Советы по DevTools» на YouTube .

Что нового в DevTools

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