拉取源码

首先从git上拉取vue3的源码，vue3源码地址github.com/vuejs/core

git clone https://github.com/vuejs/core.git

如果代码拉不下来可以尝试使用ssh协议拉取

下面是拉取下来的vue3项目列表，需要关注的是入口文件的位置在packages/vue/src/index.ts

安装node和pnpm

vue3对node和pnpm的版本有要求，node版本要大于等于16，pnpm版本要大于等于7

安装node，可以去node中文网下载合适的node进行安装，安装好后，在控制台使用node -v测试一下

node -v
v16.15.0

安装pnpm

npm install pnpm -g

安装好后，在控制台使用pnpm -v测试一下

pnpm -v
7.1.0

安装项目依赖

cd到项目根目录下，执行pnpm install安装项目对应的依赖，注意这里是pnpm，而不是npm，使用npm install会报错

pnpm install

启动项目

依赖安装好后，使用npm run dev启动项目

npm run dev

之后会发现packages/vue文件夹下面多了一个dist文件夹，里面有一个vue.global.js文件，其实就是开发版的vue3.0，我们的目的就是调试这个文件

我们可以参考packages/vue/examples下面的html文件，写自己的测试文件，然后引入vue.global.js进行测试

myVue.html文件内容，核心是引用了npm run dev生成的vue.global.js

<script src="../../dist/vue.global.js"></script>
<div id="counter">
  Counter: {{ counter }}
</div>
<script>
  const Counter = {
    data() {
      return {
        counter: 0
      }
    }
  }
  Vue.createApp(Counter).mount('#counter')
</script>

通过浏览器打开这个html页面

单步调试

我们可以在vue3 入口文件packages/vue/src/index.ts 下面打个断点，记得npm run dev一定要开启

保存文件，然后我们会发现，vue.global.js重新构建了

之后刷新浏览器，就可以愉快的进行单步调试了

之后想调试vue3项目中的其他文件也是类似操作