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