我們知道vue-cli 3.0之前直接基於webpack創建對應配置文件，我們通過學習webpack就能夠了解其構建過程，然而從vue-cli 3.0開始，vue-cli命令行更改為@vue/cli以及@vue/cli-service等，他封裝了webpack，使得我們很難清晰了解到底發生了什么。這時我們可能希望通過調試vue-cli-service對應build過程對其工作原理有一個大體的認知。下面記錄一下這個調試過程:
1. 在git bash命令行中執行：
$ node --inspect-brk node_modules/@vue/cli-service/bin/vue-cli-service.js serve
Debugger listening on ws://127.0.0.1:9229/66ae44f1-94a1-413a-a1dd-21bca412b1c5
For help see https://nodejs.org/en/docs/inspector
2. 如果我們直接將上面監測的url ws://xxx/dafa...放到chrome地址欄中去，會報錯:ERR_DISALLOWED_URL_SCHEME,這時我們需要在chrome中執行chrome://inspect ,這里就能列出來對應可以inspect的session:
如果你不喜歡每次都在chrome中敲chrome:inspect的話，還可以安裝一個NIM (Node Inspector Manager)插件
3. 點擊inspect后，就直接進入了對應的webpack構建代碼，可以查看其運行過程了。
tips: 除了單步運行可以詳細了解nodejs代碼運行流程，你也可以在nodejs代碼中設置一個端點以便調試全速運行時可以自動斷掉,很簡單在代碼中添加一句話 debugger 指令即可
nodejs調試的原理
https://i5ting.github.io/node-debug-tutorial/#302
