使用Webstorm調試Vue代碼詳細圖文教程
在我們前端開發(fā)過程中相信很多人都是通過console.log來調試我們的代碼的，但是當代碼復雜度比較高的時候這個方法就比較雞肋了。
這里我來教大家在Webstorm中如何來調試自己的代碼,當然Webstom只是我常用的開發(fā)工具，用Vs code也是可以的。
1、點擊編輯創(chuàng)建配置項
2、名稱：怎么取都可以，這里我自己命名為PC；URL：填寫需要測試的項目運行起來的地址，我這里是本地的8080，可根據自己的情況修改，瀏覽器：選擇自己常用的即可。確保在加載腳本時檢測到斷點可開可不開。
3、運行需要調試的項目 一般是通過：npm run dev 或者npm run serve；成功運行后，會提示項目訪問URL，這個要和前文提到的配置項里面URL保持一致。
4、運行調試按住快捷鍵ALT+F5或者點擊這里開啟
5、調試項目，可以在自己需要調試的代碼之前 加上 debugger開啟斷點，但是測試完畢后記得移除
或者在webstorm點擊右邊代碼行數可開啟斷點
6、加上這些后可以ctrl+f5重新開啟調試或者繼續(xù)點擊這里
7、進入你需要調試的代碼后頁面顯示如下
比較重要的就這三項，熟練使用后你的調試效率會快的飛起
附：解決 WebStorm 調試 Vue 定位不到源代碼
vue.config.js 中配置
configureWebpack: (config) => {
if (process.env.NODE_ENV === "development") {
config.devtool = "source-map";
}
},
總結
到此這篇關于使用Webstorm調試Vue代碼的文章就介紹到這了,更多相關Webstorm調試Vue代碼內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
今天小編就為大家分享一篇vue+vue-router轉場動畫的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
postcss-pxtorem設置不轉換UI框架的CSS單位問題
這篇文章主要介紹了postcss-pxtorem設置不轉換UI框架的CSS單位問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue的transition-group與Virtual Dom Diff算法的使用
這篇文章主要介紹了Vue的transition-group與Virtual Dom Diff算法的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
在vue3中父組件訪問子組件中的屬性和方法是需要借助于ref,蘇哦一本文小編給大家介紹了vue3父組件如何使用ref獲取獲取子組件的屬性和方法,文中詳細的代碼講解,需要的朋友可以參考下2023-11-11
vue 使用插槽分發(fā)內容操作示例【單個插槽、具名插槽、作用域插槽】
這篇文章主要介紹了vue 使用插槽分發(fā)內容操作,結合實例形式總結分析了vue.js使用單個插槽、具名插槽、作用域插槽相關操作技巧與注意事項,需要的朋友可以參考下2020-03-03
這篇文章主要為大家詳細介紹了基于Vue.js的表格分頁組件使用方法，了解了Vue.js的特點，感興趣的朋友可以參考一下2016-05-05
本篇文章給大家分享了關于vue的diff算法的相關知識點總結，有興趣的朋友參考學習下。2018-03-03
這篇文章主要介紹了Vue項目實現簡單的權限控制功能，文中給大家介紹了兩種方式進行權限限制，本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了vuejs如何清空表單數據、刪除對象中的空屬性公共方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
最近在做一個vue的項目,碰到一點關于Map鍵值對傳參的問題,下面這篇文章主要給大家介紹了關于Vue中如何使用Map鍵值對傳參的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08