一、前言

本文將介紹通過webstorm對(duì)vue項(xiàng)目進(jìn)行debugger調(diào)試的兩種方案。

但是，不管通過那種方案，都無法達(dá)到類似后端idea調(diào)試的體驗(yàn)，感覺十分難受，不過，比起用console.log還是好一些。如果各位有更好的方案，還望賜教。

二、debug的兩種方案

方案1：在瀏覽器的控制臺(tái)進(jìn)行調(diào)試

1.1 只需要在你的vue.config.js文件中添加如下代碼即可，然后啟動(dòng)項(xiàng)目

module.exports = {
  configureWebpack: {
    // 指定 Webpack 在構(gòu)建過程中生成 source map 文件，以便于調(diào)試代碼
    devtool: "source-map",
  },
}

1.2 啟動(dòng)項(xiàng)目，打開瀏覽器控制臺(tái)

1.3 搜索（Ctrl+P）你想要打斷點(diǎn)的vue文件，例如：我這里是login.vue

1.4 找到需打斷點(diǎn)的行，點(diǎn)擊行號(hào)即可打斷點(diǎn)，然后進(jìn)行觸發(fā)即可。

方案2：直接在webstorm中進(jìn)行調(diào)試（debug啟動(dòng)server）

2.1 修改webstorm的調(diào)試器配置

2.2 配置一下webstorm瀏覽器信息

--remote-allow-origins=*  --remote-debugging-port

2.3 先啟動(dòng)項(xiàng)目，拿到項(xiàng)目的訪問地址，如 http://localhost:8082/

2.4 配置啟動(dòng)信息

2.5 直接以debug方式啟動(dòng)npm的server服務(wù)，webstorm會(huì)打開新的瀏覽器頁面，直接在webstorm斷點(diǎn)調(diào)試。

三、總結(jié)說明

總的來說，方案2的操作，實(shí)際上會(huì)讓webstorm打開兩個(gè)端口，一個(gè)是服務(wù)端口（對(duì)應(yīng)我這里的serve服務(wù)），另外一個(gè)就是debug端口（對(duì)應(yīng)我這里的serve JavaScript），通過debug端口瀏覽器和webstorm之間交互用戶debugger動(dòng)作，以便知道用戶干了什么。

所以，如果你的操作失敗了或者遇到了其他情況，你可以檢查一下，你的項(xiàng)目服務(wù)（serve）和debug服務(wù)（serve JavaScript）是否都正確啟動(dòng)了。

到此這篇關(guān)于webStorm debug vue項(xiàng)目兩種方案的文章就介紹到這了,更多相關(guān)webStorm debug vue項(xiàng)目內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論