предисловие
представить вамDevToolsНа это есть несколько основных причин 🚀 :
- прежде всего
DevToolsсам по себеFlutterОфициально рекомендуемый инструмент отладки. -
DevToolsиспользуетсяFlutterНаписано, очень своеобразно 🖼 . - Он имеет очень полную функцию отладки, которая может удовлетворить потребности в оптимизации разных размеров и аспектов ⚙️.
DevTools
Прежде всего, большое знакомство с сегодняшним главным героем: DevTools 👏
Введение на официальном сайте:
DevTools is a suite of performance and debugging tools for Dart and Flutter. It’s currently in beta release, but is under active development.переводить:
DevToolsдаDartа такжеFlutterНабор инструментов производительности и отладки. В настоящее время он находится в стадии бета-тестирования, но находится в активной разработке.
установить 🔌
нужно использоватьDevToolsПрежде всего, предпосылка всего, должна быть, чтобы установить его,yes, этот, казалось бы, простой шаг на самом деле занял у меня довольно много времени. Я надеюсь, что у вас будет гладкая установка, я познакомлю вас с четырьмя видами открытыхDevTools的方法.
Android Studio / Intellij
Друзья, которые используют два вышеуказанных средства разработки, смотрите сюда 🙋♂️, открывайте на такие средства разработкиDevToolsЕсть три шага
- Установить
FlutterПлагин:
Сначала убедитесь, что вы установили инструменты разработкиFlutterПлагин (его еще никто не устанавливал, нет 👀 )
- Начать отладку приложения 🔩
Да, буквально, проект проекта, который позволяет отлаживать (рекомендуется использоватьProfileмодель). дружеское напоминание:ProfileРежим может работать только на реальном устройстве 📱.
- оказаться
DevToolsВход
фактическиDevToolsВход не очень бросается в глаза, но найти его все равно легко, на панели инструментов внизу мы часто используемhot reloadСбоку просто нажмите кнопку 🔘, чтобы начать проектDevTools.
(P.S. Сам пользуюсьAndroid Studio, но у меня так не получалось, так было всегдаInstalling DevTools..., если знаете причину, подскажите пожалуйста в комментариях, Али Гадо 🤗 )
VS Code
- Установить
FlutterПлагин:
Сначала убедитесь, что вы установили инструменты разработкиFlutter,Dartплагин (такой же, какAndroid Studio)
-
в
VS CodeОткройте корневой каталог вашего проекта (содержащийpubspec.yaml) и нажмитеRun > Debugging(F5), чтобы начать сеанс отладки. -
Запустить программу развития
- Когда сеанс отладки активен и приложение открыто 🏃🏻 , затем
VS CodeПанель команд покажетDart: Open DevTools
- При первом запуске (и при обновлении SDK в будущем) вам будет предложено активировать или обновить
DevTools.
Командная строка
- Установить инструменты разработчика
Если в вашей переменной окруженияPATHимеютpub, бежать 🚀:
pub global activate devtools
Если переменная окруженияPATHимеютflutter, бежать 🚀:
flutter pub global activate devtools
- Запустите службу инструментов разработчика
Далее запускаем локальныйweb serverсервис для запуска инструментов разработчика. Запустите одну из двух команд ниже.
pub global run devtools # If you have `pub` on your path.
flutter pub global run devtools # If you have `flutter` on your path.
После запуска этих двух строк кода в командной строке должен появиться такой вывод:
An Observatory debugger and profiler on iPhone X is available
at: http://127.0.0.1:50976/Swm0bjIe0ks=/
atпозадиDevToolsадрес, вы можете использовать его напрямуюChromeПросто откройте его. Открывшаяся веб-страница требует заполнить ссылку, то есть проект, который нужно отлаживатьDebug serviceАдрес прослушивания, откуда взялся этот адрес 🤔 ?
3. НачнитеappПриходитьdebug
Фактически, указанный выше адрес ссылки 🔗 — это место, где мы обычно запускаем проект.Logсередина. Каждый запускает проект, вы можете найти его в первых нескольких строках лога.Debug serviceадрес, как показано на рисункеlistening onВ следующей части заполните ссылку на веб-странице, которую мы открыли на втором этапе, и вы сможете войти в соответствующий проект нашего проекта.DevToolsсреди.
Насильственно открыть
Вышеупомянутые три являютсяFlutterСпособы установки и открытия, представленные на официальном сайте, к сожалению, у меня не открывались успешно 🤯 , либо устанавливались постоянно, либо открывалась очень старая версияDevTools, он должен быть с моимDart SDKКонфигурация пути связана, поэтому после моих исследований я нашел очень удачный метод открытия 🤫 (в настоящее время я не знаю, каковы недостатки).
- оказаться
FlutterАдрес папки.
Это зависит от человека к человеку, вы должны знать о своем компьютереflutterпуть, например, я положил его в моем личномdevelopmentПод содержанием:
/Users/tys/development/flutter
- оказаться
DevTools
Это ключ к жестокому открытию, о котором я говорю здесь 🔑 , я нашел..., этоDevTools, кажется, тихо разместилиFlutterсередина.
/Users/tys/development/flutter/.pub-cache/bin/devtools
В указанном выше каталоге вы можете найти его напрямую, дважды щелкнуть, чтобы открыть его, и перейти прямо к хорошему парню 💡
Wuhu ~ Перейти непосредственно к последнему шагу, открытому с помощью командной строки выше. И это то, что вы сейчас используетеFlutterПоследняя доступная версия, соответствующая версииDevTools!
Использование DevTools 🕵🏻♂️‘
Я буду представлять каждую функцию одну за другой в порядке панели инструментов в верхней части DevTools 🤓.
Flutter inspector
- Введение:Функция этой части в основном является интерфейсным модулем для вас.Во-первых, он будет отображать ваше общее дерево чертежа макета🌲.Нажав на каждый узел дерева, вы увидите более подробную информацию о макете с правой стороны🐳, и в то же время , на информации о макете Вы можете увидеть информацию о визуальном представлении и выполнить некоторые простые операции выбора.Эта часть функции имеет две основные цели в официальных словах:
1. Разобраться с существующим макетом.
2. Диагностика проблем макета.
Давайте рассмотрим содержимое этого модуля в порядке, отмеченном красным на рисунке ниже 🔍
Select widget mode
На самом деле это вид выбора, это видят всеTabСоответствующее на самом деле все ваше дерево рисования 🌲, и структурная сложность такого дерева обычно связана со сложностью вашей страницы. Если это сложная структура страницы, дерево будет очень большим и будет выглядеть размытым. Чтобы мы могли лучше видеть подробную структуру в дереве, мы можем щелкнуть узел на дереве, чтобы просмотреть его в области , Подробности о части дерева 🔮 .
Detail Tree
Как следует из названия, здесь представлена подробная информация о только что выбранном узле.На самом деле фактическая информация может натолкнуть на размышления ❤️. Посмотрите на картинку, я выбрал одинContainerузел ,ContainerВам будут предложены следующие неназначенные свойства, такие какbgцвет фона и т.д. Если на вашей странице есть цвета, цветные оверлеи и т. д., через них это будет хорошо видно 🔬 .
Layout Explorer
Это удивительно, это браузер макета вашего текущего выбранного узла. Например, как видите, я выбрал этоContainerПодробная структура пакета показана ниже, включая каждыйWigetГраницы даже показывают рассчитанную высоту и ширину 📏 (в соответствии со стандартным размером разрешения).
Layout ExplorerНе только позволяет просматривать весь интерфейс макета, но и позволяет выполнять некоторые простые динамические операции, позволяя уточнить проблемы или дефекты макета без изменения кода (пожалуйста, смотрите анимацию ⬇️ ).
Slow Animations
При нажатии на эту кнопкуAppВсе анимационные эффекты в пределах скорости, почувствуйте0.5Волшебный мир двойной скорости 🤩 , сказано тутAnimationsВключая, но не ограничиваясь вашим переходом на интерфейс,HeroНапример, анимация системного уровня, лично я считаю, что эта часть функции имеет две основные функции.
1. Если ваша анимация не имеет задержек в этом режиме, это означает, что ваша анимация идеальна и может улучшить взаимодействие с пользователем 👍 .
2. Разрешить некоторым аниматорам видеть свои анимационные кривые и траектории 🕳 .
Debug Paint
Добавлены визуальные подсказки по отладке при рендеринге, чтобы показать границы, отступы, выравнивание и интервалы. Отобразит общий макет на вашем эмуляторе, включая общее направление рендеринга и базовые классы компонентов.
Paint Baselines
Заставляет каждый RenderBox рисовать линию на каждой из его базовых линий текста. Это зеленая линия на картинке ниже ⬇️
Repaint Rainbow
Включите эту функцию, когда ваш интерфейс будет перерисован, он изменит цвет границы в перерисованной части 🎆. Например, у вас естьbanner,интервал1sСмени картинку, потом каждую секунду своюbannerЦвет вокруг графика изменится на случайный цвет. Лично цель состоит в том, чтобы позволить нам увидеть часть текущей страницы, которая рисуется или перерисовывается.
Хронология 🌟
Пожалуйста, используйте фактическое устройство для отладки при выполнении отладки производительности. Skia имеет два очень разных бэкэнда: Flutter использует чисто процессорный бэкэнд в симуляторе iOS, а аппаратный ускоренный бэкенд на GPU обычно используется в реальных устройствах, поэтому характеристики производительности сильно различаются.
TimeLineдаDevToolsБолее практичная и содержательная часть. позволяет реально увидетьAPPсуществующийUIпроблема илиGPUвопрос. Далее я возьму вас, чтобы научиться анализировать себяFlutter APPисполнение рисунка 🩺 .
Сначала вы можете увидеть, что верхняя часть на картинке выше — это столбчатая диаграмма 📊. Эта часть является схемой состояния операции, которую вы только что сделали.По легенде справа вы также можете понять смысл.Вот я поясню это для вас.
Пользовательский интерфейс, Растр, Джанк
Посмотрите на гистограмму, есть красный и синий, а светло-синийUIРисунок ветки, темно-синий это ваша ветка растеризации(GPUнить). Красный означает, что ваш рисунок застрял. Как правило, мыFlutterЗдесь мы определяем Caton: если время рендеринга кадра превышает16ms, будет считаться, что этот кадр задержан, чтобы добиться частоты рендеринга кадров на60 FPS(кадров в секунду), время рендеринга на кадр должно быть меньше или равно16 ms. Если эта цель не будет достигнута, вы обнаружитеUIНе плавные и не выпадающие кадры 📌 .
Timeline Event
Что мы можем видеть в средней части всего интерфейсаTimeline Event, что на самом деле соответствует деталям карты ситуации, которую мы нарисовали выше, и является событием в процессе рисования. Мы можем использовать его, чтобы увидеть причины нашего отставания в деталях. Давайте выберем один из застрявших кадров и внимательно его проанализируем 🧮 .
Как вы можете видеть на картинке нижеTimeline Event, по-прежнему делится на две части, верхняя частьUI Event, нижняя частьRaster Event. В этот период времени мы отчетливо ощущаем, что нашаUI EventЭто заняло очень много времени ⏰ . чтобы каждый могTimeLine EventЗначение имеет лучшее понимание, здесь настоящим включено посредством ссылки:
Вкладка графика пламени используется для отображения выбранных событий кадра,
CPUобразец информации. На графике показана информация о стеке вызовов сверху вниз, то есть кадр стека выше вызывает кадр стека ниже. Ширина каждого кадра стека представляетCPUпродолжительность исполнения. потребление кадров стекаCPUЧем он длиннее, тем больше вероятность, что мы сможем улучшить производительность.
Мы можем видеть верхний в информации о стеке вышеEventВызовVsyncProgressCallback, на изображении ниже мы видим внизу, что этот стек занимает до40.6ms, почти недопустимо 🚽 . На самом деле, после того, как мы щелкнем по гладкому кадру, мы обнаружим, что там также будетVsyncProgressCallback. Так почему же этот кадр необычайно длинный и вызывает заикание?
Итак, чтобы глубже понять, почему, нам нужно копать дальше, нам нужно больше информации.
- Более подробный график пламени 🔥 (
CPU Flame Chart)
Здесь находится подробная информация, которая вам нужна, в том числе ситуация, требующая много времени для конкретного внутреннего стека. ЗачемVsyncProgressCallbackтак долго. Какие подробности внутренних операций, тут понятно 🐮 . Здесь мы видим, что долгое времяVsyncProgressCallbackпо сравнению с коротким временемVsyncProgressCallbackЕще несколько частей. ясноVsyncProgressCallbackПосле получения информации о внутреннем стеке мы можем целенаправленно проанализировать внутренний трудоемкий стек. переключиться на наш второйTab.
Связанный
FlutterсерединаVsyncСнимок рекомендуется чтение:Механизм рендеринга Flutter — поток пользовательского интерфейса🔗 .
- дерево вызовов
Эта часть ближе нашим разработчикам, мы можем посмотреть в деталяхVsyncProgressCallbackКакие функции вызываются конкретно, а какие занимают много времени. Давайте снова объединим приведенную выше картинку.Здесь находится работа, которую мы делаем больше в рамках Caton, или функция, которую мы вызываем больше.performRebuild, нажмите на конкретный вызов функции, мы можем обнаружить, что эта функция была вызвана в цикле. Это прямо здесьperformRebuildПо сути, это процесс обхода вашего дерева рисования 🌲, что означает, что вы обновили огромное дерево рисования в текущем кадре, а также перерисовали несколько дочерних узлов в дереве. Так что мы должны проверить, в какой части интерфейса мы вызываем перерисовку нескольких компонентов, или в какой части интерфейса.view_mode, который управляет таким процессом перерисовки, нет ли ненужных перерисовок. Это улучшает производительность рендеринга 😆.
В приведенном выше разделе объясняется нашаUIЧасть причин блокировки потока и методы устранения неполадок, если этоGPUШерстяная ткань? Точно так же мы выбираем кадр, типичный дляGPUТрудоемкая операция, в этой информации стека мы можем увидеть нашуGPUМетод действительно занимает много времени ⏳, опять жеGPURasterizer::DrawПочему определенный кадр такой длинный?
на самом делеDevToolsизRasterВ виде эта часть не может быть отображена очень четко. Но есть и другой способ понять, почему. Вы можете заполнить перед открытием напрямуюDevToolsссылка на. если тыprofileрежим, вашlogВы можете найти эту ссылку в 🔗.
Нажмите на эту ссылку, в средней части этой страницы мы можем найтиtimelineИнструменты (на схеме я отметил их красными прямоугольниками).
перейти в этот разделtimelineПосле этого вот самая подробная информация о каждом кадре 📌 . Вы можете выбрать область с помощью мыши, и конкретные вызовы функций выбранной области будут выводиться ниже. Включая имя функции, общее время, количество вызовов каждый раз и отношение визуальной гистограммы 📊. С одного взгляда. СвязанныйGPUНекоторые вызовы функций требуют каждогоFlutter EngineИсходный код имеет относительно высокое понимание, чтобы решить проблему целенаправленно. Связанный стек вызовов очень сложен.
Официальное заявление займет много времениskiaвызов функции:
saveLayer: очень много времени, каждый вызов должен перераспределять буфер рисования в ЦП и сообщатьGPUПереключите цель рисования. Особенно на старых устройствах.clipPath: требует много времени, каждый вызов будет влиять на каждую последующую команду рисования.Когда команда рисования сложная, она будет выполнять несколько иclipPathоперация пересечения, положить вclipPathДругая часть удаляется.
Можно сказать, что эта часть функции почти не используется в программировании 🤯 , но на самом деле они широко распространены в нашем общемWidgetи его свойства. Хорошая новостьFlutter TeamВ прошлых итерациях обновлений было устранено множество ненужных трудоемких операций, подобных описанным выше 🐳 . Так что, когда каждый в своемtimelineПосле обнаружения подобных трудоемких операций вWidgetГораздо проще, чем раньше, анализировать и находить источник исходного кода компонента.
На приведенной выше диаграмме ситуации с вызовом функции короткая длительная операция не означает, что она вряд ли вызовет зависание. Скорее всего, вы нашли
saveLayerвызов, но не так много времени, как ожидалось. На самом деле, потому что: серверная часть GPU Skia получаетsaveLayerПосле команды будет выполнена простая предварительная обработка, и она сразу же вернется, что создаст иллюзию того, что она не занимает много времени. Но фактический последующий асинхронный процесс также вызоветSkCanvas::Flushвызывают много времени. Целью асинхронной обработки здесь является упаковка нескольких предварительно обработанных сообщений 📦 и отправка их вGPUрисовать.
заключительные замечания
оFlutterПроизводительность отрисовки интерфейса во введении представлена здесь. Надеюсь, эта статья может вам в какой-то степени помочь 🤪, я продолжу представлять ее позже.FlutterДля связанного управления памятью и других связанных знаний, следите за обновлениями 🧸 .
Ссылаться на:DevTools