webStorm?debug?vue項(xiàng)目的兩種方案圖文詳解
一、前言
本文將介紹通過webstorm對vue項(xiàng)目進(jìn)行debugger調(diào)試的兩種方案。
但是，不管通過那種方案，都無法達(dá)到類似后端idea調(diào)試的體驗(yàn)，感覺十分難受，不過，比起用console.log還是好一些。如果各位有更好的方案，還望賜教。
二、debug的兩種方案
方案1：在瀏覽器的控制臺進(jìn)行調(diào)試
1.1 只需要在你的vue.config.js文件中添加如下代碼即可，然后啟動項(xiàng)目
module.exports = {
configureWebpack: {
// 指定 Webpack 在構(gòu)建過程中生成 source map 文件，以便于調(diào)試代碼
devtool: "source-map",
},
}1.2 啟動項(xiàng)目，打開瀏覽器控制臺
1.3 搜索（Ctrl+P）你想要打斷點(diǎn)的vue文件，例如：我這里是login.vue
1.4 找到需打斷點(diǎn)的行，點(diǎn)擊行號即可打斷點(diǎn)，然后進(jìn)行觸發(fā)即可。
方案2：直接在webstorm中進(jìn)行調(diào)試（debug啟動server）
2.1 修改webstorm的調(diào)試器配置
2.2 配置一下webstorm瀏覽器信息
--remote-allow-origins=* --remote-debugging-port
2.3 先啟動項(xiàng)目，拿到項(xiàng)目的訪問地址，如 http://localhost:8082/
2.4 配置啟動信息
2.5 直接以debug方式啟動npm的server服務(wù)，webstorm會打開新的瀏覽器頁面，直接在webstorm斷點(diǎn)調(diào)試。
三、總結(jié)說明
總的來說，方案2的操作，實(shí)際上會讓webstorm打開兩個端口，一個是服務(wù)端口（對應(yīng)我這里的serve服務(wù)），另外一個就是debug端口（對應(yīng)我這里的serve JavaScript），通過debug端口瀏覽器和webstorm之間交互用戶debugger動作，以便知道用戶干了什么。
所以，如果你的操作失敗了或者遇到了其他情況，你可以檢查一下，你的項(xiàng)目服務(wù)（serve）和debug服務(wù)（serve JavaScript）是否都正確啟動了。
到此這篇關(guān)于webStorm debug vue項(xiàng)目兩種方案的文章就介紹到這了,更多相關(guān)webStorm debug vue項(xiàng)目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue如何加載本地json數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vueScroll實(shí)現(xiàn)移動端下拉刷新、上拉加載
這篇文章主要介紹了vueScroll實(shí)現(xiàn)移動端下拉刷新、上拉加載，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了Vue基本指令實(shí)例圖文講解，文章將基本指令講解的很清楚，有對于指令不太懂的同學(xué)可以跟著學(xué)習(xí)研究下2021-02-02
在Vue中創(chuàng)建可重用的 Transition的方法
這篇文章主要介紹了在Vue中創(chuàng)建可重用的 Transition,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
這篇文章主要介紹了vue如何實(shí)現(xiàn)文件上傳及預(yù)覽問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要給大家介紹了關(guān)于Vue事件修飾符native、self的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
Vue 項(xiàng)目遷移 React 路由部分經(jīng)驗(yàn)分享
這篇文章主要為大家介紹了Vue 項(xiàng)目遷移 React 路由部分經(jīng)驗(yàn)分享，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue單行文本溢出會出現(xiàn)title提示自定義指令
這篇文章主要為大家介紹了vue單行文本溢出會出現(xiàn)title提示自定義指令，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
vue使用keep-alive實(shí)現(xiàn)組件切換時保存原組件數(shù)據(jù)方法
這篇文章主要介紹了vue使用keep-alive實(shí)現(xiàn)組件切換時保存原組件數(shù)據(jù)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家介紹了項(xiàng)目開發(fā)中husky的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11