Эта страница переведена с помощью Cloud Translation API.

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

Sofia Emelianova

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

Чтобы профилировать производительность ЦП, используйте панель «Производительность» .

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

Разное

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

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

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

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

Связь с командой Chrome DevTools

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

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