Google перестраивает Dart DevTools с нуля во Flutter

Флаттер – это среда кроссплатформенного программирования, стремясь решить проблемы разработки кроссплатформенных приложений без путаницы неродного кода. Зная язык программирования Dart, разработчик может создавать приложения для Android, iOS, Интернета и настольных компьютеров с единым пользовательским интерфейсом. Флаттер 1.9 перевел поддержку macOS и Catalina в альфа-состояние, в то время как В выпуске v1.12 их поддержка вышла за пределы пре-альфа-состояния. и v1.17 Flutter и v2.8 Dart ознаменовали свои первые стабильные выпуски в 2020 году. Сегодня Google выпускает новую версию DevTools для кода Dart и Flutter, которая была перестроена с нуля во Flutter и содержит несколько улучшений.

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

Но зачем что-то восстанавливать, если оно еще работает? Команда Flutter утверждает, что повышение производительности важно при создании высокопроизводительных приложений. пользовательских интерфейсов, и лучший способ продемонстрировать доверие к этим утверждениям — использовать те же самые инструменты для сами себя. Пересборка во Flutter также позволяет разработчикам выбрать модель распространения после написания кода, что является отходом от текущей схемы принятия решений, в которой модель распределения будет диктовать код.

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

DevTools включает в себя следующие функции:

• Инспектор флаттера: инструмент для визуализации и исследования деревьев виджетов. Вы можете выбирать виджеты в запущенном приложении, замедлять всю анимацию, просматривать базовые линии текста и многое другое.
  • Одной из новых функций является Layout Explorer, который вы можете найти на вкладке Flutter Inspector рядом с деревом сведений. Layout Explorer позволяет вам проверять гибкую модель макета Flutter. Команда приводит пример того, как этот инструмент может помочь отладить, например, почему ряд виджетов выглядит не так, как ожидал разработчик.

• Просмотр временной шкалы: показывает время сборки для каждого кадра и диаграмму пламени. Это позволяет легко идентифицировать проблемные кадры в контексте.
  • На этой панели теперь есть новая кнопка «Отслеживать сборки виджетов», которая добавляет время сборки всех виджетов в ваше приложение на временную шкалу (за счет производительности сборки вашего профиля, поэтому оно не будет включено по умолчанию). Это удобно, когда вы пытаетесь выяснить, какие именно виджеты находятся за медленным кадром.

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

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

• Сетевой вид: это совершенно новое решение.
  • Как следует из названия, он позволяет проверять сетевой трафик. Вы можете просмотреть всю историю запросов, сделанных вашим приложением с момента запуска, и получить подробную информацию о каждом из них. Это освобождает вас от необходимости самостоятельно регистрировать эти события при попытке отладки сетевой проблемы.
  • На вкладке «Сеть» в настоящее время отображается HTTP-трафик; будущие улучшения включают показ общий трафик ввода-вывода сокетов.
  • Сетевые запросы также отображаются на временной шкале, поэтому вы можете видеть их в контексте.
• Просмотр журнала: показывает события из вашего приложения и платформы. С его помощью вы можете легко фильтровать сообщения (например, вы можете указать «-gc», чтобы отфильтровать события сборщика мусора, или «flutter.frame», чтобы отображать только события кадра). В Dart регистрация сообщений может быть структурирован, и представление «Журналирование» использует это.

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