今天组内技术分享，有位大佬分享了一个 debug template解析的官方方式，debug 得很优雅，本篇文章分享下这个方式，这个方式在 vue/core 中有介绍
像是 vue3 的 github 仓库我们找到 contribution 那儿，进入到
然后来到 Development Setup 侧，跟着说明执行指令即可
pnpm i
在执行之前一定要规范自己的 node 版本是否和 .node-version 的版本一致
用 pnpm 安装完依赖后，直接
pnpm run dev-compiler
然后打开浏览器，输入 url：
http://localhost:3000/packages-private/template-explorer/#eyJzcmMiOiI8ZGl2PkhlbGxvIFdvcmxkPC9kaXY+Iiwib3B0aW9ucyI6e319
这其实就是 template playground ，vapor 其实也有一个 这样的 playground ，后续 debug vapor 应该也可以采用这个方式
随后我们可以自己在 本地启动的 playground 更改 template 代码，比如我希望看 v-if 如何被解析的，我就在 template 写一个 v-if demo
随后定位到 compiler-core 这个 package 中插入 debugger，就可以随意在浏览器中调试
这个调试方法相比较自己启动一个 vue 项目然后 在 plugin 导入那儿打一个断点会更加专注
更加专注于 vue/package 中的代码逻辑实现，并且这种方式看到的是 ts ，你可以很清晰地看到 interface 结构
当然，若你希望看到 vite 如何解析 vue 的还是建议用那套方式
另外，debug 源码时，一定要先预测当前 debug 的函数逻辑是否为预期的，因为像是这种大型框架的源码，函数都是层层嵌套，所以可以先观测这个函数的入参，然后直接跳过函数的执行看返回结果，看这个返回结果是否预期
来个 demo
比如 我写了个 v-if ，我们可以先在 package/compiler-core/src/transform.ts 中针对 transform 这个统一的函数插入一个 debugger
随后刷新浏览器界面，进入断点
其实 if 这个指令具体对应着 transformIf 这个函数，这个函数位于 packages\compiler-core\src\transforms\vIf.ts
我们针对这个函数打一个断点，然后阅读 processIf 的具体逻辑
