源码调试技巧

分享一个源码调试技巧，以VUE为例

1.首先clone vue源码 (https://github.com/vuejs/vue.git)
目录结构

2.安装依赖,安装webpack用来起服务
3.在package.json中的dev命令加上 --sourcemap， npm run dev 之后会在dist目录下生成一个vue.js的映射文件vue.js.map


4.，然后添加一个start命令起 webpack-dev-server，此时报错先不用管

5.新建一个html文件，引入dist中的vue.js，创建一个vue实例，然后打开浏览器的Sources
CTRL + P 打开新建的html文件在new Vue上加断点

通过右侧的断点调试来进入源码查看内容，点击这个箭头（step into fn）来看看实例化的时候做了什么，可以自己随意添加断点来调试

在源码处右键可以定位到当前源码在哪个路径下