使用Webstorm調(diào)試Vue代碼詳細(xì)圖文教程
在我們前端開(kāi)發(fā)過(guò)程中相信很多人都是通過(guò)console.log來(lái)調(diào)試我們的代碼的，但是當(dāng)代碼復(fù)雜度比較高的時(shí)候這個(gè)方法就比較雞肋了。
這里我來(lái)教大家在Webstorm中如何來(lái)調(diào)試自己的代碼,當(dāng)然Webstom只是我常用的開(kāi)發(fā)工具，用Vs code也是可以的。
1、點(diǎn)擊編輯創(chuàng)建配置項(xiàng)
2、名稱(chēng)：怎么取都可以，這里我自己命名為PC；URL：填寫(xiě)需要測(cè)試的項(xiàng)目運(yùn)行起來(lái)的地址，我這里是本地的8080，可根據(jù)自己的情況修改，瀏覽器：選擇自己常用的即可。確保在加載腳本時(shí)檢測(cè)到斷點(diǎn)可開(kāi)可不開(kāi)。
3、運(yùn)行需要調(diào)試的項(xiàng)目 一般是通過(guò)：npm run dev 或者npm run serve；成功運(yùn)行后，會(huì)提示項(xiàng)目訪(fǎng)問(wèn)URL，這個(gè)要和前文提到的配置項(xiàng)里面URL保持一致。
4、運(yùn)行調(diào)試按住快捷鍵ALT+F5或者點(diǎn)擊這里開(kāi)啟
5、調(diào)試項(xiàng)目，可以在自己需要調(diào)試的代碼之前 加上 debugger開(kāi)啟斷點(diǎn)，但是測(cè)試完畢后記得移除
或者在webstorm點(diǎn)擊右邊代碼行數(shù)可開(kāi)啟斷點(diǎn)
6、加上這些后可以ctrl+f5重新開(kāi)啟調(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)文章
本篇文章主要介紹了淺談vuex之mutation和action的基本使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
這篇文章主要介紹了vue兩個(gè)組件間值的傳遞或修改的實(shí)現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07
Vue實(shí)現(xiàn)封裝一個(gè)切片上傳組件
平時(shí)業(yè)務(wù)開(kāi)發(fā)中用el-upload能滿(mǎn)足大部分場(chǎng)景，但是對(duì)于一些大文件的上傳時(shí)會(huì)比較慢，所以自己基于el-upload封裝了一個(gè)切片上傳組件，希望對(duì)大家有所幫助2023-03-03
vue網(wǎng)絡(luò)請(qǐng)求方案原生網(wǎng)絡(luò)請(qǐng)求和js網(wǎng)絡(luò)請(qǐng)求庫(kù)
這篇文章主要為大家介紹了網(wǎng)絡(luò)請(qǐng)求方案原生網(wǎng)絡(luò)請(qǐng)求和js網(wǎng)絡(luò)請(qǐng)求庫(kù)的過(guò)程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步2021-11-11
Vue 實(shí)現(xiàn)分頁(yè)與輸入框關(guān)鍵字篩選功能
這篇文章主要介紹了Vue 實(shí)現(xiàn)分頁(yè)+輸入框關(guān)鍵字篩選功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
vue修改數(shù)據(jù)頁(yè)面無(wú)效的解決方案
這篇文章主要介紹了vue修改數(shù)據(jù)頁(yè)面無(wú)效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
axios作為Vue生態(tài)系統(tǒng)中濃墨重彩的一筆,我學(xué)習(xí)這個(gè)東西也是花了一定的時(shí)間的,下面這篇文章主要給大家介紹了關(guān)于axios和vue整合操作的相關(guān)資料,需要的朋友可以參考下2022-04-04
ant design中upload組件上傳大文件,顯示進(jìn)度條進(jìn)度的實(shí)例
這篇文章主要介紹了ant design中upload組件上傳大文件,顯示進(jìn)度條進(jìn)度的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
vue 登錄滑動(dòng)驗(yàn)證實(shí)現(xiàn)代碼
這篇文章主要介紹了vue 登錄滑動(dòng)驗(yàn)證實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
這篇文章主要為大家介紹了Vue之組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11