VUE程序調試的方法

目錄

• VUE程序調試的方法
• 1.寫本文的背景
• 2.調試與測試
• 3.Console調試法
  • 3.1 添加console.log指令
  • 3.2 調出溫度界面以下
  • 3.3 Google瀏覽器的Console窗口
  • 3.4 console.error輸出
  • 3.5 瀏覽器輸出
• 4.alert 調試法
  • 4.1 alert方法代碼
  • 4.2 alert提示效果
• 5 斷點調試法
  • 5.1 設置斷點
  • 5.2 運行代碼
  • 5.3 輸入關心的屬性
    • 5.3.1 Watch中觀察數據
    • 5.3.2 Console中觀察數據
  • 5.4 輸入想要執行的方法
    • 5.4.1 寫一個調試方法output()
    • 5.4.2 設置斷點並運行程序
    • 5.4.3 執行方法運行程序

VUE程序調試的方法

1.寫本文的背景

由於程序的調試很是重要，程序猿能夠利用好的調試方法去查找定位本身的問題所在之處。從而，達到糾正本身程序錯誤的地方，健壯本身的程序，讓問題變得愈來愈少，程序變得愈來愈健康。故做此文，並且往後會將實用的調試程序方法不斷進行迭代更新。

2.調試與測試

調式與測試實際有殊途同歸之妙，只不過對象不一樣。測試面向的是產品級，系統級；而調試每每是程序裏的某一部分，某個方法，某個屬性或者對象。最終效果也很相似，好的測試人員，測試方案能夠將產品系統的問題解決在搖籃中；好的調試方法也會讓你對程序的運行理解很深入，對問題的查找定位變得很容易，讓軟件運行得更穩定。

3.Console調試法

3.1 添加console.log指令

在代碼中添加console.log()方法，這裏例子輸出從數據庫讀回來的最高最低溫，詳見以下：

3.2 調出溫度界面以下

3.3 Google瀏覽器的Console窗口

在Google瀏覽器中按F12，調出Console窗口以下。

3.4 console.error輸出

將代碼改爲Error輸出以下

3.5 瀏覽器輸出

則瀏覽器的Console輸出會變成紅色以下。

若是輸出的是一個JS對象或者數組，則須要用JSON.stringify方法將其轉換成json數組再輸出,以下
console.log(JSON.stringify(resolve));

4.alert 調試法

4.1 alert方法代碼

4.2 alert提示效果

備註：alert方法爲阻塞式，點擊肯定以後，前端代碼纔會繼續運行

5 斷點調試法

5.1 設置斷點

設置斷點debugger以下圖

5.2 運行代碼

則運行代碼以後，代碼會自動跳到斷點，中止運行以下

5.3 輸入關心的屬性

5.3.1 Watch中觀察數據

Watch中點「+」,而後點擊回車便可，看到對應數據的值。

5.3.2 Console中觀察數據

F12選擇瀏覽器Console窗口，輸入須要觀察的變量名，點擊回車，便可看到其對應值。

5.4 輸入想要執行的方法

在斷點設置，中止運行後，斷點以前的方法可在Console窗口中運行輸出。

5.4.1 寫一個調試方法output()

5.4.2 設置斷點並運行程序

詳見5.1，5.2

5.4.3 執行方法運行程序

可觀察到執行結果以下。