版本：v3.3.4
想要学习vue3源码，首先需要知道如何调试vue3的源码。本文将介绍如何调试vue3源码。
1、下载源码
直接从GitHub上vue3的仓库获取，源码地址为：github.com/vuejs/core 。
需要注意的是，在GitHub上，vue3的源码在 core 目录下：
2、安装依赖
使用VsCode打开源码，当前下载的源码版本是 v3.3.4：
在源码目录中，有个pnpm-lock.yaml 文件，该文件是用来管理依赖包的，在安装依赖时需要使用 pnpm install 命令安装，使用 npm 或 yarn 都会报错。
使用 npm install 命令报错：
使用 yarn 命令报错：
使用 pnpm install 命令成功安装：
3、启动 sourceMap
当我们执行 npm run dev 命令时，会执行 scripts/dev.js 文件
执行完成后，会在vue目录下生成dist文件夹。
我们来看看 scripts/dev.js 文件中 sourceMap 的配置:
启动 sourceMap
在 build 函数执行时，sourceMap 默认传入 ，即启动 sourceMap。在执行 npm run dev 命令时，会在vue目录下的dist文件夹生成 vue.global.js 和 vue.global.js.map 两个文件，表示已经开启了 sourceMap：
那么在调式时可以看到 packages 目录下的源码：
不启动sourceMap
如果在 build 函数执行时，sourceMap 传入 false，表示不启动 sourceMap，在执行 npm run dev 命令时，在vue目录下的dist文件夹只会生成 vue.global.js 文件：
在调式时无法看到 packages 目录下的源码：
4、调式源码
在启动了 sourceMap 之后，就可以调式源码了。
4.1 静态页面调试源码
在浏览器中直接打开 vue/examples 目录下的静态页面，在需要打断点的地方打上断点，即可对源码进行断点调试。如下图：
4.2 创建本地服务调试
利用 vscode 的 live server 插件，创建本地服务。
在 vscode 上安装 live server 插件成功后，在右下角有一个 Go Live 的提醒，点击它就能打开当前文件并放到它创建的服务器上了。
或者也可以文件右键菜单，选择 Open with Live Server 命令：
利用live server在浏览器上运行打开examples/composition/todomvc.html文件，在需要打断点的地方打上断点，即可对源码进行断点调试。如下图：
4.3 手动debugger
4.1 和 4.2 这两种方式都是在浏览器上打断点进行调试，除此之外，还可以在代码中直接写 debugger 进行源码调式。比如我们在 packages/runtime-dom/src/index.ts 文件的createApp 函数前面写上 debugger：
在浏览器运行HTML页面，就会马上进入debugger模式，直接定位到刚刚我们写有 debugger 的地方：
结语
至此，我们就可以愉快地调试vue3的源码了。
