使用WebStorm用Debug模式調(diào)試Vue等前端項(xiàng)目的步驟
問題說明
開發(fā)前端時(shí)，一直很苦惱調(diào)試前端代碼的麻煩。
簡(jiǎn)單的內(nèi)容可以通過console.log()在控制臺(tái)打印變量值，來驗(yàn)證預(yù)期結(jié)果。
涉及到稍復(fù)雜的邏輯，就需要在代碼中侵入增加debugger，或者在瀏覽器中找到j(luò)s文件，再手動(dòng)添加斷點(diǎn)。
非常的麻煩，而且瀏覽器中對(duì)變量的追蹤功能也有限，同時(shí)我也一直好奇WebStorm中Debug啟動(dòng)方式的作用，今天研究了一下，果然WebStorm提供了更簡(jiǎn)單的調(diào)試方法，記錄一下
WebStorm調(diào)試步驟
啟動(dòng)前端項(xiàng)目，我這里是Vue項(xiàng)目，執(zhí)行npm run serve正常啟動(dòng)即可，啟動(dòng)成功控制臺(tái)會(huì)打印前端服務(wù)地址和端口
新建JavaScriptDebug
配置調(diào)試腳本URL，設(shè)置URL為上面控制臺(tái)打印的前端項(xiàng)目訪問地址
啟動(dòng)調(diào)試腳本
開始愉快的調(diào)試
其他問題
跳轉(zhuǎn)頁面url為about:blank問題解決
按下圖步驟操作
選擇默認(rèn)瀏覽器
--remote-allow-origins=*命令的作用是關(guān)閉瀏覽器的跨域限制
總結(jié)
到此這篇關(guān)于使用WebStorm用Debug模式調(diào)試Vue等前端項(xiàng)目的文章就介紹到這了,更多相關(guān)WebStorm用Debug模式調(diào)試Vue內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue 本地服務(wù)不能被外部IP訪問的解決方法,本文通過代碼講解的非常詳細(xì)，需要的朋友可以參考下2018-10-10
Vue使用v-viewer插件實(shí)現(xiàn)圖片預(yù)覽和縮放和旋轉(zhuǎn)等功能(推薦)
v-viewer是一個(gè)基于viewerjs封裝的vue圖片預(yù)覽組件,有預(yù)覽縮放拉伸旋轉(zhuǎn)切換拖拽等功能,支持配置化，這篇文章主要介紹了Vue使用v-viewer插件實(shí)現(xiàn)圖片預(yù)覽和縮放和旋轉(zhuǎn)等功能,需要的朋友可以參考下2023-02-02
在開發(fā)項(xiàng)目的時(shí)候，我們一般都用 vue-cli 來避免繁瑣的 webpack 配置和 template 配置。這篇文章主要介紹了如何寫一個(gè) vue 插件,需要的朋友可以參考下2019-06-06
vue中父子組件相互傳值的實(shí)現(xiàn)方法詳解
父子組件通信是Vue中常見的場(chǎng)景,這篇文章主要為大家詳細(xì)介紹了vue中父子組件相互傳值的實(shí)現(xiàn)方法,文中的示例代碼講解詳細(xì),需要的小伙伴可以參考一下2023-12-12
這篇文章主要介紹了Vue 自定義組件 v-model 使用介紹,包括vue2中使用和vue3中使用，本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
在vue中通過render函數(shù)給子組件設(shè)置ref操作
這篇文章主要介紹了在vue中通過render函數(shù)給子組件設(shè)置ref操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
在本篇文章里小編給大家整理的是關(guān)于Vue數(shù)據(jù)綁定實(shí)例寫法以及相關(guān)知識(shí)點(diǎn)，需要的朋友們學(xué)習(xí)下。2019-08-08
詳解Vue學(xué)習(xí)筆記進(jìn)階篇之列表過渡及其他
本篇文章主要介紹了詳解Vue學(xué)習(xí)筆記進(jìn)階篇之列表過渡及其他，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
這篇文章主要介紹了vue中向data添加新屬性的三種方式小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
解決Vue-Router升級(jí)導(dǎo)致的Uncaught (in promise)問題
這篇文章主要介紹了解決Vue-Router升級(jí)導(dǎo)致的Uncaught (in promise)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08