在 Flutter 里有幾種調(diào)試方式拧烦。
- 斷點(diǎn)調(diào)試蔓涧。
- debugger 調(diào)試。
- rendering 調(diào)試蝉稳。
- 日志調(diào)試淋纲。
- 運(yùn)行狀態(tài)調(diào)試劳闹。
- 真機(jī)調(diào)試。
斷點(diǎn)調(diào)試
在 Flutter 進(jìn)行斷點(diǎn)調(diào)試非常簡(jiǎn)單帚戳，只需要在 Vscode 上打上一個(gè)斷點(diǎn)玷或，按 F5 就會(huì)停在斷點(diǎn)處。通過(guò)左邊的調(diào)試欄片任，觀察斷點(diǎn)處的變量以及棧堆情況。
debugger調(diào)試
除了打斷點(diǎn)蔬胯，也可以使用 debugger API 的方式对供。
import 'dart:developer';
void someFunction(double offset) {
debugger(when: offset > 30.0, message: 'offset 大于 30 時(shí)，中斷');
// ...
}
這段代碼表明，當(dāng) offset 這個(gè)變量的值大于 30.0 時(shí)中斷運(yùn)行产场，并輸出 message 的內(nèi)容鹅髓。debugger 代碼只會(huì)在開發(fā)階段運(yùn)行。
rendering 調(diào)試
rendering 即開啟布局線京景，當(dāng)打開 rendering 時(shí)窿冯，會(huì)在界面上看到一些布局線，以便于修復(fù)布局效果确徙。
import 'package:flutter/rendering.dart';
void main() {
debugPaintSizeEnabled = !true;
runApp(new MyApp());
}
打開之后看到的效果醒串。
日志調(diào)試
日志調(diào)試，直接使用 print 輸出內(nèi)容即可鄙皇，在 AS芜赌、Vscode 里的控制臺(tái)/調(diào)試控制臺(tái)都可以看到。
為了方便伴逸，定義一個(gè) Debug 類缠沈。
class Debug {
static log(String tag, String text) {
print('[$tag] $text');
}
static info(String tag, String text) {
print('[$tag] $text');
}
static success(String tag, String text) {
print('[$tag] $text');
}
static error(String tag, String text) {
print('[$tag] $text');
}
}
運(yùn)行狀態(tài)調(diào)試
在使用命令：flutter run 時(shí)，會(huì)有一個(gè) Observatory URL 地址提供（一般為：http://127.0.0.1:8108/）错蝴，那就是運(yùn)行狀態(tài)調(diào)試洲愤，打開之后可以看到應(yīng)用的 GC、VM 方面的信息顷锰。注意柬赐，如果使用 F5 啟動(dòng)，則沒(méi)有這個(gè)功能馍惹。
真機(jī)調(diào)試
開啟真機(jī)調(diào)試的步驟：
- 打開 開發(fā)者選項(xiàng) 還有 USB 調(diào)試躺率。
- 使用 USB 將手機(jī)連接電腦，若手機(jī)出現(xiàn)提示万矾，授權(quán)電腦訪問(wèn)手機(jī)悼吱。
- 在命令執(zhí)行 flutter devices 確認(rèn)連接電腦的設(shè)備。
-
然后可通過(guò)執(zhí)行 flutter run 運(yùn)行我們的 app良狈。
在手機(jī)上開啟 USB 調(diào)試模式后添。
image.png
