Flutter應(yīng)用如何調(diào)試–DevTools介紹(上)
Flutter應(yīng)用如何調(diào)試–DevTools介紹(中)
Flutter應(yīng)用如何調(diào)試–DevTools介紹(下)
Dart DevTools主要有7個(gè)工具效扫，其中Flutter inspector與Debugger只能在debug模式下查看，Timeline直砂、Memory菌仁、Performance更傾向于在Profile模式下使用，Network静暂、Logging則無模式要求济丘，下面將對(duì)它們進(jìn)行詳細(xì)介紹，如有疏漏或者錯(cuò)誤洽蛀，歡迎與我聯(lián)系交流摹迷。

• Flutter inspector
• Timeline
• Memory
• Performance
• Debugger
• Network
• Logging

1、Flutter inspector工具

簡(jiǎn)介：inspector是用于可視化和瀏覽Flutter小部件樹的強(qiáng)大工具辱士，用來可視化和瀏覽Flutter widget trees泪掀，以便：

• 了解現(xiàn)有布局

• 診斷布局問題
  Flutter inspector運(yùn)行在debug模式下听绳。

  
  
  inspector.png

除了在網(wǎng)頁(yè)上查看颂碘，F(xiàn)lutter inspector還可以在Android Studio的右側(cè)區(qū)域進(jìn)行插查看

inspector1.png

兩者本質(zhì)上沒有太大區(qū)別，IDE中多了一個(gè)查看Render Tree的入口椅挣，網(wǎng)頁(yè)上則可以對(duì)布局進(jìn)行調(diào)試头岔，并且視圖窗口更大，除此之外沒有太大區(qū)別鼠证。

Select Widget Mode

我們開發(fā)Flutter應(yīng)用峡竣，知道Widget的設(shè)計(jì)理念是組合大于繼承，一層層的Widget嵌套量九，使得排查Flutter widget trees的時(shí)候适掰，也往往受制于嵌套，有了inspector工具可以使得我們一步即可找到widget trees的對(duì)應(yīng)節(jié)點(diǎn)荠列。勾選中途中紅色的第一個(gè)控件Select Widget Mode类浪，我們可以再手機(jī)屏幕上選中想要查看的組件，或者選中widget trees中的節(jié)點(diǎn)肌似，然后就是令人激動(dòng)的功能：手機(jī)屏幕中费就、代碼中、DevTools中川队，相應(yīng)的地方也都會(huì)自動(dòng)同步力细，方便我們定位問題睬澡，在Detail Tree中我們還可以看到選中widget的詳細(xì)屬性。

inspector3.jpeg

inspsctor4.png

inspector2.gif

Slow Animation

當(dāng)我們調(diào)試動(dòng)畫的時(shí)候，會(huì)希望動(dòng)畫慢點(diǎn)播放馋艺，就像iOS模擬器支持的Slow Animation一樣栅干，inspector工具的Slow Animation也支持將動(dòng)畫速度放慢5倍，如過希望自定義的話可以通過編碼的方式捐祠，設(shè)置timeDilation屬性碱鳞，最多支持1到50倍慢放。

其它選項(xiàng)

• Refresh Tree可以刷新當(dāng)前widget信息
• Debug Paint在頁(yè)面上添加一些調(diào)試樣式踱蛀，以顯示邊框窿给，填充，對(duì)齊和間隔率拒，如下圖
• Paint Baselines則會(huì)使每個(gè)RenderBox在其每個(gè)文本基線處繪制一條線崩泡。
• Repaint Rainbow重繪時(shí)在圖層上顯示旋轉(zhuǎn)顏色。
• Debug Banner即使運(yùn)行調(diào)試版本猬膨，也可以切換調(diào)試標(biāo)語(yǔ)的顯示角撞。
  
  inspector5.jpeg

2、Timeline工具

Timeline需要在profile模式下運(yùn)行勃痴，否則不能準(zhǔn)確地統(tǒng)計(jì)APP真是的性能谒所。

timeline.png

首先對(duì)上面四個(gè)按鈕進(jìn)行介紹：
Refesh，滑動(dòng)手機(jī)APP沛申，然后點(diǎn)擊refresh劣领，則會(huì)在下方顯示剛才一段時(shí)間內(nèi)的幀圖（圖中柱狀部分）和火焰圖（圖中中間區(qū)域）。
Profile granularity也叫分析粒度铁材，默認(rèn)樣本室250微妙采樣一次尖淘，即medium，采樣率低中高分別對(duì)應(yīng)抽樣率低著觉、中村生、高粒度分別順序?qū)?yīng) 1/50μs、1/250μs 和 1/1000μs固惯，正確的設(shè)置此粒度對(duì)性能分析非嘲鹪欤總要，高粒度 的配置會(huì)具有更高的采樣率，采集信息更多镇辉，甚至于VM被中斷以收集采集樣本屡穗，導(dǎo)致性能下降。
Performance Overlay即性能圖層忽肛，選中之后會(huì)在APP上顯示兩張圖標(biāo)顯示性能信息

performance-overlay.jpeg

Flutter線程

這里對(duì)Flutter的線程做簡(jiǎn)單說明，F(xiàn)lutter使用多個(gè)線程來完成其工作全封，盡管覆蓋圖中僅顯示了兩個(gè)線程马昙。您所有的Dart代碼都在UI線程上運(yùn)行。盡管您沒有直接訪問任何其他線程的權(quán)限售貌，但是您對(duì)UI線程的操作會(huì)對(duì)其他線程產(chǎn)生性能影響给猾。

