Что нового в 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

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

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

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

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

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

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

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

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

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

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

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

Чтобы добавить утверждение, начните новую запись, взаимодействуйте со своей страницей и нажмите Добавить утверждение . Recorder вставляет шаг с типом 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() теперь показывает свое время при наведении курсора на соответствующую отметку в Performance > Timings . Время здесь — это временная метка относительно предыдущего события навигации.

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

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

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

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

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

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

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

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

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

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

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

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

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

Узнайте больше о 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 ).
• Диалог редактирования Breakpoint теперь имеет кнопку закрытия. Раньше приходилось нажимать Enter или снимать фокус с диалога ( 1412980 ).

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

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

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

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

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

Что нового в DevTools

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