急速 debug 實戰三（Node - webpack插件,babel插件,vue源碼篇）

1.急速 debug 實戰一 （瀏覽器 - 基礎篇）

2.急速 debug 實戰二 （瀏覽器 - 線上篇）

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 插件調試後，可以很快理解。

兩個注意點：

• 由於 babel cli 須要定義 參數，因此在 launch.json 的時候須要加上args 參數
• .babelrc 插件的路徑是能夠這麼寫的。"plugins": [["../babel-plugin/index"]],

源碼調試（vue爲例）

當你在開發 vue 項目中，是否遇到過這樣的狀況，面對一些很奇怪的問題，你會下意識地去百度和谷歌，固然，他們通常來說不會讓你失望，老是能給你一些提示性的幫助，那麼是否思考過這樣一個問題，當出現一個他們沒有遇到過的問題，咱們該怎麼辦？相信你心中也會有一個答案，就是，去看源碼！首先會去 clone 項目，可是源碼這麼多，就算你很瞭解其結構也記不住這麼多的步驟。

因此這個時候咱們須要用調試的方法，將斷點在打咱們熟悉的代碼中。一步一步慢慢地瞭解其內部的過程。因此學會調試是能幫助咱們更好地瞭解源碼內部的利器。下面讓咱們來看看如何調試吧。

cd vue-debug

cd vue

npm install 

npm run dev
複製代碼

例如你想調試 computed 相關的源碼。

1. 能夠先在 源碼 src 目錄下搜索 相關的關鍵字 (如今咱們是 computed), 一搜索你就能找到一個 initComputed 方法, 文件位置爲 vue/src/core/instance/state.js
2. 在 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()
  ...
複製代碼

3. 而後在瀏覽器打開 vue-debug 下面 index.html 。

接下來你就能夠一步一步慢慢地進行調試了。

若是再到某個細節，你能夠繼續寫入 debugger。 具體細節打算後面會出一篇源碼的文章, 畢竟你們學會整個技能已經會本身調試了，因此講的很少。(溜了溜了

結尾

看完了本教程，但願對你們有所幫助~，對各類插件以及原理再也不害怕，若是有更好地調試方式，歡迎評論來秀一波操做。

更多請關注

友情連接： huayifeng.top/