使用WebStorm用Debug模式調(diào)試Vue等前端項(xiàng)目的步驟
問(wèn)題說(shuō)明
開(kāi)發(fā)前端時(shí)，一直很苦惱調(diào)試前端代碼的麻煩。
簡(jiǎn)單的內(nèi)容可以通過(guò)console.log()在控制臺(tái)打印變量值，來(lá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)目訪問(wèn)地址
啟動(dòng)調(diào)試腳本
開(kāi)始愉快的調(diào)試
其他問(wèn)題
跳轉(zhuǎn)頁(yè)面url為about:blank問(wèn)題解決
按下圖步驟操作
選擇默認(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 實(shí)現(xiàn)復(fù)制功能,不需要任何結(jié)構(gòu)內(nèi)容直接復(fù)制方式
今天小編就為大家分享一篇Vue 實(shí)現(xiàn)復(fù)制功能,不需要任何結(jié)構(gòu)內(nèi)容直接復(fù)制方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue+d3js+fastapi實(shí)現(xiàn)天氣柱狀圖折線圖餅圖的示例
本文主要介紹了vue+d3js+fastapi實(shí)現(xiàn)天氣柱狀圖折線圖餅圖的示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-04-04
vue?elementui?實(shí)現(xiàn)搜索欄子組件封裝的示例代碼
這篇文章主要介紹了vue?elementui?搜索欄子組件封裝,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
vue中el-select 和el-tree二次封裝實(shí)現(xiàn)
本文介紹了vue中el-select 和el-tree二次封裝實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11
解決Vue路由導(dǎo)航報(bào)錯(cuò):NavigationDuplicated:?Avoided?redundant?navig
這篇文章主要給大家介紹了關(guān)于解決Vue路由導(dǎo)航報(bào)錯(cuò):NavigationDuplicated:?Avoided?redundant?navigation?to?current?location的相關(guān)資料,這是最近做項(xiàng)目時(shí)候遇到的一個(gè)問(wèn)題,現(xiàn)將解決辦法分享出來(lái),需要的朋友可以參考下2023-01-01
基于vue實(shí)現(xiàn)新聞自下往上滾動(dòng)效果(示例代碼)
這篇文章主要介紹了vue新聞自下往上滾動(dòng)效果,當(dāng)鼠標(biāo)鼠標(biāo)放上暫停滾動(dòng)，鼠標(biāo)移出繼續(xù)滾動(dòng)，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-04-04
這篇文章主要介紹了Vue如何跨組件傳遞Slot的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頭像上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
vue項(xiàng)目適配屏幕分辨率與屏幕的縮放適配詳細(xì)教程
現(xiàn)在很多14寸的筆記本，出廠默認(rèn)就是150%的顯示。導(dǎo)致很多時(shí)候我們的項(xiàng)目，自己開(kāi)發(fā)的時(shí)候都是按照100%比例來(lái)開(kāi)發(fā)的，上線了就會(huì)發(fā)現(xiàn)這個(gè)問(wèn)題，今天就這個(gè)問(wèn)題給出解決方案，感興趣的朋友跟隨小編一起看看吧2022-11-11
vue項(xiàng)目中頁(yè)面底部出現(xiàn)白邊及空白區(qū)域錯(cuò)誤的問(wèn)題
這篇文章主要介紹了vue項(xiàng)目中頁(yè)面底部出現(xiàn)白邊及空白區(qū)域錯(cuò)誤的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08