Flutter調試技巧總結——高效開發的祕密

剛開始學前端的時候看到你們都是用的console.log()做爲調試的手段，也能夠說，不少人只會用console.log()。在學習Flutter開發app的時候，我就在思考，除了使用print()來調試，Flutter還提供了哪些更爲高效的調試方法呢？

很是不幸的是，我在開發本身的第一款Flutter App時，就幾乎將全部可能遇到的錯誤類型都踩到了，這也讓我意識到我須要對這部分知識作出總結，擴充本身的武器庫，提高本身的開發效率。

爲何要總結調試技巧

• 大部分開發人員調試的時候，都只懂得使用打印。這種方法雖然使用方便，可是隻會這種方法不能在複雜的代碼中高效debug，效率低下，容易打擊開發人員的信心。
• 工欲善其事，必先利其器。掌握強大的調試工具，是提升開發效率，提高開發體驗，促進正向循環的關鍵保證。
• 可以養成良好的開發習慣，促進咱們深刻思考bug出現的緣由，而不是讓debug流於表面。

都有哪些調試技巧

我將本身遇到的錯誤類型歸 語法和代碼錯誤 、 運行時錯誤 和 邏輯錯誤 三大類，同時還從官方文檔總結了 界面調試 的技巧，分享給你們。

1、語法和代碼錯誤 [入門]

語法和代碼錯誤是一種比較低級的錯誤，指的是在編寫代碼過程當中，IDE就已經顯示出來的警告或者錯誤信息。若是咱們不修復它，在保存代碼的以後，IDE就不會編譯代碼並推送到設備上。

解決辦法很簡單，就是經過閱讀紅線上的錯誤信息，而後分析本身的代碼哪裏出錯了。在Flutter的開發過程當中，有以下幾種典型錯誤，能夠說是新手必犯，若是你跟我同樣，把這些錯誤類型都踩了個遍，那麼說明你還處於入門階段。

1. 缺乏引用

   

   在Flutter中，因爲一切皆爲widget的理念，幾乎每寫一個 .dart文件都涉及到了widget，而若是涉及到widget都必須引入material.dart或者cupertino.dart這些導出了widgets.dart的文件。不要覺得在main.dart中有了import 'package:flutter/material.dart';，其它.dart文件就不須要了。
2. 錯字
3. 符號錯誤

   

   在Dart中，必須以分號做爲語句結束的標識，分號是不能省略的。瞭解更多關於Dart的語法知識，能夠參考官方文檔。

2、運行時錯誤 [重點]

運行時錯誤是指，編寫代碼過程當中不會出現，可是當App運行時，就會將錯誤信息打印在App中（例如黃色警告條、紅屏）以及控制檯裏。這些錯誤信息會告訴你哪裏出現了錯誤，以及出錯後該如何修復。

修復運行時錯誤的一大難點就是，不懂得如何閱讀錯誤日誌。我根據本身遇到的運行時錯誤，劃分了兩大類，並總結了相應的排查方法。

1. 有出錯堆棧的

   

   對於這種有出錯堆棧信息的，只須要找到錯誤緣由和定位到錯誤代碼，便可快速解決問題。
2. 有指導內容的

   

   對於這種有官方指導內容的，須要細心閱讀其說明，才能解決問題。以圖中的提示爲例，Flutter發現咱們的widget太大了以至於超過了渲染區域，官方建議咱們使用flex因子來強制約束子數組們的大小，又或者是改用ListView組件。（學好英語很重要！）

3、邏輯錯誤 [難點]

邏輯錯誤是指，在App運行過程當中，App沒有出現上述的任何運行時錯誤或者崩潰，可是App上的運行結果並不符合咱們的預期。

這類錯誤一般難以定位，最多見的解決辦法就是，找到相應業務的代碼，檢查方法的調用、數值的計算或者是參數的傳遞是否有問題。若是沒法經過這種簡單的方法排查問題，那麼就要開始使用Flutter的調試工具了。

以個人真實案例舉例：

addResult(result) {
    // 我沒有意識到須要調用this.setState()才能更新數據到界面
    results.add(result);
  }
複製代碼

1. print函數

個人初步判斷是，addResult函數沒有被調用，可是當我添加了print函數以後，打臉了

addResult(result) {
    results.add(result);
    print(results);
    // 打印結果顯示，addResult函數被調用了，並且results數組也新增長了成員
  }
複製代碼

print函數可以將任何對象打印到調試控制檯中，在Flutter框架裏，大部分的類都實現了toString函數（如例子裏的List對象），能夠很方便快速地排查這些小問題。

2. 斷點調試

不少人不經常使用斷點調試，是由於他們以爲使用起來很麻煩。實際上在VS Code中，Flutter的斷點調試開啓只須要兩步：

啓動斷點調試以後，在VS Code頂部就會懸浮一個工具條，該工具條的各個按鈕用法以下：

在斷點調試的過程當中，能夠經過鼠標指針，實時查看指定的對象的值

還能夠在左側的調試面板中，查看所有的變量信息和調用堆棧信息

斷點調試的最大好處在於，能夠幫助你一步一步地跟蹤調用過程，在每一步中觀察對象的值的變化， 找到值變化與預期不符合的那一步，便可排查問題。即便是很複雜的代碼結構和很繁瑣的調用步驟，也能 下降理解代碼的難度。

4、界面調試

在Flutter框架中，有一個頗有用的界面調試工具，那就是Debug Painting，便可以給界面繪製佈局邊界。

在VS Code中，開啓該繪製功能十分簡單，只須要在Flutter App調試的過程當中，打開命令面板（cmd+shift+p），輸入Flutter Toggle Debug Painting

能夠看到還有許多能夠開啓的功能，我認爲對於界面調試而言，最重要的功能仍是Debug Painting，它能夠很 清晰的展現出每一個元素的佈局邊界，迅速幫開發者找出佈局出問題的地方，仍是拿我本身開發計算器App的過程來舉個例子：

如圖所示，當我把App的總體功能開發完畢以後，它在iPhone XS Max模擬器上顯示的很是完美，可是在Android 720p的機型上顯示卻十分糟糕。我經過開啓Debug Painting，找出了部分按鈕的字體沒有居中的緣由——在Android 720p機型上，字體的高度比想象中的要大，致使其沒法很好地居中在父佈局裏。

總結

內容不少，最後總結一下，本文根據我以前開發計算器App的過程當中，踩到的坑，總結出了 三種錯誤類型 和 一種界面調試方法。

• 錯誤類型：語法和代碼錯誤（三種典型例子）、運行時錯誤（兩種排查方法）和 邏輯錯誤（兩種調試方法）。
• 界面調試：利用好Flutter的界面調試工具Debug Painting。

學習過程當中，不斷髮現本身的不足，就能找到提高本身的空間；常常總結，昇華方法論，就能不斷提高本身。