Flutter應用如何調試–DevTools介紹(上)
Flutter應用如何調試–DevTools介紹(中)
Flutter應用如何調試–DevTools介紹(下)
接著上篇冀宴，本篇進行一下的介紹
- Performance
- Debugger
- Network
- Logging
Performance
性能視圖可以記錄并分析 Flutter 和 Dart 應用的性能宜雀，以幫助我們找到應用程序的性能瓶頸秋泄。初始進來頁面是空的，單擊 Record 開始進行記錄 CPU 信息尤溜，完成后點擊 Stop 停止記錄晒来，CPU分析器會把收集的信息推送到VM并分別在不同的信息窗口進行展示調用樹 (Call Tree, Bottom Up, and Flame Chart)肛度，這里的采集也分低、中谷饿、高三個類型的粒度惶我，在DevTools介紹(二中)已經(jīng)有介紹。
Flame Chart 火焰圖表
火焰圖選項卡主要用于顯示一段持續(xù)時間內 CPU 的樣本信息博投。圖表展示的是自上而下的調用堆棧信息绸贡，即上面的堆棧幀調用下面的堆棧幀。每一個堆棧幀的寬度代表 CPU 執(zhí)行的時長。棧幀消耗 CPU 的時間越長听怕，就越洽有可能是我們進行性能改進的好地方捧挺。
Call Tree 調用樹(也叫跟蹤樹)
調用樹視圖是一種自上而下展示 CPU 中的調用堆棧信息方法。在下圖中的表格中可以看出尿瞭，展開其中的一個方法可以查看它所有的調用者闽烙。
Bottom Up
ottom Up視圖也是用于顯示方法調用堆棧，但顧名思義声搁，它是一個自下而上的表示方式黑竞。這意味著表格中的每個最上方的方法實際上是給定 CPU 樣本的調用堆棧中的最后一個方法 (換句話說，這是樣本的葉節(jié)點)疏旨。
在DevTools中的Performance中我并沒有看出可以指導代碼進行優(yōu)化的地方很魂，并且devTools的Performance工具運行在Profilr模式下，但是在dubug模式下的Android Stdio右側的Flutter Performance中檐涝，找到了一些可以幫助調試信息遏匆，即Track widget rebuilds，這在Profilr模式下反而不能用骤铃，因為DevTools還是beta版本本拉岁，可能一些功能還不完善。
在這里我們可以看到哪些widget進行了多少次構建惰爬，右邊第二列顯示了所在框架的重載次數(shù)喊暖。如果重載次數(shù)過多，會顯示一個黃色旋轉圓圈撕瞧。最右一列顯示了進入當前頁面后 widget 的重載次數(shù)陵叽。對于未重載的小部件，將顯示一個灰色圓圈丛版，否則將顯示一個灰色旋轉圓圈巩掺。
該工具可以幫助你調試至少四個常見的性能問題：
整個屏幕（或大部分屏幕）由一個 StatefulWidget 構成，導致不必要的 UI 構建页畦∨痔妫可將 UI 拆分成多個具有較輕量 build() 方法的 widget。
未在屏幕上顯示的 widget 發(fā)生了重載豫缨。例如独令，一個延伸到屏幕外的 ListView，或者未給延伸到屏幕外的列表設置 RepaintBoundary好芭，會導致重繪整個列表燃箭。
AnimatedBuilder 的 build() 方法繪制了一個不需要動畫的子樹，導致不必要的靜態(tài)對象重載舍败。
一個 Opacity widget 在 widget tree 中使用了一個不必要的高度招狸，或者通過直接操作 Opacity widget 的透明屬性創(chuàng)建 Opacity 動畫敬拓，導致 widget 和它的子樹重載。
關于性能優(yōu)化部分裙戏，之后會再寫一篇文章專門談Flutter的性能優(yōu)化乘凸。
這里簡單介紹一下，如何找出影響Flutter性能的最大問題挽懦，即saveLayer()的過多調用翰意。調用 saveLayer() 會開辟一片離屏緩沖區(qū)。將內容繪制到離屏緩沖區(qū)可能會觸發(fā)渲染目標切換信柿，這些切換在較早期的 GPU 中特別慢冀偶。
我們可以在MaterialApp中屬性設置
showPerformanceOverlay: true,
// 檢查場景是否使用了 saveLayer，使用了saveLayer的圖像輪廓會隨著頁面刷新而閃爍
checkerboardOffscreenLayers: true,
// 做了緩存的靜態(tài)圖像圖片在刷新頁面使不會改變棋盤格的顏色渔嚷；如果棋盤格顏色變了进鸠，說明被重新緩存，這是我們要避免的
checkerboardRasterCacheImages: true,
Debugger
debug看見名字就能知道是運行在debug模式下形病，這里可以進行斷點調試客年，對于命令行開發(fā)來說是一個便捷的調試工具
除了使用命令行工具開發(fā)以外，還是建議使用IDE進行調試漠吻，功能更強大一些量瓜，這里就不做過多介紹。
值得補充一點的是途乃，在Android studio中绍傲，運行和debug調試是兩種構建方式，如果當前是在Run運行狀態(tài)耍共，不想切換到debug模式烫饼，這時候又想進行調試的話，可以添加如下代碼進行斷點试读，在Devtools中查看杠纵。
import 'dart:developer' as developer;
developer.debugger(when: index == 5);
Network
網(wǎng)絡視圖使您可以從Dart或Flutter應用程序檢查HTTP網(wǎng)絡流量。
可以檢查有關請求的常規(guī)信息钩骇，以及響應和請求標頭比藻，其余作用有限。
Logging
日志視圖展示 Dart 運行時和應用框架（比如 Flutter）的事件倘屹，以及應用級日志银亲。
- 默認情況下，日志視圖會展示：
- Dart 運行時的垃圾回收事件
- Flutter 框架事件唐瀑，比如創(chuàng)建幀的事件
- Flutter framework events, like frame creation events
- 應用的 stdout 和 stderr 輸出
- 應用的自定義日志事件
logging信息經(jīng)過調研，我個人還沒太明白其作用插爹，因為自動輸出的log信息太多哄辣，里面又全是看不太明白的信息
{
"type": "Event",
"kind": "Extension",
"extensionKind": "Flutter.RebuiltWidgets",
"isolate": {
"type": "@Isolate",
"id": "isolates/3650949643688903",
"name": "main",
"number": "3650949643688903"
},
"timestamp": 1596348786926,
"extensionData": {
"startTime": 1248147575,
"events": []
}
}
當然我們可以自定義log请梢，進行輸出，幫助我們排查信息力穗，在官方文檔中以編程的方式調試應用部分有一點介紹毅弧，內容有限。
我們可以直接使用stdout 和 stderr輸出信息
stdout.writeln('test1111');
也可以通過developer方式輸出
import 'dart:convert';
import 'dart:developer' as developer;
void main() {
var myCustomObject = ...;
developer.log(
'log me',
name: 'my.app.category',
error: jsonEncode(myCustomObject),
);
}
對應的logging里面則會記錄
其他
介紹到這里DevTools的使用基本結束当窗，本文主要基于Android Studio工具進行講解够坐，當然也可以通過編程的方式進行，添加輸出代碼的方式調試 Flutter 應用
此外這里有一篇文章介紹devtools是如何工作的崖面，以及Google Flutter團隊的視頻Flutter Inspector (DartConf 2018
來自谷歌開發(fā)者的介紹我們用 Flutter 寫了一套全新的 Flutter 開發(fā)者工具
