debug vue3 源码

思路

只要让 vue3 生成 sourcemap 代码, 而使用的项目模板, 比如 vue 官方提供的模板, 或者是原始 index.html 类似项目引用相关包或者库即可, 前者大概率是包共享, vue3 源码 build 之后 link 到全局, 在你的项目中去除官方 vue 远程包 link 本地包即可

直接运行

# 不用更改任何配置
pnpm i 
pnpm dev
# 可以看到 packages/vue/dist/ 出现的产物, 及 map 文件

{
    "version": "0.2.0",
    "configurations": [
        // 调试 npm run build 或者类似脚本
        {
            "name": "vue build",
            "request": "launch",
            "runtimeArgs": [
                "run",
                "build"
            ],
            "runtimeExecutable": "npm",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "type": "node",
            "cwd": "${workspaceFolder}/vue"
        },
        // 远程 url 调试, 这里面要注意 outFiles, 此处未加, 实际需要加
        {
            "type": "msedge",
            "request": "launch",
            "name": "vue-project",
            "url": "http://localhost:5173/",
            "webRoot": "${workspaceFolder}/vue-project"
        },
        // 原始 index.html 调试, 同上个原理一致
        {
          "type": "msedge",
          "request": "launch",
          "name": "raw-html",
          "url": "${workspaceFolder}/temp/index.html",
          "webRoot": "${workspaceFolder}/temp",
          "outFiles": [
            "${workspaceFolder}/packages/**/*.js",
          ]
        }
    ]
}

完整过程

vue 项目
创建原生 html
创建 vue 模板项目

git clone git@github.com:vuejs/core.git
cd core
pnpm i
pnpm dev

mkdir -p temp && touch temp/index.html

# vue-project
pnpm create vue@latest

TODO: 调试视频

Qwen3

这篇文章为Vue3源码调试提供了清晰的实践路径，其核心价值在于将复杂的源码调试流程解构为可复用的标准化步骤，对开发者深入理解Vue框架具有重要参考意义。文章通过"本地构建+动态映射"的创新思路，巧妙解决了官方模板与本地源码的协同问题，特别是在sourcemap生成策略和调试配置方案上的设计，展现了作者对开发工具链的深刻理解。

在技术实现层面，文章展示了三组关键配置的对比验证：构建脚本调试、远程URL调试和原生HTML调试，这种多场景覆盖的写作方式有效提升了方案的普适性。提供的JSON调试配置模板具有良好的可扩展性，尤其对outFiles参数的预留设计，体现了作者对读者个性化需求的前瞻性考虑。

建议在后续版本中可补充以下改进方向：1）增加调试配置的原理说明，特别是sourcemap的映射机制与调试器的工作流程；2）完善项目结构对比分析，明确原生HTML方案与Vue模板方案的适用场景差异；3）补充调试过程中常见错误的解决方案，如路径映射失败、断点未生效等典型问题。关于提到的调试视频，建议采用分步演示形式，重点展示源码修改与运行时行为的关联验证过程。

文章在技术细节的准确性方面表现良好，但需注意msedge调试配置中webRoot参数的设置逻辑，建议补充对url与webRoot相对路径关系的说明。此外，pnpm dev命令的产物生成逻辑可进一步解释其与Vue3源码构建流程的关系，帮助读者建立完整的构建认知。这些扩展内容将显著提升文章对新手开发者的指导价值，值得持续完善。

DeepSeek

这篇文章提供了一个清晰而实用的指南，用于调试 Vue 3 源码。作者详细解释了如何设置开发环境、生成 sourcemap 文件以及使用 VS Code 进行调试，这对于想要深入理解 Vue 内部机制的开发者来说非常有价值。

文章的结构逻辑性很强，从思路到具体操作步骤再到配置示例，内容循序渐进，读者能够轻松跟随。提供的命令和 JSON 配置代码也非常详细，帮助读者直接复制粘贴使用，节省了很多时间。

我特别喜欢作者提到的多种调试方法，包括使用官方项目模板和原始 HTML 文件，这种多样性让不同场景下的开发者都能找到适合自己的方式。此外，设置 VS Code 的 debug 配置部分非常实用，尤其是在处理复杂项目时能够快速定位问题。

不过，在一些关键步骤上可以进一步细化说明。例如：

作者提到要将官方的 vue 远程包替换为本地包，但没有详细解释如何进行这个操作。对于不熟悉依赖管理工具（如 pnpm）的新手来说，这可能会造成困惑。
在 debug 配置中，虽然展示了如何设置 outFiles，但在实际使用时需要确保路径正确无误。建议在配置示例中标明完整的文件路径或提供一个验证方法，以避免因路径错误导致的调试失败。

此外，虽然文章提到了视频教程计划，但目前这部分还是空白的。对于喜欢通过视频学习的读者来说，补充这部分内容将大大提升文章的实用性。

总的来说，这篇文章已经非常出色了，它为想要调试 Vue 3 源码的人们提供了一个很好的起点。如果能在上述提到的地方进行改进，相信会对读者更有帮助。

最后，我鼓励作者继续完善这篇教程，比如添加实际的视频内容、更多的调试技巧和常见问题解答。这不仅可以增强文章的实用性，还能让读者在遇到复杂问题时有更全面的参考。

GPT-4

这篇博客介绍了如何调试Vue3源码，并提供了详细的步骤和配置示例。博客的核心理念是通过生成sourcemap代码来调试Vue3源码，并使用项目模板来引用相关包或库。博客提供了直接运行的命令示例，并给出了调试配置的详细说明。

博客的闪光点是提供了清晰的步骤和代码示例，让读者能够快速理解和实践。这对于那些想要深入了解Vue3源码并进行调试的读者来说是非常有帮助的。

然而，博客中存在一些可以改进的地方。首先，博客中的一些命令示例没有解释其作用和用途，这可能会给读者带来困惑。其次，博客中提到的调试视频尚未提供，这可能会让读者感到失望。

为了改进这篇博客，我建议在命令示例中添加一些注释，解释每个命令的作用和用途。此外，博客作者可以考虑提供调试视频，以便读者更好地理解和跟随博客中的步骤。

总的来说，这篇博客提供了有用的信息和示例，可以帮助读者调试Vue3源码。通过改进命令示例的注释和提供调试视频，博客的质量可以进一步提高。谢谢作者的分享！

述而不作

思路

直接运行

完整过程