Освоение Dart & Flutter DevTools — Часть 1: Введение и установка

автор Ашита Прасад (LinkedIn, Twitter), fluttergems.dev

После создания полнофункционального многофункционального приложения Flutter у вас может возникнуть желание создать пакет релиза, загрузить его в магазин приложений или магазин игр и поделиться им со всем миром.

Но, держись, мой друг! Вы забыли важный шаг.

Убедились ли вы, что ваше приложение:

  • Обеспечивает отличный пользовательский опыт?
  • Работает без проблем независимо от устройства?
  • Не будет тормозить или вылетать?
  • Является ли высокая производительность оптимизированной для скорости, использования минимальных ресурсов, низкого использования сетевых данных и т. д.?

Вы можете получить ответ на все эти вопросы, проанализировав различные показатели производительности приложения, которые напрямую влияют на взаимодействие с пользователем.

Похоже, много дополнительной работы, верно?

Нет, это не так!

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

Это первая часть серии подробных статей, которые помогут вам освоить каждый инструмент в наборе DevTools, используя реальные приложения в качестве тематических исследований. Цель этой статьи — представить DevTools и помочь вам активировать и запустить его. Если вы уже настроили DevTools и хотите напрямую изучить конкретный инструмент, просто нажмите соответствующую ссылку ниже:

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

Что такое DevTools и зачем он нам нужен?

DevTools — это набор предварительно упакованных инструментов для мониторинга производительности приложений (APM) и отладки, доступных в Dart & Flutter. Доступ к этим инструментам можно получить через браузер или просмотреть непосредственно в среде IDE.

В настоящее время, когда люди все больше полагаются на приложения для удовлетворения своих повседневных потребностей, успех бизнеса стал прямо пропорционален производительности его приложений. Если приложение имеет медленное время отклика, вылетает или не оптимизировано для практического взаимодействия, это приводит к плохому взаимодействию с пользователем, что может привести к разочарованию пользователей, негативным отзывам, отказу от приложения и потере дохода, помимо ущерба, нанесенного бренду.

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

  • Отслеживайте показатели технической производительности, такие как использование памяти, использование ЦП, FPS, использование сети и т. д., и
  • Отслеживайте взаимодействие с пользователем с помощью показателей воспринимаемой производительности, таких как рывки, скорость загрузки страницы или время отклика, которые напрямую влияют на пользователя приложения.
  • Управляйте и устраняйте неполадки в любом аспекте приложения, который оказывает критическое влияние на вышеупомянутые показатели.

Давайте рассмотрим отдельные инструменты, доступные в DevTools, которые могут помочь вам отслеживать и анализировать некоторые из вышеупомянутых показателей:

  • Flutter Inspector — это визуальный инструмент, полезный для проверки макета пользовательского интерфейса, настройки элементов пользовательского интерфейса, диагностики проблем макета и изучения дерева виджетов приложения Flutter. Подробно ознакомиться с инструментом Flutter Inspector можно в нашей статье — здесь.
  • Инструмент размера приложения. Этот инструмент можно использовать для визуализации и проверки общего размера приложения с помощью отображения иерархической диаграммы. Его также можно использовать для анализа и визуализации любых различий в общем размере двух приложений (старая и обновленная версия). Подробнее об инструменте App Size можно прочитать в нашей подробной статье — здесь.
  • Просмотр сети.Любой трафик HTTP, HTTPS или веб-сокетов из вашего приложения, такой как вызовы REST API, загрузка сетевых образов, ответы json и т. д., можно отслеживать с помощью инструмента Просмотр сети. Вы можете узнать больше об инструменте Network View в нашей подробной статье — здесь.
  • Просмотр ведения журнала. Этот инструмент полезен для мониторинга диагностической информации и журналов, созданных платформой и пользователем во время работы приложения. Хорошей практикой является использование представления журнала вместо просмотра стандартного вывода, поскольку журналы помечены, гораздо лучше организованы и не усекаются, что позволяет проводить детальную проверку. Подробнее об инструменте Logging View читайте в нашей подробной статье — здесь.
  • Представление профиля ЦП. Этот инструмент позволяет нам отслеживать использование ЦП приложением Flutter и исследовать любые проблемы с производительностью, которые могут возникнуть из-за увеличения времени выполнения любого фрагмента кода. Чтобы узнать больше об инструменте CPU Profiler View, ознакомьтесь с нашей подробной статьей — здесь.
  • Просмотр памяти. Этот инструмент помогает визуализировать использование памяти приложением Dart или Flutter и полезен для проверки объектов и обнаружения любых утечек памяти, которые приводят к сбою приложения. Вы можете узнать больше об инструменте Memory View в нашей подробной статье — здесь.
  • Представление производительности. Этот инструмент полезен для сбора и визуализации показателей времени и производительности, таких как частота кадров в секунду (FPS), которые могут помочь нам обнаружить любой рывок пользовательского интерфейса (низкая частота кадров) в приложении Flutter. Чтобы узнать больше об инструменте Performance View, ознакомьтесь с нашей подробной статьей — здесь.
  • Отладчик.В DevTools также предоставляется отладчик на уровне исходного кода, который можно использовать для пошагового выполнения кода с использованием точек останова и проверки значений переменных. Поскольку VS Code имеет встроенный отладчик, этот инструмент виден только в том случае, если приложение запускается через Android Studio или через командную строку.

