1.急速 debug 实战一（浏览器 - 基础篇）

2.急速 debug 实战二（浏览器 - 线上篇）

3.急速 debug 实战三（Node - webpack插件,babel插件,vue源码篇）

在我们日常开发中有许多情况下没有 debug 就会让我们的开发变得非常的低效，甚至对一些流程的理解变得非常困难。本教程适用于，正在开发 node 应用， webpack 插件，babel 插件，想要读懂别人写的一些 webpack 插件，babel 插件或者是想要对 vue 源码想要更加深入的了解。本教程都非常适用。相信你看完教程后，便会对那些看似复杂的东西不再惧怕，即使他们充满未知，但是能有一个方法去更好地了解他们。

示例代码仓库： https://github.com/hua1995116/debug

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 的区别（参考：https://nodejs.org/en/docs/guides/debugging-getting-started/#command-line-options）

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 相关的源码。

可以先在源码 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。具体细节打算后面会出一篇源码的文章, 毕竟大家学会整个技能已经会自己调试了，所以讲的不多。(溜了溜了

结尾

看完了本教程，希望对大家有所帮助~，对各种插件以及原理不再惧怕，如果有更好地调试方式，欢迎评论来秀一波操作。

更多请关注

友情链接： https://huayifeng.top/