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

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

因?yàn)槌绦虻恼{(diào)試非常重要，程序猿可以利用好的調(diào)試方法去查找定位自己的問(wèn)題所在之處。從而，達(dá)到糾正自己程序錯(cuò)誤的地方，健壯自己的程序，讓問(wèn)題變得越來(lái)越少，程序變得越來(lái)越健康。故作此文，而且日后會(huì)將實(shí)用的調(diào)試程序方法不斷進(jìn)行迭代更新。

2.調(diào)試與測(cè)試

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

3.Console調(diào)試法3.1 添加console.log指令

在代碼中添加console.log()方法，這里例子輸出從數(shù)據(jù)庫(kù)讀回來(lái)的最高最低溫，詳見(jiàn)如下：

3.2 調(diào)出溫度界面如下

3.3 Google瀏覽器的Console窗口

在Google瀏覽器中按F12，調(diào)出Console窗口如下。

3.4 console.error輸出

將代碼改成Error輸出如下

3.5 瀏覽器輸出

則瀏覽器的Console輸出會(huì)變成紅色如下。

如果輸出的是一個(gè)JS對(duì)象或者數(shù)組，則需要用JSON.stringify方法將其轉(zhuǎn)換成json數(shù)組再輸出,如下
console.log(JSON.stringify(resolve));

4.alert 調(diào)試法4.1 alert方法代碼

4.2 alert提示效果

備注：alert方法為阻塞式，點(diǎn)擊確定之后，前端代碼才會(huì)繼續(xù)運(yùn)行

5 斷點(diǎn)調(diào)試法5.1 設(shè)置斷點(diǎn)

設(shè)置斷點(diǎn)debugger如下圖

5.2 運(yùn)行代碼

則運(yùn)行代碼之后，代碼會(huì)自動(dòng)跳到斷點(diǎn)，停止運(yùn)行如下

5.3 輸入關(guān)心的屬性

5.3.1 Watch中觀(guān)察數(shù)據(jù)

Watch中點(diǎn)“+”,然后點(diǎn)擊回車(chē)即可，看到對(duì)應(yīng)數(shù)據(jù)的值。

5.3.2 Console中觀(guān)察數(shù)據(jù)

F12選擇瀏覽器Console窗口，輸入需要觀(guān)察的變量名，點(diǎn)擊回車(chē)，即可看到其對(duì)應(yīng)值。

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

在斷點(diǎn)設(shè)置，停止運(yùn)行后，斷點(diǎn)之前的方法可在Console窗口中運(yùn)行輸出。

5.4.1 寫(xiě)一個(gè)調(diào)試方法output()

5.4.2 設(shè)置斷點(diǎn)并運(yùn)行程序

詳見(jiàn)5.1，5.2

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

可觀(guān)察到執(zhí)行結(jié)果如下。

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

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

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

廣告

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