Node Js / Vue cli / Webpack plugin Vscode除錯筆記

問題

越來越多許多用 node js 開發的應用，常常噴錯噴的莫明奇妙，因此整理了一下如何對 node js 、 vue cli 、 webpack plugin 偵錯。

一、對 node js 偵錯

1. node 在欲執行 的 js 加上 —inspect 參數，即可以遠端除錯(遠端除錯的預設為 9229)

node --inspect app.js 

2. 接下來，在 Chrome 網址欄，鍵入 chrome://inspect，輸入後就可以看到下面的畫面。

3. 輸入預設偵錯port

4.或是透過開發工具的除錯按鈕

二、對 Vue cli (main.js) 偵錯

1. 在 main.js 加入宣告除錯功能 ( debugger )

2. 在 package.json 加上以下指令

"debug": "node ./node_modules/@vue/cli-service/bin/vue-cli-service.js serve"

3. 執行 npm run debug

4. 在 main.js 按下 F5

5. 輸入 debug url “localhost:8080”

此時中斷點就會停在 main.js

三、 debugger webpack plugin in vue.config

1. 在vue config 的 chainWebpack 方法，宣告除錯功能 ( debugger )

2. 在 package.json 加上以下指令

"debugbuild": "node --inspect-brk=9229 ./node_modules/@vue/cli-service/bin/vue-cli-service.js build" 

3. 在瀏覽器網址列輸入 chrome://inspect > 輸入 net work target port 號

4. 回到 vs code > 在終端機輸入 npm run debug

5. 此時斷點就會停在 chainWebpack 函式中