老司機帶你快速上手除錯Flutter專案

對於開發專案來說，除錯控制工具是不可少的，開發者是一定要掌握除錯工具的使用，一來是為了檢視log日誌，一來是為了排查錯誤，再一個原因是可以檢視記憶體佔用情況，以便後續效能優化。

Flutter的除錯主要有3個需要去關注的，一個是Flutter Outline，一個是Flutter Inspector，還有一個是log控制檯。前者主要是用於檢視預覽，後者是用於效能除錯，log控制檯用於檢視log資訊以及定位錯誤等。
下面就詳細的講解一下如何使用Flutter的除錯工具。

一、基礎配置和設定

在講解除錯工具之前，先來看看有關的設定選項，點選選單欄File–>Settings–>Languages & Frameworks –> Flutter，開啟之後設定如圖2.6.1所示，重點欄位我都翻譯成了中文，幫助大家理解，如果不是很熟悉這個設定，推薦大家按照我這樣去配置。

【提示】如果Flutter Outline和Flutter Inspector沒有出現在側邊欄（預設是在右邊側邊欄），建議重啟Android Studio，如果還沒有出現，建議解除安裝Flutter外掛，重新安裝一次，安裝完記得重啟Android Studio。

二、介紹一下log控制檯

控制檯是除錯程式必須要看的一個輔助工具，控制檯有兩個：一個是除錯Android程式的 LogCat除錯臺，另一個是Flutter裡面自帶的Run控制檯。LogCat除錯臺主要是檢視原生Android有關的日誌的，我們這裡就不詳細講解它，我們重點來看了解一下Run控制檯。

Run控制檯在工程建立的時候是沒有的，當我們執行專案的時候，Run控制檯就會出現在底部選單欄，如圖所示：

這裡面有幾個工具，我簡單的描述一下每個工具的作用：

首先我們看左邊第一列的4個工具的作用，如圖所示：

然後再看看第二列的2個工具的作用，如圖所示：

然後再看看橫向的5個工具的作用，如圖所示：

最後看看主體內容的介紹，如圖所示：

三、Dart Analysis

當我們安裝了Dart外掛之後，這個工具就會出現在底部工具欄皮膚裡面。Dart Analysis這個工具從字面意思就可以知道它主要是用來分析Dart語法的。比如語法錯誤或者語法警告等。

比如宣告變數未使用，這個屬於語法警告，如圖中的61行所示：

比如語法錯誤，如圖2.6.2.2所示：

四、Flutter Outline

Flutter Outline主要是用來檢視預覽的。當我們執行專案之後，就會看到Flutter Outline裡面會顯示每一個類，成員變數，方法名，引數等詳細資訊，通過Flutter Outline考驗快速定位到要檢視的相關類或者方法欄位資訊。具體功能如圖2.6.3.1所示：

這裡主要講一下上方並排的7個工具的功能，以及右邊那個漏斗形狀的藍色圖示的作用。

圖示	描述
	新增一個Center元件。
	新增一個Padding元件。
	新增一個Column元件。
	新增一個Row元件。
	用來重構方法。
	將元件向上移動。
	將元件向下移動。
	移除元件。
	點選它，就會只顯示元件，再次點選就顯示完整的程式碼結構。例如上例的fluter_demo中，點選了這個圖示之後，顯示完整的程式碼結構，如下圖所示：

四、Flutter Inspector

。。。待續

五、程式碼中的除錯

。。。待續

---

【好訊息】我的微信公眾號正式開通了，關注一下吧！微信搜尋 Flutter那些事

---

我的部落格即將入駐“雲棲社群”，誠邀技術同仁一同入駐。