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

Sofia Emelianova

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Утверждения в рекордере

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

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

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

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

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

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

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

Маяк 10.1.1

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

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

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

Улучшения производительности

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

Метод Performance.mark() теперь показывает свое время при наведении курсора на соответствующую отметку в Performance > Timings . Время здесь представляет собой временную метку относительно предыдущего события навигации.

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

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

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

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

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

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

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

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

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

На панели Performance удалены следующие треки:

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

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

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

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

Прекращение поддержки JavaScript Profiler: третий этап

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

DevTools версии 114 запускает третий этап четырехэтапного прекращения поддержки JavaScript Profiler . На этом этапе панель профилировщика JavaScript удаляется из 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» .