急速 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/