Vue 源码加断点进行调试

前言

在使用 Vue 进行项目开发的过程中，我们有时候需要查看 Vue 的执行过程，这种情况就需要给 Vue 的源码添加断点，查看 Vue 的执行过程。

Vue 源码执行入口

以一个正常的脚手架搭建的 Vue 项目为例（vue 与 cli 版本为 2.x, webpack 为 5.x）。 在 webpack.base.conf.js 中，resolve 配置项如下：

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
  }
}

vue$ 代表精确匹配，表示只有通过 import Vue from 'vue' 的方式才可以正常使用 Vue。 vue/dist/vue.esm.js 为在项目中使用的 vue 的源码文件路径，真实路径是在 node_modules/vue/dist/vue.esm.js，找到源码位置后，便可以在对应的源码文件中添加 debugger 断点。

添加断点

Vue 的实例化是从 main.js 中的 new Vue() 开始的，我们在下面源码的位置添加断点：

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword');
  }
  
  debugger  // 添加断点

  this._init(options);
}

可以看到，添加的源码断点已经生效。

结语

借助上述方式，我们可以更快速地定位并解决问题，提高效率 o(￣▽￣)ｄ。