源码调试环境的搭建

作者：陈川阅读数：31345人阅读分类： Vue.js

环境准备

搭建Vue3源码调试环境需要准备以下工具：

Node.js（建议16.x以上版本）
pnpm（Vue3官方推荐的包管理工具）
Chrome浏览器
IDE（推荐VSCode）

首先全局安装pnpm：

npm install -g pnpm

源码获取

从GitHub克隆Vue3源码仓库：

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

切换到稳定版本分支（以3.4.x为例）：

git checkout v3.4.0

安装依赖：

pnpm install

构建配置

Vue3使用rollup进行构建，我们需要修改构建配置以生成sourcemap。编辑rollup.config.js文件，在所有输出配置中添加：

sourcemap: true,

示例修改后的输出配置片段：

output: {
  file: `packages/${pkg}/dist/${name}.js`,
  format: 'es',
  sourcemap: true,  // 新增
  banner
}

执行构建命令：

pnpm run build

调试示例项目

在packages/vue/examples目录下创建调试用的HTML文件debug.html：

<!DOCTYPE html>
<html>
<head>
  <title>Vue3 Debug</title>
  <script src="../../dist/vue.global.js"></script>
</head>
<body>
  <div id="app">{{ message }}</div>
  <script>
    const { createApp, ref } = Vue
    
    createApp({
      setup() {
        const message = ref('Hello Vue3!')
        return { message }
      }
    }).mount('#app')
  </script>
</body>
</html>

Chrome调试配置

在VSCode中打开项目，创建.vscode/launch.json文件：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Debug Vue3",
      "url": "http://localhost:8080/packages/vue/examples/debug.html",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "skipFiles": ["node_modules/**"]
    }
  ]
}

安装VSCode插件"Debugger for Chrome"
启动本地服务器：

npx serve -p 8080

断点调试技巧

在源码中设置断点，推荐关键位置：

响应式系统核心packages/reactivity/src/effect.ts

export function triggerEffects(
  dep: Dep | ReactiveEffect[]
) {
  // 在此处设置断点观察依赖触发
  for (const effect of isArray(dep) ? dep : [...dep]) {
    if (effect !== activeEffect || effect.allowRecurse) {
      effect.scheduler ? effect.scheduler() : effect.run()
    }
  }
}

组件挂载过程packages/runtime-core/src/renderer.ts

const mountComponent: MountComponentFn = (
  initialVNode,
  container,
  anchor,
  parentComponent,
  parentSuspense,
  isSVG,
  optimized
) => {
  // 组件挂载断点
  const instance = (initialVNode.component = createComponentInstance(
    initialVNode,
    parentComponent,
    parentSuspense
  ))
  // ...
}

自定义构建

如果需要调试特定功能模块，可以修改scripts/build.js中的构建配置。例如只构建reactivity模块：

const targets = ['reactivity']  // 修改为只构建reactivity

然后执行：

node scripts/build.js

测试用例调试

Vue3使用jest进行单元测试，可以直接调试测试用例：

在packages/reactivity/__tests__/effect.spec.ts中选择测试用例
添加debugger语句

it('should observe basic properties', () => {
  debugger  // 调试断点
  let dummy
  const counter = reactive({ num: 0 })
  effect(() => (dummy = counter.num))

  expect(dummy).toBe(0)
  counter.num = 7
  expect(dummy).toBe(7)
})

在VSCode中配置jest调试：

{
  "type": "node",
  "request": "launch",
  "name": "Debug Jest Tests",
  "program": "${workspaceFolder}/node_modules/jest/bin/jest",
  "args": ["--runInBand"],
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen",
  "disableOptimisticBPs": true
}

源码映射技巧

有时需要跟踪编译后的代码到源码，可以在浏览器开发者工具中：

打开"Sources"面板
在左侧导航中找到webpack://或src目录
右键选择"Map to file system resource..."
定位到本地源码目录

性能分析

在调试过程中可以结合Chrome的性能分析工具：

在packages/runtime-core/src/scheduler.ts中标记任务队列

function flushJobs() {
  performance.mark('flushJobs-start')  // 添加性能标记
  // ...
  performance.mark('flushJobs-end')
  performance.measure('flushJobs', 'flushJobs-start', 'flushJobs-end')
}