webStorm?debug?vue項目的兩種方案圖文詳解
一、前言
本文將介紹通過webstorm對vue項目進行debugger調試的兩種方案。
但是，不管通過那種方案，都無法達到類似后端idea調試的體驗，感覺十分難受，不過，比起用console.log還是好一些。如果各位有更好的方案，還望賜教。
二、debug的兩種方案
方案1：在瀏覽器的控制臺進行調試
1.1 只需要在你的vue.config.js文件中添加如下代碼即可，然后啟動項目
module.exports = {
configureWebpack: {
// 指定 Webpack 在構建過程中生成 source map 文件，以便于調試代碼
devtool: "source-map",
},
}1.2 啟動項目，打開瀏覽器控制臺
1.3 搜索（Ctrl+P）你想要打斷點的vue文件，例如：我這里是login.vue
1.4 找到需打斷點的行，點擊行號即可打斷點，然后進行觸發(fā)即可。
方案2：直接在webstorm中進行調試（debug啟動server）
2.1 修改webstorm的調試器配置
2.2 配置一下webstorm瀏覽器信息
--remote-allow-origins=* --remote-debugging-port
2.3 先啟動項目，拿到項目的訪問地址，如 http://localhost:8082/
2.4 配置啟動信息
2.5 直接以debug方式啟動npm的server服務，webstorm會打開新的瀏覽器頁面，直接在webstorm斷點調試。
三、總結說明
總的來說，方案2的操作，實際上會讓webstorm打開兩個端口，一個是服務端口（對應我這里的serve服務），另外一個就是debug端口（對應我這里的serve JavaScript），通過debug端口瀏覽器和webstorm之間交互用戶debugger動作，以便知道用戶干了什么。
所以，如果你的操作失敗了或者遇到了其他情況，你可以檢查一下，你的項目服務（serve）和debug服務（serve JavaScript）是否都正確啟動了。
到此這篇關于webStorm debug vue項目兩種方案的文章就介紹到這了,更多相關webStorm debug vue項目內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了el-dialog關閉再打開后窗口內容不刷新問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要介紹了利用Electron簡單擼一個Markdown編輯器的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
本篇文章主要介紹了深入理解Vue-cli搭建項目后的目錄結構探秘，具有一定的參考價值，有興趣的可以了解一下2017-07-07
這篇文章主要為大家詳細介紹了vue實現(xiàn)購物車選擇功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要介紹了使用vue-antd動態(tài)切換主題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
最近在自己寫頁面,然后寫登錄注冊UI的時候需要一個驗證碼組件,去搜一下沒找到什么合適的,于是自己寫一個,這篇文章主要給大家介紹了關于Vue實現(xiàn)驗證碼登錄的相關資料,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vue上傳文件formData上傳的解決全流程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
最近有有個項目，通過選擇不同的查詢指標展示不同的表格，所以本文就介紹一下Element實現(xiàn)動態(tài)表格，具體實現(xiàn)代碼記錄如下，感興趣的可以了解一下2021-08-08
這篇文章主要給大家介紹了Vue項目中如何在父組件中直接調用子組件的方法,文章通過代碼示例介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2023-11-11
vue3封裝AES(CryptoJS)前端加密解密通信代碼實現(xiàn)
防止數(shù)據被爬取,前后端傳參接收參數(shù)需要加密處理,使用AES加密,這篇文章主要給大家介紹了關于vue3封裝AES(CryptoJS)前端加密解密通信代碼實現(xiàn)的相關資料,需要的朋友可以參考下2023-12-12