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

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

Поддержка отладки 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 .

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

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

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

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

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

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

Разное

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

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

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

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

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

Что нового в DevTools

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

,

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

Поддержка отладки 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 .

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

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

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

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

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

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

Разное

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

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

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

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

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

Что нового в DevTools

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