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

Софья Емельянова
Sofia Emelianova
GitHub
Джеселин Йен

Поддержка отладки WebAssembly

DevTools позволяет Настройки. Настройки > Эксперименты > Флажок. Отладка WebAssembly: включите поддержку DWARF по умолчанию. Подробнее см. в разделе «Отладка WebAssembly с помощью современных инструментов» .

Этот эксперимент позволяет приостанавливать выполнение и отлаживать код C и C++ в приложениях Wasm, при этом вам становится доступна вся отладочная информация:

  • Ваш оригинальный исходный код, сопоставленный с использованием отладочной информации DWARF .
  • Понятные имена функций в стеке вызовов.
  • Поддержка точек останова и многое другое.

Приложение Wasm приостановлено в отладчике.

Чтобы протестировать отладку Wasm, установите расширение C/C++ DevTools Support (DWARF) и выполните пошагово код в демонстрации Mandelbrot .

Проблема с хромом: 1414289 .

Улучшенное поведение шагов в приложениях Wasm

Перешагни. Шаг за шагом в исходном коде теперь позволяет избежать остановки при дизассемблировании (файле .wasm ). Раньше это приводило к остановке.

Однако пошаговое выполнение заканчивается, когда оно оказывается за пределами функции, в которой оно началось, например, после возврата из функции.

Это поведение включено по умолчанию в Настройки. Настройки > Настройки > Источники .

Новая настройка находится в разделе «Настройки», затем «Источники».

Проблема с хромом: 1418938 .

Отладка автозаполнения с помощью панели «Элементы» и вкладки «Проблемы»

Функция автозаполнения Chrome автоматически заполняет формы сохранённой информацией, например, вашими адресами или платёжными данными. Для лёгкого устранения проблем, связанных с автозаполнением, панель «Элементы» теперь может подчёркивать их красными фигурными линиями.

Чтобы проверить эту функцию, включите Настройки. Настройки > Эксперименты > Флажок. Выделяет нарушающий узел или атрибут в дереве DOM панели «Элементы» и проверяет эту демонстрационную страницу .

Проблемы автозаполнения, выявленные на панели «Элементы» и сообщенные панелью «Проблемы».

Наведите указатель мыши на выделенную проблему в дереве DOM и нажмите «Просмотреть проблему» , чтобы открыть вкладку «Проблемы» , в которой перечислены все обнаруженные проблемы и даны подсказки о том, что пошло не так.

Проблема с хромом: 1399414 .

Утверждения в регистраторе

Панель «Регистратор» теперь позволяет добавлять утверждения прямо во время записи, при этом вам доступны все данные времени выполнения.

Чтобы добавить утверждение, начните новую запись, взаимодействуйте со страницей и нажмите «Добавить утверждение» . Регистратор добавит шаг с типом waitForElement , который можно настраивать в процессе. Посмотрите видео, чтобы увидеть применение утверждений на примере демо-версии кофейной тележки .

В этом видео показано, как утверждать:

  • Атрибуты HTML, например, class элемента.
  • Свойства JavaScript в JSON, например, .innerText .

Вы также можете настроить шаги для проверки, например, условных операторов в JavaScript, количества дочерних узлов ( count ), видимости элементов и т. д. Подробнее см. в разделе «Настройка шагов» .

Кроме того, Recorder теперь запоминает предпочитаемый вами формат скрипта в параллельном представлении кода и в пошаговом меню, появляющемся при щелчке правой кнопкой мыши.

Проблема с хромом: 1423624 .

Маяк 10.1.1

Панель Lighthouse теперь использует версию Lighthouse 10.1.1, в которую вошло заметное изменение, появившееся в версии 10.1.0 . Все аудиты, связанные с URL-адресами, теперь сгруппированы по сущностям и содержат агрегированную числовую статистику, такую ​​как размер или продолжительность. Популярные сторонние ресурсы также отмечены своей категорией, что упрощает определение их назначения на странице.

Сгруппированные аудиты по субъектам.

Чтобы изучить основы использования панели Lighthouse в DevTools, ознакомьтесь с разделом Lighthouse: Оптимизация скорости сайта .

Проблема с хромом: 772558 .

Повышение производительности

performance.mark() показывает время при наведении курсора в разделе «Производительность» > «Время»

Метод performance.mark() теперь отображает время выполнения при наведении курсора на соответствующую метку в разделе «Производительность» > «Хронометраж» . Здесь время определяется относительно предыдущего события навигации.

Всплывающее окно с указанием времени при наведении курсора в разделе «Тайминги».

Проблема с хромом: 1426762 .

Команда profile() заполняет Performance > Main

Команды profile() и profileEnd() в консоли теперь запускают и останавливают профилирование ЦП в основном потоке панели «Производительность» .

Команда console() создает профиль на панели «Производительность».

Проблема с хромом: 1429191 .

Предупреждение о медленном взаимодействии с пользователем

При взаимодействии пользователя с пользователем, длящемся более 200 миллисекунд, на вкладке «Производительность» > «Сводка» выводится предупреждение «Взаимодействие до следующей отрисовки» (INP) .

Предупреждение ИНП.

Кроме того, идентификатор взаимодействия был перенесен из подсказки в Сводку .

Проблемы с Chromium: 1432512 , 1432509 .

Трек Web Vitals перемещен

Панель «Performance» удалила следующие треки:

  • Отслеживание показателей Web Vitals . Вместо этого смотрите соответствующие временные интервалы на отслеживании «Временные интервалы» при наведении курсора.
  • Подтрек « Долгие задачи» . Такие задачи уже можно найти на основном треке, они отмечены красным цветом и красным треугольником .

Как показатели Web Vitals , так и показатели длинных задач содержали дублированную информацию. Кроме того, они были неинтерактивными по сравнению с более полнофункциональными альтернативами, которые предоставляют более подробную информацию при нажатии.

До и после перемещения показателей веб-показателей на дорожку времени.

Кроме того, трек «Впечатления» был переименован в «Смены макета» для более точного отражения его использования.

Узнайте больше о Web Vitals .

Устаревание JavaScript Profiler: этап третий

Еще в Chrome 58 команда DevTools планировала в конечном итоге прекратить поддержку JavaScript Profiler и предоставить разработчикам Node.js и Deno возможность использовать панель Performance для профилирования производительности процессора JavaScript.

Версия DevTools 114 начинает третью фазу четырёхэтапного прекращения поддержки JavaScript Profiler . На этом этапе панель JavaScript Profiler удаляется из DevTools, но её по-прежнему можно временно включить через Настройки. Настройки > Эксперименты и откройте его из Меню из трех точек. трехточечное меню.

Флажок «Профилировщик JavaScript» в разделе «Настройки», затем «Эксперименты».

Для профилирования производительности ЦП используйте панель «Производительность» .

Проблема с хромом: 1428026 .

Разные моменты

Вот некоторые важные исправления в этом выпуске:

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

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

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

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

Что нового в DevTools

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