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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue如何加載本地json數據，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vueScroll實現(xiàn)移動端下拉刷新、上拉加載，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
這篇文章主要介紹了Vue基本指令實例圖文講解，文章將基本指令講解的很清楚，有對于指令不太懂的同學可以跟著學習研究下2021-02-02
在Vue中創(chuàng)建可重用的 Transition的方法
這篇文章主要介紹了在Vue中創(chuàng)建可重用的 Transition,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
這篇文章主要介紹了vue如何實現(xiàn)文件上傳及預覽問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要給大家介紹了關于Vue事件修飾符native、self的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-07-07
這篇文章主要為大家介紹了Vue 項目遷移 React 路由部分經驗分享，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
vue單行文本溢出會出現(xiàn)title提示自定義指令
這篇文章主要為大家介紹了vue單行文本溢出會出現(xiàn)title提示自定義指令，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
vue使用keep-alive實現(xiàn)組件切換時保存原組件數據方法
這篇文章主要介紹了vue使用keep-alive實現(xiàn)組件切換時保存原組件數據方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家介紹了項目開發(fā)中husky的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11