使用VSCode调试源码 ​

之前发布在掘金，移到 Github 后发现图片直接被 ban 了，emm...

https://juejin.cn/post/7300118821532172303 (后面再把图片移过来把)

1. clone vue3源码到本地 ​

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

2. 安装依赖 ​

使用 vscode 打开 vue3 项目，在项目中的 .github/contributing.md 文件中，我们可以看到Vue官方对源码架构的介绍和对开发的一些介绍。

从 #development-setup 可以知道 Node.js 的版本需要满足 >= 18.12 且 pnpm 的版本需要满足 >= 8，并且 Vue3 的依赖管理是基于 pnpm 的，如果没有就执行 npm i pnpm -g 安装一下。

安装依赖：

pnpm install

3. 运行项目 ​

#scripts 介绍了vue3提供的打包

看到 nr dev (需要安装 ni npm 包)，该命令等价于 npm run dev

执行该命令:

# 加上 -s 参数会生成对应的 source map 文件，用于 debug 调试
npm run dev -s

然后再 packages/vue 目录下会看到生成了 dist 目录，这就是打包后的vue3源码，vue.global.js 文件可以直接用于 HTML 中

4. 跑个 demo ​

在 packages/vue/examples 目录下，有很多官方提供的示例，可以看到它们都是一些 HTML 文件，并且都引用了 vue.global.js 文件

<script src="../../dist/vue.global.js"></script>
<div id="demo">...</div>

新建 debug 目录，在该目录下新建 hello.html，内容如下：

<script src="../../dist/vue.global.js"></script>
<div id="app">
    <div>{{ msg }}</div>
</div>
<script>
const { createApp } = Vue
createApp({
    setup() {
        return {
            msg: 'Hello Vue.js'
        }
    }
}).mount('#app')
</script>

执行 npm run serve，会在本地开启一个 http 服务：

Serving!                                       
      - Local:    http://localhost:60741             
      - Network:  http://192.168.152.195:60741       
      This port was picked because 3000 is in use.   
      Copied local address to clipboard!

在浏览器打开该地址，可以看到:

5. 使用 VSCode debug 调试 ​

添加配置，选择 Chomre: Launch，然后修改配置的 name 和 url

"configurations": [
    {
      "name": "Hello Vue.js",
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:60741", // 上面你本地起的 http 服务地址
      "webRoot": "${workspaceFolder}"
    },
    ...
]

打一个断点，点击开始调试

打开 hello.html 文件

可以看到，成功进入断点

接下来就可以愉快的调试源码了！