使用Webstorm調(diào)試Vue代碼詳細(xì)圖文教程
在我們前端開發(fā)過(guò)程中相信很多人都是通過(guò)console.log來(lái)調(diào)試我們的代碼的，但是當(dāng)代碼復(fù)雜度比較高的時(shí)候這個(gè)方法就比較雞肋了。
這里我來(lái)教大家在Webstorm中如何來(lái)調(diào)試自己的代碼,當(dāng)然Webstom只是我常用的開發(fā)工具，用Vs code也是可以的。
1、點(diǎn)擊編輯創(chuàng)建配置項(xiàng)
2、名稱：怎么取都可以，這里我自己命名為PC；URL：填寫需要測(cè)試的項(xiàng)目運(yùn)行起來(lái)的地址，我這里是本地的8080，可根據(jù)自己的情況修改，瀏覽器：選擇自己常用的即可。確保在加載腳本時(shí)檢測(cè)到斷點(diǎn)可開可不開。
3、運(yùn)行需要調(diào)試的項(xiàng)目 一般是通過(guò)：npm run dev 或者npm run serve；成功運(yùn)行后，會(huì)提示項(xiàng)目訪問(wèn)URL，這個(gè)要和前文提到的配置項(xiàng)里面URL保持一致。
4、運(yùn)行調(diào)試按住快捷鍵ALT+F5或者點(diǎn)擊這里開啟
5、調(diào)試項(xiàng)目，可以在自己需要調(diào)試的代碼之前 加上 debugger開啟斷點(diǎn)，但是測(cè)試完畢后記得移除
或者在webstorm點(diǎn)擊右邊代碼行數(shù)可開啟斷點(diǎn)
6、加上這些后可以ctrl+f5重新開啟調(diào)試或者繼續(xù)點(diǎn)擊這里
7、進(jìn)入你需要調(diào)試的代碼后頁(yè)面顯示如下
比較重要的就這三項(xiàng)，熟練使用后你的調(diào)試效率會(huì)快的飛起
附：解決 WebStorm 調(diào)試 Vue 定位不到源代碼
vue.config.js 中配置
configureWebpack: (config) => {
if (process.env.NODE_ENV === "development") {
config.devtool = "source-map";
}
},
總結(jié)
到此這篇關(guān)于使用Webstorm調(diào)試Vue代碼的文章就介紹到這了,更多相關(guān)Webstorm調(diào)試Vue代碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue+vue-router轉(zhuǎn)場(chǎng)動(dòng)畫的實(shí)例代碼
今天小編就為大家分享一篇vue+vue-router轉(zhuǎn)場(chǎng)動(dòng)畫的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
postcss-pxtorem設(shè)置不轉(zhuǎn)換UI框架的CSS單位問(wèn)題
這篇文章主要介紹了postcss-pxtorem設(shè)置不轉(zhuǎn)換UI框架的CSS單位問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue的transition-group與Virtual Dom Diff算法的使用
這篇文章主要介紹了Vue的transition-group與Virtual Dom Diff算法的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
在vue3中父組件訪問(wèn)子組件中的屬性和方法是需要借助于ref,蘇哦一本文小編給大家介紹了vue3父組件如何使用ref獲取獲取子組件的屬性和方法,文中詳細(xì)的代碼講解,需要的朋友可以參考下2023-11-11
vue 使用插槽分發(fā)內(nèi)容操作示例【單個(gè)插槽、具名插槽、作用域插槽】
這篇文章主要介紹了vue 使用插槽分發(fā)內(nèi)容操作,結(jié)合實(shí)例形式總結(jié)分析了vue.js使用單個(gè)插槽、具名插槽、作用域插槽相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2020-03-03
這篇文章主要為大家詳細(xì)介紹了基于Vue.js的表格分頁(yè)組件使用方法，了解了Vue.js的特點(diǎn)，感興趣的朋友可以參考一下2016-05-05
vue的diff算法知識(shí)點(diǎn)總結(jié)
本篇文章給大家分享了關(guān)于vue的diff算法的相關(guān)知識(shí)點(diǎn)總結(jié)，有興趣的朋友參考學(xué)習(xí)下。2018-03-03
Vue項(xiàng)目實(shí)現(xiàn)簡(jiǎn)單的權(quán)限控制管理功能
這篇文章主要介紹了Vue項(xiàng)目實(shí)現(xiàn)簡(jiǎn)單的權(quán)限控制功能，文中給大家介紹了兩種方式進(jìn)行權(quán)限限制，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-07-07
vuejs如何清空表單數(shù)據(jù)、刪除對(duì)象中的空屬性公共方法
這篇文章主要介紹了vuejs如何清空表單數(shù)據(jù)、刪除對(duì)象中的空屬性公共方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
最近在做一個(gè)vue的項(xiàng)目,碰到一點(diǎn)關(guān)于Map鍵值對(duì)傳參的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于Vue中如何使用Map鍵值對(duì)傳參的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08