如何debugger单步调试Vue源码

308 阅读1分钟

准备工作:
克隆Vue源码: Vue
开始:
第一步:我们把Vue源码克隆下来后,并在编辑器打开
第二步: 在package.json文件中的script脚本中,在dev命令最后添加--sourcemap,
修改前:

"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev"

修改后并执行:此时会产出一个map.js文件

"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev --sourcemap"

第三步:全局安装http-server

npm i http-server -g 

第四步:
在Vue项目中找到examples目录,如下图: image.png 该目录下会有很多文件,有一些是官方的,有一些是我自己为了调试某个功能而新建的, 如果自己想调试某个功能就可以直接在该目录下新建文件即可,

第五步: 在项目的根目录下启动一个本地服务,并在浏览器中访问这个服务地址,

http-server ./

在浏览器中访问后可以看到下面的界面:

  • image.png
    下面只需点击你自己新建的调试文件,就可以开心的进行断点调试了。