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

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

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

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

Продолжайте читать или смотрите видеоверсию этого документа:

Живые выражения в консоли

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

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

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

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

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

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

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

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

    Сохраненное живое выражение.

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

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

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

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

После ввода document.activeElement в консоли узел подсвечивается в области просмотра.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Интерфейс автозаполнения

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

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

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

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

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

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

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

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

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

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

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

Рисунок 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.

Что нового в DevTools

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