准备工作:
克隆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目录,如下图:
该目录下会有很多文件,有一些是官方的,有一些是我自己为了调试某个功能而新建的,
如果自己想调试某个功能就可以直接在该目录下新建文件即可,
第五步: 在项目的根目录下启动一个本地服务,并在浏览器中访问这个服务地址,
http-server ./
在浏览器中访问后可以看到下面的界面:
下面只需点击你自己新建的调试文件,就可以开心的进行断点调试了。