vue版本：3.2.33
1、github拉去vue源码，vue仓库地址
2、git clone github.com/vuejs/core.… 到本地
3、在项目根目录的 package.json 文件中找到 script 下面的 dev 命令。
"dev": "node scripts/dev.js"
上面那条命令改成下面这样，也就是在后面增加 --soucemap。
"dev": "node scripts/dev.js --soucemap"
作用是我们一会debugger的时候可以断点进去源码的对应代码行，否则进入的是编译后的代码行。
4、执行 npm run dev 或者 pnpm dev。这时候会在 packages > vue 目录下面生成dist目录，里面有vue.global.js 和 vue.global.js.map 两个文件。
5、然后我们在dist目录创建一个 index.html 用来调试源码，代码如下：
6、然后我们在浏览器打开 index.html，就会发现按照我们预期的页面显示了，每秒会切换一次时间。
7、F12打开浏览器控制台，然后就可以在我们想要的地方添加断点了。同时我们可以看到页面这时候显示的是我们写的源代码：{{msg}}
按照上面的方式我们就可以愉快的断点调试我们想要调试的代码片段了。
webstorm
因为我比较喜欢用webstorm，所以我更喜欢用webstorm来调试。
1、我们还是接着上面的第五步。然后再webstorm里面再我们想要的地方添加断点。我们还是断点 createApp为示例。
2、然后在菜单栏的运行里面点击调试 index.html，如果没有 index.html，就点击编辑配置添加 index.html
3、我们会发现webstorm会自动帮我们打开浏览器，然后跳回断点的地方。点击红框内的按钮也可以像浏览器那样调试了
4、再比如我们想调试reactive是怎么实现的，还是按照上面的方式就可以了，例：
最后
可能大家看最后webstorm调试的时候有点跳跃啊，都直接其他目录的具体代码文件里面去了。
那有同学可能就要说了，我都不知道这么多目录里的文件是干啥的，怎么直接去找啊。
大家如果想知道的每个文件是干啥的以及他是怎么实现的，大家可以点个关注不迷路，看我 vue源码阅读 后续文章，我将一一解读。
最后谢谢大家阅读。
