怎么用断点调试来学习源码。其实这个事儿吧，真没啥特别玄乎的，道理就那个道理。
你要想通过断点调试去研究源码，首先你得拿到两个东西：一个是它的打包结果，另一个是源码地图（Source Map）。为啥呢？因为现在很多库发布出去的都是压缩过的东西，根本没法读，更别说调试了。源码地图就是一个映射文件，能把压缩后的代码对应回原始源码的位置。有了这俩，你就能调试了。
那怎么拿到这两个东西？方法其实不固定。你可以去 GitHub 把源码 clone 下来，自己打包，生成打包结果和 Source Map；或者你找别人给你发一份也行，只要你有这两个文件，就能开始调试。
调试的话一般有两种方式：一个是在浏览器里调试，另一个是在 VS Code 里调试。我这里也没人给我发现成的，那我就自己动手，从 Vue 的仓库里打包一份吧。
我先找到 Vue 3 的源码仓库，进去之后找到 core 部分，直接下载下来，解压，然后拖到 VS Code 里面。
接下来第一步，安装依赖。你得先看看这个项目用的是什么包管理工具，比如 Vue 这里用的是 pnpm，那我也用 pnpm 来安装依赖：
pnpm install
依赖装好之后，就可以打包了。一般这种项目都会在 package.json 里面写好打包命令。比如你看，这里有个 dev 命令，我们就运行：
pnpm run dev
打包完成之后，你在目录下就能找到打包出来的 JS 文件和对应的 .map 文件（也就是源码地图）。如果你想要其他格式的打包结果，比如 ESM 格式，那就换一个命令，比如：
pnpm run dev-esm
这样也会打包出对应的文件和 Source Map。
好了，现在你有了打包结果和源码地图，接下来就能调试了。
如果你要在浏览器里调试，很简单。你新建一个 HTML 文件，用 script 标签引入刚才打包出来的 JS 文件（如果是 ESM 方式，就用 type="module"）。比如：
<script type="module">
import { reactive } from './dist/vue.esm-browser.js'
const obj = reactive({ count: 0 })
console.log(obj)
</script>
然后用 Live Server 或者随便什么方式打开这个页面。打开开发者工具，进入 Sources 面板，这里你会看到一个来源文件列表，里面其实就包含了通过 Source Map 还原出来的原始源码文件结构。
你找到你自己写的入口文件，比如 index.html 里引入的那个 JS，打上断点，刷新页面，代码就会停在那。然后你就可以一步步跟进去了，比如 Step Into（F11）就能进入 Vue 的 reactive 函数，这时候你就会跳转到 Vue 的源码文件里，看到原始代码是怎么执行的。
不过说实话，你要是完全没读过源码，直接靠断点调试去跟踪，很容易跟晕。一个函数套一个函数，跟六七个小时可能还是一头雾水。所以这种方式其实更适合你已经对源码有了一定了解，想看看某些细节是怎么实现的。
当然，在 Node.js 环境里调试也是类似的。你写一个 JS 文件，用 import 引入打包后的模块，然后在 VS Code 里面打上断点，选择“运行和调试”，用 Node.js 环境执行，一样可以进入源码跟踪。快捷键（比如 F11）和浏览器里差不多，也能看到作用域、变量值等等。
好了，差不多就是这样。你要是想玩玩调试，可以试一试，但千万别指望光靠调试就能看懂源码——最好还是结合系统学习，才是正路子。
好啦，就说这么多吧。
