vue-cli - Vue Devtools在Vite项目下，如何正常调试？

Question

想学习一下vue-devtools 打开组件的功能，vue-cli项目可以正常断点到launch-editor-middleware中，vite项目却不支持，这些chunks下的js是什么情况。。。
vue-cli正常断点

vite进不去断点

如何在vite下进入断点呢，还是说vite下vue-devtools 打开组件的功能走的不是这块逻辑

Answer 1

在 Vite 项目中使用 Vue Devtools 进行调试时，通常不需要像 Vue CLI 项目那样依赖 launch-editor-middleware 这样的中间件。Vite 是一个现代的构建工具和开发服务器，它使用原生 ES 模块，因此其构建和开发流程与 Vue CLI 项目有所不同。

Vue Devtools 主要用于检查 Vue 组件的状态、事件、props 和其他相关信息。然而，直接在源码级别调试 Vue Devtools 的内部功能（比如打开组件的代码）可能并不直接支持，因为 Vue Devtools 是一个浏览器扩展，其内部逻辑与你的 Vite 项目是分开的。

不过，如果你想要在 Vite 项目中正常地使用 Vue Devtools 进行调试，你可以遵循以下步骤：

1. 确保 Vue Devtools 已安装并启用：在 Chrome 或 Firefox 等浏览器中安装 Vue Devtools 扩展，并确保它已启用。
2. 检查你的 Vite 配置：确保你的 Vite 项目正确配置了 Vue 插件。对于 Vue 3，你通常需要在 vite.config.js 或 vite.config.ts 文件中添加 @vitejs/plugin-vue。
3. 在 Vue 组件中设置断点：你可以直接在 Vue 组件的源码中设置断点，并使用浏览器的开发者工具进行调试。Vue Devtools 允许你检查组件的状态，但实际的调试（如单步执行、查看变量值等）通常是通过浏览器的开发者工具完成的。
4. 理解 Vite 的构建过程：Vite 通过原生 ES 模块来提供更快的冷启动和热模块替换（HMR）。这意味着 Vite 项目中的代码在浏览器中是以不同的形式（通常是经过转换和优化的）运行的。因此，你可能无法直接在 Vite 项目的构建输出中找到与源码完全对应的代码行。
5. 检查 Source Maps：确保你的 Vite 配置生成了有效的 source maps。Source maps 是将构建后的代码映射回原始源码的文件，它们对于在浏览器中进行调试至关重要。在 Vite 中，source maps 通常是默认启用的。
6. 使用 Vite 的调试功能：Vite 提供了一些内置的调试和诊断工具，如 --force 标志（强制 Vite 重新解析所有模块）和 --debug 标志（在控制台中输出更多调试信息）。这些工具可以帮助你解决在 Vite 项目中遇到的问题。

至于你提到的 "chunks 下的 js" 的情况，这通常是指 Webpack 中的一个概念，Webpack 会将你的代码拆分成多个块（chunks），并在运行时按需加载这些块。然而，Vite 使用原生 ES 模块进行代码拆分和动态导入，因此其行为与 Webpack 有所不同。在 Vite 项目中，你通常不需要直接处理 "chunks" 的概念。