Vue程序調(diào)試的方法
1.寫本文的背景
因?yàn)槌绦虻恼{(diào)試非常重要,程序猿可以利用好的調(diào)試方法去查找定位自己的問題所在之處。從而,達(dá)到糾正自己程序錯(cuò)誤的地方,健壯自己的程序,讓問題變得越來越少,程序變得越來越健康。故作此文,而且日后會(huì)將實(shí)用的調(diào)試程序方法不斷進(jìn)行迭代更新。
2.調(diào)試與測(cè)試
調(diào)式與測(cè)試實(shí)際有異曲同工之妙,只不過對(duì)象不同。測(cè)試面向的是產(chǎn)品級(jí),系統(tǒng)級(jí);而調(diào)試往往是程序里的某一部分,某個(gè)方法,某個(gè)屬性或者對(duì)象。最終效果也很類似,好的測(cè)試人員,測(cè)試方案可以將產(chǎn)品系統(tǒng)的問題解決在搖籃中;好的調(diào)試方法也會(huì)讓你對(duì)程序的運(yùn)行理解很深刻,對(duì)問題的查找定位變得很容易,讓軟件運(yùn)行得更穩(wěn)定。
3.Console調(diào)試法
3.1 添加console.log指令
在代碼中添加console.log()方法,這里例子輸出從數(shù)據(jù)庫(kù)讀回來的最高最低溫,詳見如下:
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中觀察數(shù)據(jù)
Watch中點(diǎn)“+”,然后點(diǎn)擊回車即可,看到對(duì)應(yīng)數(shù)據(jù)的值。
5.3.2 Console中觀察數(shù)據(jù)
F12選擇瀏覽器Console窗口,輸入需要觀察的變量名,點(diǎn)擊回車,即可看到其對(duì)應(yīng)值。
5.4 輸入想要執(zhí)行的方法
在斷點(diǎn)設(shè)置,停止運(yùn)行后,斷點(diǎn)之前的方法可在Console窗口中運(yùn)行輸出。
5.4.1 寫一個(gè)調(diào)試方法output()
5.4.2 設(shè)置斷點(diǎn)并運(yùn)行程序
詳見5.1,5.2
5.4.3 執(zhí)行方法運(yùn)行程序
可觀察到執(zhí)行結(jié)果如下。
總結(jié)
以上所述是小編給大家介紹的Vue程序調(diào)試的方法,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
如何實(shí)現(xiàn)雙向綁定mvvm的原理實(shí)現(xiàn)
這篇文章主要介紹了vue雙向數(shù)據(jù)綁定原理,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05Vue使用高德地圖選點(diǎn)定位搜索定位功能實(shí)現(xiàn)
這篇文章主要介紹了Vue使用高德地圖選點(diǎn)定位搜索定位功能,文中給大家提到了常見問題解決方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-10-10基于vue2.0的活動(dòng)倒計(jì)時(shí)組件countdown(附源碼下載)
這是一款基于vue2.0的活動(dòng)倒計(jì)時(shí)組件,可以使用服務(wù)端時(shí)間作為當(dāng)前時(shí)間,在倒計(jì)時(shí)開始和結(jié)束時(shí)可以自定義回調(diào)函數(shù)。這篇文章主要介紹了基于vue2.0的活動(dòng)倒計(jì)時(shí)組件countdown,需要的朋友可以參考下2018-10-10Nuxt 項(xiàng)目性能優(yōu)化調(diào)研分析
這篇文章主要介紹了Nuxt 項(xiàng)目性能優(yōu)化調(diào)研分析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11解決vue-cli webpack打包開啟Gzip 報(bào)錯(cuò)問題
這篇文章主要介紹了vue-cli webpack打包開啟Gzip 報(bào)錯(cuò)問題的解決方法,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07Vue3+Element?Plus的項(xiàng)目搭建過程詳解
這篇文章主要為大家介紹了Vue3+Element?Plus的項(xiàng)目搭建過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08