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

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

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

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

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

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

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

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

Номер выпуска Chromium: 1414289 .

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

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

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

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

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

Номер выпуска Chromium: 1418938 .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Маяк 10.1.1

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

Группированные проверки по организациям.

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

Номер выпуска Chromium: 772558 .

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

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

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

Всплывающее окно с информацией о времени появляется при наведении курсора в разделе «Время».

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

Команда profile() заполняет раздел «Производительность > Главная».

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

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

Выпуск Chromium: 1429191 .

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

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

Предупреждение INP.

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

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

Показатель Web Vitals переместился.

В панели «Производительность» удалены следующие треки:

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

До и после переноса данных Web Vitals на дорожку «Время».

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

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

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

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

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

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

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

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

Различные важные моменты

В этом релизе внесены следующие существенные исправления:

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

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

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

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

Что нового в инструментах разработчика

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