Доступность DevTools в зависимости от типа приложения

Доступность отдельных инструментов может варьироваться в зависимости от типа приложения, которое мы создаем. Ознакомьтесь с таблицей ниже:

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

The above table only states the availability of these tools in Dart DevTools and does not imply that you cannot optimize and analyze your Flutter Web Apps. Browser tools such as the Chrome DevTools can be used for that purpose that is currently not in scope of this article.

Как запустить DevTools?

Получив общее представление о DevTools, давайте приступим к активации и запуску DevTools в нашей любимой среде IDE:

  1. Android Studio (установщик для Windows, Mac и Linux доступен здесь)
  2. VS Code (Установщик для Windows, Mac и Linux доступен здесь)

1. Активация и запуск DevTools в Android Studio

Хотя Android Studio (на основе IntelliJ IDEA) является официальной интегрированной средой разработки (IDE) для разработки приложений для Android, ее также можно использовать для разработки приложений Flutter с доступом ко всему набору функций и инструментов, таких как DevTools.

Давайте посмотрим, как вы можете установить и запустить DevTools в Android Studio (версия: Dolphin | 2021.3.1):

Шаг 1

Установите Flutter (Инструкции).

Шаг 2

Установите плагин Flutter с торговой площадки.

Шаг 3

Мы можем создать новое приложение Flutter или открыть существующее приложение Flutter в Android Studio. Давайте продолжим и создадим новое приложение Flutter, как показано ниже:

Шаг 4

Следующим шагом является запуск приложения.

панель инструментов Android Studio позволяет выполнять широкий спектр действий, таких как выбор целевого устройства/эмулятора, запуск приложения в различных режимах (Выполнение, Отладка, Профиль) и другие инструменты в контексте разработки приложений Flutter. .

Давайте выберем целевое устройство или эмулятор. В этом случае мы выберем «macOS (настольный компьютер)», поскольку мы хотим создать приложение Flutter Desktop для MacOS.

Теперь мы можем скомпилировать код и запустить его с помощью кнопок — Выполнить, Отладка или Профиль. (Вы можете нажать и прочитать режим об этих режимах)

Нажмите Выполнить, чтобы создать и запустить приложение.

Шаг 5

Следующим шагом будет запуск DevTools.

Панель инструментов (показана ниже) проходит по внешней стороне окна Android Studio IDE и содержит кнопки, позволяющие разворачивать или сворачивать отдельные окна инструментов. По умолчанию наиболее часто используемые окна инструментов закреплены на панели окон инструментов по краям окна приложения. На снимке экрана ниже вы можете увидеть некоторые из наиболее часто используемых инструментов, таких как Flutter Performance и Flutter Inspector, закрепленные справа.

После запуска приложения, как показано в Шаг 4, давайте щелкнем инструмент «Производительность Flutter», как показано ниже в окне инструментов.

Вы можете видеть, что Просмотр производительности был интегрирован в IDE, так что вы можете напрямую исследовать производительность приложения.

Если вы хотите запустить DevTools в автономном браузере, просто нажмите «Открыть DevTools..» в нижней части окна инструмента, как показано ниже.

Вы также можете открыть DevTools в браузере через строку меню.

