你可能从未使用过的调试 Vue3 (开源项目) 源码的方式-CSDN博客

本文链接：https://blog.csdn.net/u012384510/article/details/129700957

本文介绍了调试Vue3源码的两种方法：使用Vitest VSCode扩展进行测试用例调试，以及通过生成source map进行源码调试。详细讲解了设置过程和相关工具的使用，包括ni、Vitest扩展、sourcemap的生成及应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 前言

大家好，我是若川。我倾力持续组织了一年多源码共读，感兴趣的可以加我微信 lxchuan12 参与。另外，想学源码，极力推荐关注我写的专栏《学习源码整体架构系列》，目前是掘金关注人数（4.7k+人）第一的专栏，写有20余篇源码文章。

2. 看开源项目学习是怎样的步骤？

看一个开源仓库，第一步一般是看 README.md 和 contributing.md 贡献指南文档。

README.md 中一般有提到贡献指南文档的链接的。贡献指南文档就是为了让别人参与项目贡献。

而贡献指南写了很多关于参与项目开发的信息。比如怎么跑起来，项目目录结构是怎样的。怎么投入开发，需要哪些知识储备等。

第二步的克隆下来。按照贡献指南文档，把项目跑起来。

3. 如何调试 `vue3` 源码

我们这次来学调试 vue3 源码，看 vue3 源码^[1]仓库 contributing.md^[2]。

contributing.md 部分内容

Development Setup

You will need Node.js^[3]version 16+, and PNPM^[4]version 7+.

We also recommend installing ni^[5] to help switching between repos using different package managers. ni also provides the handy nr command which running npm scripts easier.

After cloning the repo, run:

$ pnpm i # install the dependencies of the project

关于上方提到的 ni，我曾经写过源码文章，可供参考。

从贡献指南中，我们可以得知一些信息，那么先来克隆项目安装依赖。

git clone https://github.com/vuejs/core.git
cd core
# 安装依赖
pnpm i

4. 使用 vitest vscode 扩展的调试方式

安装vitest vscode 扩展链接^[6]、vitest vscode 扩展 github^[7]

安装vitest-runner vscode 扩展链接^[8]、vitest-runner vscode 扩展 github^[9]

vitest-vscode 安装

debugger.png

debugger-test.png

// packages/vue/__tests__/index.spec.ts
import { vi } from 'vitest'
import { EMPTY_ARR }&nb

你可能从未使用过的调试 Vue3 (开源项目) 源码的方式

2. 看开源项目学习是怎样的步骤？

3. 如何调试 vue3 源码

4. 使用 vitest vscode 扩展的调试方式

3. 如何调试 `vue3` 源码