Что нового во Flutter DevTools 2.6.0

Что нового во flutter devtools 2.6.0 - Примечание к выпуску
Что нового во flutter devtools 2.6.0 - Примечания к выпуску

DevTools — это набор инструментов для повышения производительности и отладки для Dart и Flutter. Последняя версия DevTools, 2.6.0, теперь доступна со стабильной версией Flutter 2.5.

Подробнее о структуре и особенностях инструментов тестирования производительности и отладки DevTools здесь.

flutterapps.ru

Что можно делать с DevTools

Вот некоторые из вещей, которые вы можете делать с помощью DevTools:

  • Изучение макета пользовательского интерфейса и состояния приложения Flutter.
  • Диагностика проблемы с производительностью пользовательского интерфейса в приложении Flutter.
  • Профилирование ЦП (CPU profiling) для приложений Flutter или Dart.
  • Профилирование сети (Network profiling) для приложения Flutter.
  • Отладка приложений Flutter или Dart на уровне исходного кода.
  • Отладка проблем с памятью в приложении командной строки Flutter или Dart.
  • Просмотр общего журнала и диагностической информации о запущенном приложении командной строки Flutter или Dart.
  • Анализ кода и размера приложения.

Рекомендуется использовать DevTools в сочетании с существующей IDE для Flutter и Dart или рабочим процессом разработки на основе командной строки.

Примечание к выпуску Flutter DevTools 2.6.0

Обновления производительности

Одно из обновлений позволяет Flutter лучше связывать события трассировки с конкретными кадрами. Можно увидеть это отражением на диаграмме DevTools Frames, которая была перестроена, чтобы быть «живой».

Фреймы заполняются на этой диаграмме так, как они отображаются в разрабатываемом приложении. При выборе кадра на этой диаграмме происходит переход к событиям временной шкалы для этого кадра:

диаграмма DevTools Frames
Диаграмма DevTools Frames

Движок Flutter теперь также определяет события компиляции шейдеров на временной шкале. Flutter DevTools использует эти события, чтобы помочь диагностировать провалы компиляции шейдеров в вашем приложении.

Проверка компиляции шейдера во Flutter DevTools
Проверка компиляции шейдера во Flutter DevTools

С помощью этой новой функции DevTools определяет, когда вы потеряли кадры из-за компиляции шейдера, чтобы вы могли решить эту проблему. Чтобы запустить приложение, как если бы оно было в первый раз (до того, как ваш шейдерный кеш будет заполнен), используйте flutter runс --purge-persistent-cache.

Вы можете вручную обновить события временной шкалы в диаграмме событий временной шкалы, нажав кнопку «Обновить события временной шкалы» (Refresh timeline events).

Обновление CPU Profiler

Когда разработчик отслеживает проблемы с производительностью процессора в своем приложении, он мог завален данными профилирования (profiling data) из библиотек Dart и Flutter и / или собственного кода движка.

Если вы хотите отключить какой-либо из них, чтобы сосредоточиться на своем собственном коде, вы можете сделать это с помощью новой функции CPU Profiler (# 3236), которая позволяет скрыть информацию профилировщика из любого из этих источников.

новая функция CPU Profiler DevTools
новая функция CPU Profiler DevTools

Для любой из категорий, которые вы не отфильтровываете, они теперь имеют цветовую кодировку (#3310, #3324), чтобы вы могли легко увидеть, какие части диаграммы кадров ЦП из каких частей системы.

Цветная диаграмма для определения активности кода приложения Dart и Flutter
Цветная диаграмма для определения активности кода приложения Dart и Flutter

Обновление Flutter Inspector

В этот выпуск DevTools входит обновление для инспектора виджетов, которое позволяет наводить курсор на виджет для оценки объекта, просмотра свойств, состояния виджета и т.д.

Просмотр свойств в Инспекторе виджетов в Flutter 2.5
Просмотр свойств в Инспекторе виджетов в Flutter 2.5

И когда вы выбираете виджет, он автоматически заполняется в новой консоли инспектора виджетов, где вы можете исследовать свойства виджета.

В дополнение к новым функциям, Инспектор виджетов подвергся существенным преобразованиям:

Обновление Flutter Inspector в Flutter 2.5
Обновление Flutter Inspector в Flutter 2.5
  • Лучшее информирование о том, что делают кнопки переключения отладки — эти кнопки имеют новые значки, ориентированные на задачи метки, а также богатые всплывающие подсказки, которые описывают, что они делают и когда их использовать. Каждая всплывающая подсказка ссылается на подробную документацию по этой функции.
  • Легче сканировать и находить интересующие виджеты — часто используемые виджеты из фреймворка Flutter теперь отображают значки в дереве виджетов в левой части инспектора. Они дополнительно имеют цветовую кодировку в зависимости от их категорий. Например, layout widgets (виджеты макета) отображаются синим цветом, а content widgets (виджеты содержимого) — зеленым. Более того, каждый текстовый виджет (Text widget) теперь показывает предварительный просмотр своего содержимого.
  • Выравнивание цветовой схемы проводника макета и дерева виджетов (the widget tree) — теперь легче идентифицировать один и тот же виджет из проводника макета и дерева виджетов. Например, виджет «Столбец» (Column) на снимке экрана выше находится на синем фоне в проводнике компоновки и имеет синий значок в дереве виджетов.

И эти основные моменты — только начало. Полный список того, что нового появилось в DevTools в этом выпуске Flutter, можно найти в примечаниях к выпуску:

Источник: What’s new in Flutter 2.5, Flutter DevTools 2.6.0 Release Notes

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *