VUE源码如何本地断点【源码阅读准备】

1,222 阅读1分钟

1. github获取vue源码

可通过git拉取或者直接下载zip压缩包到本地。
github仓库地址:github.com/vuejs/vue

1.1

2. 本地工程调试

2.1 打开本地工程,找到examples->commits->index.html在浏览器打开。

2.1.1

可以看到控制台如下图,此时引入的是vue.min.js,不具有可读性。

2.1.2

在编辑器中打开index.html文件,修改引用,将vue.min.js改为vue.js

2.1.3

此时刷新页面,再次看控制台,可以看到代码已经是没有压缩的啦,但是没有办法看到代码的文件结构。

2.1.4

2.2 让我们再回到工程目录,先执行npm install加载依赖包。
然后打开package.json文件,找到dev指令,如下图加上 --sourcemap。可以在断点调试时,把代码映射到单个文件。

图2.2.1
或者打开config.js找到genConfig方法,加上sourceMap: true,如下图:
图2.2.2
2.3 执行npm run dev运行工程,可以看到dist目录下面多了一个vue.js.map文件

2.3.1

此时再次刷新页面看控制台,可以看到如下图多了src目录,代码已经被映射到单个文件,此时可以在任意文件断点查看。

2.3.2