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

Кейси Баски

Добро пожаловать! Прошло около 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 из меню команд .

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

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