Tools > Flutter > Open Flutter DevTools

Поздравляем с успешным запуском DevTools в Android Studio. Но есть одна маленькая оговорка, на которую нам нужно обратить внимание. Вы можете получить сообщение об ошибке в верхней части вкладок, отображающих производительность приложения, как показано ниже:

Ошибка была вызвана сборкой и запуском приложения в режиме отладки, что обычно не является хорошим индикатором окончательного поведения сборок в режиме выпуска. Режим отладки включает дорогостоящие проверки, которые не выполняются в сборках профилей или выпусков, а в режиме отладки также выполняется код в режиме JIT по сравнению с режимом AOT в сборках профилей и выпусков.

Таким образом, рекомендуется использовать все инструменты производительности (Производительность, Профилировщик ЦП, Память) с приложениями Flutter, работающими на физическом устройстве Android, iOS или Desktop в режиме профиля. В этом режиме приложение, скомпилированное и запущенное, практически идентично сборке релиза, только с дополнительными функциями, позволяющими устранять проблемы с производительностью.

Поскольку для разработки мы используем рабочий стол macOS (физическое устройство), мы можем запустить это настольное приложение в режиме «профиль» и открыть DevTools. Сообщение об ошибке больше не отображается.

2. Активация и запуск DevTools в VS Code (Visual Studio Code)

Разработчики Flutter, которые предпочитают VS Code Android Studio, могут пройти следующий процесс, чтобы установить и запустить DevTools в VS Code (версия: 1.71.2):

Шаг 1

Установите Flutter (Инструкции).

Шаг 2

Установите расширение Flutter из магазина расширений VS Code.

Шаг 3

Мы можем создать новое приложение Flutter или открыть существующее приложение Flutter в VS Code. Давайте продолжим и создадим новое приложение Flutter, как показано ниже:

View > Command Palette… > Search “flutter” > Flutter: New Project > Application > Choose Directory > Enter Project Name

Шаг 4

Следующим шагом является запуск приложения.

Давайте выберем целевое устройство или эмулятор, щелкнув параметр в строке состояния. В этом случае мы создаем приложение Flutter Desktop для MacOS.

Теперь мы можем скомпилировать код и запустить его, нажав Выполнить, Отладить или Профиль над функцией main():

Нажмите "Выполнить", чтобы собрать и запустить приложение, или запустите процесс сборки, нажав Start Debugging в Runменю.

Шаг 5

Следующим шагом будет запуск DevTools.

После запуска приложения всплывающее диалоговое окно (как показано ниже) предложит вам попробовать Dart DevTools. Просто нажмите кнопку Открыть.

Если это диалоговое окно недоступно, вы можете нажать Dart DevTools в строке состояния VS Code.

Откроется палитра команд. Выберите страницу (инструмент), которую хотите открыть.

Давайте выберем Открыть страницу инспектора виджетов. Он открывает инструмент Widget Inspector, встроенный в IDE VS Code. Теперь мы можем проверить дерево виджетов в VS Code.

Чтобы запустить DevTools в автономном браузере, нажмите команду «Открыть DevTools в веб-браузере».

Мы успешно запустили DevTools в VS Code.

В этой статье мы получили краткий обзор Dart & Flutter DevTools и предприняли необходимые шаги для его настройки и открытия из выбранной нами IDE. Начав полностью с нуля, теперь вы можете легко запустить DevTools и ознакомиться со всеми инструментами, представленными в этом наборе.

Теперь вы готовы отправиться в путешествие по освоению каждого инструмента в наборе DevTools. В оставшихся статьях этой серии мы поможем вам подробнее изучить каждый инструмент и лучше понять его на примере реальных случаев использования. Обратите внимание, что VS Code будет использоваться в качестве IDE для инструкций в остальных статьях этой серии. Вы можете перейти к инструменту, который хотите изучить следующим, нажав на ссылку ниже:

Мы хотели бы услышать ваше мнение об этой серии. Если вы столкнулись с какими-либо проблемами при настройке DevTools или при его запуске через IDE, не стесняйтесь упоминать об этом в комментариях, и мы обязательно рассмотрим это. Кроме того, если у вас есть какие-либо другие предложения, добавьте их в комментарии.

Выражаем особую благодарность Kamal Shree (GDE — Dart & Flutter) за рецензирование этой статьи.