小編給大家分享一下如何調試Vue程序，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

為柳江等地區(qū)用戶提供了全套網頁設計制作服務，及柳江網站建設行業(yè)解決方案。主營業(yè)務為成都做網站、成都網站建設、柳江網站設計，以傳統(tǒng)方式定制建設網站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！1.背景

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

2.調試與測試

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

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方法為阻塞式，點擊確定之后，前端代碼才會繼續(xù)運行

5 斷點調試法5.1 設置斷點

設置斷點debugger如下圖

5.2 運行代碼

則運行代碼之后，代碼會自動跳到斷點，停止運行如下

5.3 輸入關心的屬性

5.3.1 Watch中觀察數據

Watch中點“+”,然后點擊回車即可，看到對應數據的值。

5.3.2 Console中觀察數據

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

5.4 輸入想要執(zhí)行的方法

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

5.4.1 寫一個調試方法output()

5.4.2 設置斷點并運行程序

詳見5.1，5.2

5.4.3 執(zhí)行方法運行程序

可觀察到執(zhí)行結果如下。

以上是“如何調試Vue程序”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞標題：如何調試Vue程序-創(chuàng)新互聯(lián)
網頁路徑：http://chinadenli.net/article32/cogcpc.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供自適應網站、虛擬主機、做網站、服務器托管、小程序開發(fā)、網站改版

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)