通常，如果我们对一个库很感兴趣，我们就想去它的源代码看看，但是调试很难打消了很多人看源码的热情。
而调试 Vue 3 的源码简直可以用超级简单来形容，这也让我对 Vue 3 的好感度飙升。今天我们就来看看怎么调试 Vue 3 的源码。
首先我们要先下载它的源码
git clone https://github.com/vuejs/vue-next.git
到根目录安装依赖
yarn
我们今天想在本地调试的是 Vue 3 如何编辑模板语法的，Vue 3 源代码里面有个包，叫做template-explorer，来帮助我们了解 Vue 3 中模板的实时编译结果。
安装完依赖运行
yarn dev-compiler
成功启动后，我们点击打开这个链接：点我
我们就发现成功运行了一个在线模板调试器，如何你想知道你写的 html 会在 Vue 3 中编译成什么，就可以在这里测试。
为了调试这段代码，我们可以打开控制台，然后安装如图所示打开文件打断点就好了。
你可以在任意你喜欢的地方打断点，但是你可能会发现由于这个文件太大了，Chrome 的断点往往不能停在你想要的位置，这个时候怎么办呢？你需要本地生成这个文件，然后在这个文件里打断点。
我们到项目根目录，运行下面这个命令
yarn build template-explorer
接下来你就会发现根目录下的 packages/template-explorer/dist/ 下面发现多了一个文件，这个文件就是我们的 template-explorer 的源文件。你可以在想打断点的地方打断点，然后打开本地 packages/template-explorer/ 目录下的 index.html 就好了！
怎么样，你学会了没？
