vue項(xiàng)目調(diào)試的三種方法總結(jié)
一、console.log
這個(gè)開(kāi)始學(xué)就會(huì)，不演示了。重要的是需要養(yǎng)成這樣的能力，代碼出了問(wèn)題，光看是看不出來(lái)問(wèn)題的。
二、debugger方法
vscode安裝插件，debugger for chrome;
在代碼需要打斷點(diǎn)的位置，寫(xiě)上debugger(如果安裝eslint可能報(bào)錯(cuò)，這時(shí)鼠標(biāo)移到代碼出現(xiàn)小燈泡，點(diǎn)擊選第一項(xiàng)忽略即可);
npm run serve啟動(dòng)，到了斷點(diǎn)位置瀏覽器會(huì)停下來(lái);
在瀏覽器里使用步進(jìn)開(kāi)始調(diào)試。
三、vscode里斷點(diǎn)調(diào)試
1. 在需要的位置打斷點(diǎn)(每行行號(hào)前面)；
2. 點(diǎn)擊菜單欄–運(yùn)行–啟動(dòng)調(diào)試，在彈出的框里選chrome，進(jìn)入launch配置，配置好url，再次啟動(dòng)調(diào)試就打開(kāi)一個(gè)調(diào)試窗口；
3. 操作到我們打斷點(diǎn)的位置，就可以看到vscode代碼運(yùn)行停止到斷點(diǎn)位置，然后我們?cè)龠M(jìn)行自己的代碼調(diào)試。
總結(jié)
到此這篇關(guān)于vue項(xiàng)目調(diào)試的三種方法總結(jié)的文章就介紹到這了,更多相關(guān)vue調(diào)試方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
MVVM是Model-View-ViewModel的縮寫(xiě)，MVVM是一種設(shè)計(jì)思想，這篇文章主要介紹了Vue生命周期和MVVM框架,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue調(diào)用原生方法交互，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
用vue實(shí)現(xiàn)注冊(cè)頁(yè)效果?vue實(shí)現(xiàn)短信驗(yàn)證碼登錄
這篇文章主要為大家詳細(xì)介紹了用vue實(shí)現(xiàn)注冊(cè)頁(yè)，短信驗(yàn)證碼登錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
使用?vite?external?減小產(chǎn)物體積的方法實(shí)現(xiàn)
本文主要介紹了使用?vite?external?減小產(chǎn)物體積,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2026-05-05
Vue頁(yè)面切換空白與刷新404問(wèn)題的深度解析
在使用?Vue.js?開(kāi)發(fā)單頁(yè)應(yīng)用?(SPA)?的過(guò)程中,開(kāi)發(fā)者經(jīng)常會(huì)遇到兩個(gè)常見(jiàn)問(wèn)題,頁(yè)面切換時(shí)出現(xiàn)短暫的空白屏幕,以及刷新頁(yè)面時(shí)返回?404?錯(cuò)誤,下面我們就來(lái)講講這兩個(gè)問(wèn)題該如何將解決吧2025-05-05
vue如何使用element-ui 實(shí)現(xiàn)自定義分頁(yè)
這篇文章主要介紹了vue如何使用element-ui 實(shí)現(xiàn)自定義分頁(yè),可以通過(guò)插槽實(shí)現(xiàn)自定義的分頁(yè),本文通過(guò)實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-07-07
關(guān)于Element-ui中table默認(rèn)選中toggleRowSelection問(wèn)題
這篇文章主要介紹了關(guān)于Element-ui中table默認(rèn)選中toggleRowSelection問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue3+vite+axios?配置連接后端調(diào)用接口的實(shí)現(xiàn)方法
這篇文章主要介紹了vue3+vite+axios?配置連接后端調(diào)用接口的實(shí)現(xiàn)方法，在vite.config.ts文件中添加配置，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
Vuex中的映射允許您將state中的任何屬性(state、getter、mutation和action)綁定到組件中的計(jì)算屬性,并直接使用state中的數(shù)據(jù)，下面我們來(lái)詳細(xì)了解2022-09-09
vue3中的watch是一個(gè)組合式的API使用時(shí)需要引入,下面這篇文章主要給大家介紹了關(guān)于vue3下watch使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03