我们期望,学习Vue源码时,可以通过断点一步步跟读。当然在浏览器里也可以断点跟读,但是,个人感觉,在vscode中断点跟读更爽一些。下面来说下,如何配置vscode,实现debug Vue源码。
事例中Vue的版本是2.5.17-beta.0
在vscode中安装debugger for chrome 插件
因为我们本质还是通过打开浏览器走读代码,所以要安装此插件。
点击bug按钮中的齿轮,修改配置文件
注意file属性,是引用Vue的位置,这里我们用官方实例中的一个文件。
examples/commits/index.html
修改下引入的Vue源码文件,引入非压缩版本。
修改打包配置文件,添加sourceMap
搜genConfig方法,加sourceMap: true
开始调试
在源码中打上断点,点击左上角调试并运行三角箭头,就可以开始愉快的玩耍拉!
So easy!