使用WebStorm用Debug模式調(diào)試Vue等前端項目的步驟
問題說明
開發(fā)前端時，一直很苦惱調(diào)試前端代碼的麻煩。
簡單的內(nèi)容可以通過console.log()在控制臺打印變量值，來驗證預(yù)期結(jié)果。
涉及到稍復(fù)雜的邏輯，就需要在代碼中侵入增加debugger，或者在瀏覽器中找到j(luò)s文件，再手動添加斷點。
非常的麻煩，而且瀏覽器中對變量的追蹤功能也有限，同時我也一直好奇WebStorm中Debug啟動方式的作用，今天研究了一下，果然WebStorm提供了更簡單的調(diào)試方法，記錄一下
WebStorm調(diào)試步驟
啟動前端項目，我這里是Vue項目，執(zhí)行npm run serve正常啟動即可，啟動成功控制臺會打印前端服務(wù)地址和端口
新建JavaScriptDebug
配置調(diào)試腳本URL，設(shè)置URL為上面控制臺打印的前端項目訪問地址
啟動調(diào)試腳本
開始愉快的調(diào)試
其他問題
跳轉(zhuǎn)頁面url為about:blank問題解決
按下圖步驟操作
選擇默認(rèn)瀏覽器
--remote-allow-origins=*命令的作用是關(guān)閉瀏覽器的跨域限制
總結(jié)
到此這篇關(guān)于使用WebStorm用Debug模式調(diào)試Vue等前端項目的文章就介紹到這了,更多相關(guān)WebStorm用Debug模式調(diào)試Vue內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue 實現(xiàn)復(fù)制功能,不需要任何結(jié)構(gòu)內(nèi)容直接復(fù)制方式
今天小編就為大家分享一篇Vue 實現(xiàn)復(fù)制功能,不需要任何結(jié)構(gòu)內(nèi)容直接復(fù)制方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue+d3js+fastapi實現(xiàn)天氣柱狀圖折線圖餅圖的示例
本文主要介紹了vue+d3js+fastapi實現(xiàn)天氣柱狀圖折線圖餅圖的示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-04-04
vue?elementui?實現(xiàn)搜索欄子組件封裝的示例代碼
這篇文章主要介紹了vue?elementui?搜索欄子組件封裝,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
vue中el-select 和el-tree二次封裝實現(xiàn)
本文介紹了vue中el-select 和el-tree二次封裝實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11
解決Vue路由導(dǎo)航報錯:NavigationDuplicated:?Avoided?redundant?navig
這篇文章主要給大家介紹了關(guān)于解決Vue路由導(dǎo)航報錯:NavigationDuplicated:?Avoided?redundant?navigation?to?current?location的相關(guān)資料,這是最近做項目時候遇到的一個問題,現(xiàn)將解決辦法分享出來,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue新聞自下往上滾動效果,當(dāng)鼠標(biāo)鼠標(biāo)放上暫停滾動，鼠標(biāo)移出繼續(xù)滾動，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-04-04
這篇文章主要介紹了Vue如何跨組件傳遞Slot的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)頭像上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
現(xiàn)在很多14寸的筆記本，出廠默認(rèn)就是150%的顯示。導(dǎo)致很多時候我們的項目，自己開發(fā)的時候都是按照100%比例來開發(fā)的，上線了就會發(fā)現(xiàn)這個問題，今天就這個問題給出解決方案，感興趣的朋友跟隨小編一起看看吧2022-11-11
vue項目中頁面底部出現(xiàn)白邊及空白區(qū)域錯誤的問題
這篇文章主要介紹了vue項目中頁面底部出現(xiàn)白邊及空白區(qū)域錯誤的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08