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

Kayce Basques

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

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

• Живые выражения в консоли .
• Выделите узлы DOM во время Eager Evaluation .
• Оптимизация панели производительности .
• Более надежная отладка .
• Включите регулирование сети в командном меню .
• Автозаполнение условных точек останова .
• Разрыв на событиях AudioContext .
• Отладка приложений Node.js с помощью ndb .
• Дополнительный совет: измеряйте взаимодействие пользователей с реальными пользователями с помощью User Timing API .

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

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

Закрепите 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. Эти исправления также устраняют проблему, из-за которой панель «Источники» обычно работала медленно.

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

Теперь вы можете установить регулирование сети на быстрый или медленный 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 .
• Оставляйте комментарии к видеороликам YouTube «Что нового в DevTools» или «Советы разработчика» на YouTube .

Что нового в DevTools

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