急速 debug 實戰三（Node - webpack外掛,babel外掛,vue原始碼篇）
3. 急速 debug 實戰三 （Node - webpack外掛,babel外掛,vue原始碼篇）
在我們日常開發中有許多情況下沒有 debug 就會讓我們的開發變得非常的低效，甚至對一些流程的理解變得非常困難。本教程適用於，正在開發 node 應用， webpack 外掛，babel 外掛，想要讀懂別人寫的一些 webpack 外掛，babel 外掛 或者是想要對 vue 原始碼想要更加深入的瞭解。本教程都非常適用。相信你看完教程後，便會對那些看似複雜的東西不再懼怕，即使他們充滿未知，但是能有一個方法去更好地瞭解他們。
示例程式碼倉庫： github.com/hua1995116/…
git clone https://github.com/hua1995116/debug.git cd debug 複製程式碼
所以示例在以下環境通過。
作業系統: MacOS 10.13.4
Chrome: 版本 72.0.3626.81（正式版本） （64 位）
node 除錯
在 node 基礎除錯中，會給出 chrome 和 vscode 兩種除錯方式，可以根據自己的喜好來進行選擇除錯。（後面為了簡單起見，所有示例都以 vscode 為例子。）
cd node-debug npm install 複製程式碼
chrome 除錯
示例一：
第一步，開啟 index.js,加上斷點。
const addFn = (a, b) => {
debugger;
return a + b;
}
const sum = addFn('1', '2');
console.log(sum);
複製程式碼
第二步，在命令列輸入以下命令
node --inspect-brk index.js 複製程式碼
第三步，開啟 chrome ，輸入 chrome://inspect
第四步, 點選 configure ，配置你的地址和埠, 然後回車，點選 done。
第五步，點選 Target 下的 inspect。
示例二：
第一步，開啟 koa.js，加入斷點
const Koa = require('koa');
const app = new Koa();
app.use(async ctx => {
debugger;
ctx.body = 'Hello World';
});
app.listen(3000);
複製程式碼
第二步，在命令列輸入以下命令
node --inspect index.js 複製程式碼
第三步，開啟 chrome ，輸入 chrome://inspect
第四步, 點選 Target 下的 inspect。
第五步，在瀏覽器輸入 localhost:3000 。便會跳出這個介面。
--inspect-brk 和 --inspect 的區別（參考： nodejs.org/en/docs/gui…
vscode 除錯
vscode 除錯就需要一些配置啦。
示例一: index.js
第一步，點選除錯按鈕，選擇新增配置，用預設配置就ok。
第二步，回到我們的 index.js 程式碼中，打上一個斷點，vscode 打斷點方式，在某一行程式碼前點選，會出現一個紅點點。
第三步，再點選除錯按鈕，點選啟動程式前的箭頭。
恭喜你成功了！
示例二: koa.js
第一步，修改我們剛才的 launch.json ， 將 "program": "${workspaceFolder}/index.js" 改為 "program": "${workspaceFolder}/koa.js"
第二步，按照示例一的方式，給我們程式碼打上斷點。
第三步，再點選除錯按鈕，點選啟動程式前的箭頭。
第四步，訪問 localhost:3000 。可以看到，已經進入我們的斷點啦。
恭喜你成功了！
webpack外掛、babel外掛
相信如果你在寫外掛的時候通過 console.log 的形式會讓你的外掛開發變得分外的困難和頭疼。還有就是看別人寫的外掛，如果你只會 console.log ,那麼也會令原本簡單的事情變得非常複雜。除此之外，除錯的好處就是，能讓你看到 webpack 提供的很多鉤子函式，能夠讓我們不再面對未知。
webpack 外掛除錯
$ cd webpack-plugin-debug $webpack-plugin-debug npm installl 複製程式碼
第一步，和 node 除錯方式是一樣的，先點選除錯按鈕，新增一個配置，將配置修改成以下的樣子。
lanuch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "啟動程式",
"cwd": "${workspaceFolder}/myProject",
"program": "${workspaceFolder}/myProject/node_modules/webpack/bin/webpack.js"
}
]
}
複製程式碼
說明： 因為在兩個不同的目錄，所以我選擇在根目錄進行除錯，並且配置好當前的 cwd （執行根目錄）。
第二步，打上斷點。我們給 myPlugin/plugin.js 的 var filelist = 'In this build:\n\n'; 這一行打上斷點。
第三步，執行, 啟動程式。
到這裡就大功告成，你可以放心地檢視各個變數（ Compilation 包含哪些變數）, 整個過程是怎麼發生的，都清晰地在我們眼前。
babel 外掛除錯
其實 babel 外掛 和 webpack 外掛是類似的。無非是一些小細節的不一致。我進行簡單地演示，相信優秀的你看了 webpack 外掛除錯後，能夠很快理解。
兩個注意點：
"plugins": [["../babel-plugin/index"]],
原始碼除錯（vue為例）
當你在開發 vue 專案中，是否遇到過這樣的情況，面對一些很奇怪的問題，你會下意識地去百度和谷歌，當然，他們一般來講不會讓你失望，總是能給你一些提示性的幫助，那麼是否思考過這樣一個問題，當出現一個他們沒有遇到過的問題，我們該怎麼辦？相信你心中也會有一個答案，就是，去看原始碼！首先會去 clone 專案，但是原始碼這麼多，就算你很瞭解其結構也記不住這麼多的步驟。
所以這個時候我們需要用除錯的方法，將斷點在打我們熟悉的程式碼中。一步一步慢慢地瞭解其內部的過程。所以學會除錯是能幫助我們更好地瞭解原始碼內部的利器。下面讓我們來看看如何除錯吧。
cd vue-debug cd vue npm install npm run dev 複製程式碼
例如你想除錯 computed 相關的原始碼。
- 可以先在 原始碼
src目錄下搜尋 相關的關鍵字 (現在我們是computed), 一搜索你就能找到一個initComputed方法, 檔案位置為 vue/src/core/instance/state.js - 在
initComputed方法下面加上一個debugger。
function initComputed (vm: Component, computed: Object) {
debugger;
// $flow-disable-line
const watchers = vm._computedWatchers = Object.create(null)
// computed properties are just getters during SSR
const isSSR = isServerRendering()
...
複製程式碼
- 然後在瀏覽器開啟 vue-debug 下面 index.html 。
接下來你就可以一步一步慢慢地進行除錯了。
如果再到某個細節，你可以繼續寫入 debugger。 具體細節打算後面會出一篇原始碼的文章, 畢竟大家學會整個技能已經會自己除錯了，所以講的不多。(溜了溜了