[Flutter新手村]—除錯通關攻略

TracyJ發表於2020-04-05
Flutter除錯

[Flutter新手村]—除錯通關攻略

當年陳刀仔用20塊贏到3700萬，我盧本偉用20萬贏到500萬不是問題。

陳刀仔的勵志故事歷歷在目，我們從flutter的戰場新兵到超凡入聖也不是問題哈~今天我談談除錯需要注意的事項。

除錯

Hot Reload 熱重置

熱過載是指：在不中斷App正常執行的情況下，動態注入修改後的程式碼片段，及時的把修改呈現在螢幕上。
這個技術在很多前端技術裡都有，android上有intantRun，避免每次小的改動都要重新編譯，具體怎麼用呢？

[Flutter新手村]—除錯通關攻略
IntelliJIdea中的按鈕是個閃電標誌哦，把滑鼠放上去會有“Flutter Hot Reload”提示，當亮起的時候意味著可以使用的。 成功後在底部 Console/Run裡面會看到如下類似提示

Performing hot reload...
Reloaded 1 of 448 libraries in 2,777ms.
複製程式碼

為什麼不能使用Hot Reload

非debug模式是不能使用hotReload的，工程預設是debug模式，debug模式下會執行設定的斷言，
執行可能會不太流暢，但不影響實際效能。
複製程式碼

Hot Reload成功了但我的改動沒有生效？

Hot Reload並非所有改動都會生效，是由於其編譯原理決定的。簡單的說，Hot Reload只是把改動前後做了一下對比差分，
形成了增量操作，並不會全部重新編譯。說人話就是：flutter佈局相關的改變可以使用Hot Reload，其它的改變很多都無效。
複製程式碼

重啟app，之前HotReload的變化都丟失了

Hot Reload因為沒有執行全部的編譯，重啟app就丟失了，需要重新執行編譯
複製程式碼

模擬器/真機除錯忽然報錯

IOS報錯

[Flutter新手村]—除錯通關攻略
亦或如下：

Launching lib/main.dart on iPhone 11 Pro Max in debug mode...
Running Xcode build...
Xcode build done.                                           15.7s
Failed to build iOS app
Error output from Xcode build:
↳
    ** BUILD FAILED **
複製程式碼

只要是你確信自己的程式碼沒啥問題，那一定是ios搞錯了。

  • 方法一： Terminal，進入到flutter工程目錄，執行 xattr -rc . 注意命令後面的空格點哦
cd myapp
xattr -rc .
複製程式碼
  • 方法二（推薦）： Terminal,進入flutter工程目錄，萬能的clean
cd myapp
flutter clean
複製程式碼

原理就是flutter編譯產物混亂了，clean一下，重新生成編譯產物。

Android報錯

找不到資源

android專案的clean方法：

  • 方法一： Terminal，進入到android工程目錄，執行 ./gradlew clean
cd myapp
cd android
./gralew clean
複製程式碼
  • 方法二（推薦）： Terminal,進入flutter工程目錄，萬能的clean
cd myapp
flutter clean
複製程式碼

原理就是flutter編譯產物混亂了，clean一下，重新生成編譯產物。

總結一下，如果flutter程式編譯沒問題，兩個平臺報錯，通常是熱更新導致的問題，最好的辦法就是先執行flutter clean , 重新編譯。如果還有問題，再具體問題分析解決。

IOS真機除錯

IOS 13.3真機除錯flutter白屏

ios 13.3真機除錯都有問題，不是flutter的問題。把手機系統升級到13.4就好了。

XCode不支援這個ios版本，建議更新XCode

XCode安裝包巨大，而且更新效能不穩定，想要適應新的ios版本真機,下載ios版本相容包就行啦： github.com/filsv/iPhon…

執行flutter命令卡住，重啟ide無效

pubspec.yaml檔案 pub get不下來卡住，其它flutter命令提示

Waiting for another flutter command to release the startup lock...
複製程式碼

簡而言之：flutter執行一條命令的時候會加一個檔案鎖，執行第二條命令的時候如果獲取不到這個鎖，就會報這個錯。 解決辦法就是手動"解鎖": 開啟flutter的安裝目錄,找到這個檔案lockfile

 /路徑/flutter/bin/cache/lockfile 
複製程式碼

把這個檔案刪了就行了，下次執行flutter指令還會自動建立的，不影響使用。

斷點

Flutter支援斷點除錯

[Flutter新手村]—除錯通關攻略

點這個有Flutter圖示的按鈕，“Flutter Attach”, 就可以給當前flutter app新增上斷點監聽，斷點使用方式和android/ios執行斷點一致。

Flutter斷點經常使用者莫名失效，如果遇到了嘗試重啟app，重新新增斷點

Assert斷言

斷言可以幫助我們在debug模式判斷傳參、執行環境是否符合要求，而正是環境不會編譯進去，原始碼大量使用了斷言。

後記

兵馬未動，糧草先行。

以上我講了一些自己除錯遇到的問題，Flutter中文網除錯Flutter應用關於如何除錯flutter應用講得更加系統，希望大家有時間一定要好好看一下。

如何除錯搞清楚了，下一章準備聊聊dart，歡迎關注點贊~

相關文章