VUE程式除錯的方法

目錄4.alert 除錯法

5 斷點除錯法

5.4 輸入想要執行的方法

因為程式的除錯非常重要，程式猿可以利用好的除錯方法去查詢定位自己的問題所在之處。從而，達到糾正自己程式錯誤的地方，健壯自己的程式，讓問題變得越來越少，程式變得越來越健康。故作此文，而且日後會將實用的除錯程式方法不斷進行迭代更新。

調式與測試實際有異曲同工之妙，只不過物件不同。測試面向的是產品級，系統級；而除錯往往是程式裡的某一部分，某個方法，某個屬性或者物件。最終效果也很類似，好的測試人員，測試方案可以將產品系統的問題解決在搖籃中；好的除錯方法也會讓你對程式的執行理解很深刻，對問題的查詢定位變得很容易，讓軟體執行得更穩定。

在**中新增console.log()方法，這裡例子輸出從資料庫讀回來的最高最低溫，詳見如下：

在google瀏覽器中按f12，調出console視窗如下。

將**改成error輸出如下

則瀏覽器的console輸出會變成紅色如下。

如果輸出的是乙個js物件或者陣列，則需要用json.stringify方法將其轉換成json陣列再輸出,如下

備註：alert方法為阻塞式，點選確定之後，前端**才會繼續執行

設定斷點debugger如下圖

則執行**之後，**會自動跳到斷點，停止執行如下

watch中點「+」,然後點選回車即可，看到對應資料的值。

f12選擇瀏覽器console視窗，輸入需要觀察的變數名，點選回車，即可看到其對應值。

在斷點設定，停止執行後，斷點之前的方法可在console視窗中執行輸出。

詳見5.1，5.2

可觀察到執行結果如下。