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

Sofia Emelianova

Jecelyn Yeen

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

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

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

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

Чтобы протестировать отладку 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() в консоли теперь запускают и останавливают профилирование ЦП в основном потоке панели «Производительность» .

Проблема с хромом: 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, но её по-прежнему можно временно включить через Настройки > Эксперименты и откройте его из трехточечное меню.

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

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

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

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

• Палитра цветов теперь обнаруживает значения HWB, которые выходят за пределы цветового охвата при обрезке ( 1429271 ).
• Панель «Источники» :
  • Включена подсветка синтаксиса JSON для исходных карт ( 1385374 ).
  • Перестали появляться сообщения «Обнаружена исходная карта» при ручном отключении исходных карт ( 1423718 ).
• Консоль теперь позволяет оценивать неполные выражения JavaScript с помощью Ctrl + Enter и выводит синтаксические ошибки ( 1314700 ).
• В диалоговом окне редактирования точки останова теперь есть кнопка закрытия. Раньше для этого приходилось нажимать Enter или снимать фокус с диалогового окна ( 1412980 ).

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

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

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

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

• Отправляйте отзывы и предложения по функциям нам на crbug.com .
• Сообщить о проблеме с DevTools можно с помощью функции more_vert Дополнительные параметры > Справка > Сообщить о проблеме с DevTools в DevTools.
• Напишите твит в @ChromeDevTools .
• Оставляйте комментарии в видеороликах YouTube «Что нового в DevTools» или YouTube «Советы по DevTools» .

Что нового в DevTools

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