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"
