小編給大家分享一下如何調(diào)試Vue程序,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
為柳江等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù),及柳江網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都做網(wǎng)站、成都網(wǎng)站建設(shè)、柳江網(wǎng)站設(shè)計,以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求,就會得到認(rèn)可,從而選擇與我們長期合作。這樣,我們也可以走得更遠(yuǎn)!1.背景因為程序的調(diào)試非常重要,程序猿可以利用好的調(diào)試方法去查找定位自己的問題所在之處。從而,達到糾正自己程序錯誤的地方,健壯自己的程序,讓問題變得越來越少,程序變得越來越健康。故作此文,而且日后會將實用的調(diào)試程序方法不斷進行迭代更新。
2.調(diào)試與測試調(diào)式與測試實際有異曲同工之妙,只不過對象不同。測試面向的是產(chǎn)品級,系統(tǒng)級;而調(diào)試往往是程序里的某一部分,某個方法,某個屬性或者對象。最終效果也很類似,好的測試人員,測試方案可以將產(chǎn)品系統(tǒng)的問題解決在搖籃中;好的調(diào)試方法也會讓你對程序的運行理解很深刻,對問題的查找定位變得很容易,讓軟件運行得更穩(wěn)定。
3.Console調(diào)試法3.1 添加console.log指令在代碼中添加console.log()方法,這里例子輸出從數(shù)據(jù)庫讀回來的最高最低溫,詳見如下:


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

將代碼改成Error輸出如下

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

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


備注:alert方法為阻塞式,點擊確定之后,前端代碼才會繼續(xù)運行
5 斷點調(diào)試法5.1 設(shè)置斷點設(shè)置斷點debugger如下圖

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

5.3.1 Watch中觀察數(shù)據(jù)
Watch中點“+”,然后點擊回車即可,看到對應(yīng)數(shù)據(jù)的值。

5.3.2 Console中觀察數(shù)據(jù)
F12選擇瀏覽器Console窗口,輸入需要觀察的變量名,點擊回車,即可看到其對應(yīng)值。

5.4 輸入想要執(zhí)行的方法
在斷點設(shè)置,停止運行后,斷點之前的方法可在Console窗口中運行輸出。
5.4.1 寫一個調(diào)試方法output()

5.4.2 設(shè)置斷點并運行程序
詳見5.1,5.2
5.4.3 執(zhí)行方法運行程序
可觀察到執(zhí)行結(jié)果如下。

以上是“如何調(diào)試Vue程序”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
新聞標(biāo)題:如何調(diào)試Vue程序-創(chuàng)新互聯(lián)
網(wǎng)頁路徑:http://chinadenli.net/article32/cogcpc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供自適應(yīng)網(wǎng)站、虛擬主機、做網(wǎng)站、服務(wù)器托管、小程序開發(fā)、網(wǎng)站改版
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)