• Platform thread 也叫平臺(tái)線程疫萤，plugin的代碼將會(huì)運(yùn)行在這里颂跨，對(duì)應(yīng)Android和iOS的主線程MainThread
• UI thread UI 線程在 Dart VM 中執(zhí)行 Dart 代碼。該線程包括開發(fā)者寫下的代碼和 Flutter 框架根據(jù)應(yīng)用行為生成的代碼扯饶。當(dāng)應(yīng)用創(chuàng)建和展示場(chǎng)景的時(shí)候恒削，UI 線程首先建立一個(gè) 圖層樹(layer tree) ，一個(gè)包含設(shè)備無關(guān)的渲染命令的輕量對(duì)象尾序，并將圖層樹發(fā)送到 GPU 線程來渲染到設(shè)備上钓丰。 不要阻塞這個(gè)線程！ 在性能圖層的最低欄展示該線程每币。
• Raster thread（以前叫 GPU 線程）携丁，中文名字叫光柵線程或者柵格線程，raster 線程拿到 layer tree，并將它交給 GPU（圖形處理單元）梦鉴。你無法直接與 GPU 線程或其數(shù)據(jù)通信李茫，但如果該線程變慢，一定是開發(fā)者 Dart 代碼中的某處導(dǎo)致的肥橙。圖形庫(kù) Skia 在該線程運(yùn)行魄宏，并在性能圖層的最頂欄顯示該線程。這個(gè)線程之前被叫做 “GPU 線程”存筏，因?yàn)樗鼮?GPU 進(jìn)行柵格化宠互，但我們重新將它命名為 “raster 線程”，這是因?yàn)樵S多開發(fā)者錯(cuò)誤的（但是能理解）認(rèn)為該線程運(yùn)行在 GPU 單元椭坚。
• I/O thread執(zhí)行昂貴的操作（常見的有 I/O）以避免阻塞 UI 或者 raster 線程予跌。這個(gè)線程將不會(huì)顯示在 performance overlay 上。

除此之外我們分析Flutter APP的時(shí)候善茎，應(yīng)該在真機(jī)上匕得，并且最好用性能較差的機(jī)型去多次分析。在分析性能的時(shí)候巾表，不應(yīng)只局限于當(dāng)前設(shè)備運(yùn)行流暢汁掠。

• 將幀渲染時(shí)間降低到 16ms 以下可能在視覺上看不出來什么變化，但可以延長(zhǎng)電池壽命以及避免發(fā)熱問題集币。
• 可能在你當(dāng)前測(cè)試設(shè)備上運(yùn)行良好考阱，但請(qǐng)考慮在應(yīng)用所支持的最低端設(shè)備上的情況。
• 當(dāng) 120fps 的設(shè)備普及之后鞠苟，便需要在 8ms 之內(nèi)完成每一幀的渲染來保證流暢平滑的體驗(yàn)乞榨。

好了基本概念介紹完了，我們繼續(xù)介紹Timeline的使用
幀圖中的每一個(gè)豎條都是可以點(diǎn)擊的当娱，點(diǎn)擊周后吃既，下面的火焰圖相應(yīng)的幀也會(huì)隨之選中，在火焰圖中我們可以分析UI線程和Raster線程跨细，可以對(duì)其進(jìn)行單指上下左右滑動(dòng)鹦倚，也可以雙指進(jìn)行放大縮小。
Track Widget Builds冀惭，Timeline中的最后一個(gè)按鈕震叙，這個(gè)按鈕選中的時(shí)候，可以在火焰圖中的UI幀中看到具體是用戶寫的哪一個(gè)widget散休，如果這個(gè)widget占用時(shí)間過多的話媒楼，我們就可以針對(duì)行的進(jìn)行優(yōu)化，如上面的圖中所示KnowlwdgeCellWidget的創(chuàng)建花了4.5ms戚丸，點(diǎn)擊選中它划址，在視圖的地步還會(huì)顯示CPU Flame Chart、Call Tree、Bottom Up這里先不做介紹夺颤，會(huì)在Performance進(jìn)行講述对人。

Memory

內(nèi)存分析可以幫助我們查看在某一時(shí)刻內(nèi)存使用情況，能夠具體到某個(gè)類使用了多少內(nèi)存拂共，主動(dòng)觸發(fā)垃圾回收等牺弄。

memory.png

Snapshot單擊Snapshot按鈕抚恒，會(huì)顯示當(dāng)前內(nèi)存對(duì)象表屈梁〕澹可以按類名稱饵骨，大小悦荒，分配的實(shí)例等對(duì)內(nèi)存對(duì)象進(jìn)行排序。還可以點(diǎn)擊右側(cè)進(jìn)行搜索混萝。
如圖中遗遵，選中了d_stack進(jìn)行分析，右側(cè)是d_stack框架中Flutter側(cè)的逸嘀，DStack類占用的內(nèi)存车要，甚至可以看到內(nèi)存中存儲(chǔ)了哪些數(shù)據(jù)。
我們可以在Search直接搜索想要查看的類崭倘，方便快速查找翼岁。

除了看數(shù)據(jù)列表，我們還可以以堆棧視圖的方式查看內(nèi)存分布司光，當(dāng)我們選中Heat Map開關(guān)的時(shí)候琅坡，下面會(huì)呈現(xiàn)內(nèi)存視圖，下面區(qū)域是上面的總和残家，鼠標(biāo)放在某一個(gè)塊中榆俺，當(dāng)前塊會(huì)展開為更細(xì)粒度的使用情況，如下圖

堆棧1.png

堆棧.png

受限于篇幅谴仙，本篇就介紹到這里，剩下的

• Performance
• Debugger
• Network
• Logging
  留到Flutter應(yīng)用如何調(diào)試--DevTools介紹(下)介紹碾盐。