【搬砖百宝箱】使用vscode debuge Vue 源码

1,132 阅读1分钟

我们期望,学习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!