必须启用sourceMap才能调试Vue3源码，否则WebStorm无法映射压缩代码到src下的原始文件，断点将失效；需在vite.config.ts、vue.config.js或tsconfig.json中正确配置sourceMap，并通过Node.js运行配置接管vite dev或vue-cli-service serve进程，同时为Chrome启用--remote-debugging-port。
Vue3项目必须启用 sourceMap 才能调试源码
不生成 sourceMap，WebStorm 就无法把浏览器里运行的压缩/编译后代码映射回 src/ 下的原始 .vue 或 .ts 文件，断点会失效或跳转到错误位置。
检查方式很简单：打开 Chrome 开发者工具 → Sources 面板 → 展开左侧文件树，如果能看到 webpack:// 或 vite:// 下有清晰的项目目录结构（如 src/App.vue），说明 sourceMap 已生效；如果只看到一堆 chunk-xxx.js，就是没配对。
- Vite 项目：确认
vite.config.ts中未禁用server.sourcemap（开发环境默认开启），生产环境若需调试可显式加build: { sourcemap: true } - Vue CLI 项目：在
vue.config.js中设置configureWebpack: { devtool: 'source-map' } - TypeScript 项目：确保
tsconfig.json的"sourceMap": true在compilerOptions中已启用
WebStorm 调试配置必须指向真实启动命令
直接用 WebStorm 内置的 “JavaScript Debug” 配置去调试 Vue3 项目基本无效——它只会加载 HTML 并停在空闲状态，根本不会触发 Vue 的初始化逻辑。
正确做法是复现你在终端里实际执行的启动命令，让 WebStorm 以 Node.js 进程方式接管。
立即学习“前端免费学习笔记（深入）”；
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 对 Vite 项目：新建 Node.js 运行配置，
JavaScript file填node_modules/vite/bin/vite.js，Application parameters填dev - 对 Vue CLI 项目：填
node_modules/@vue/cli-service/bin/vue-cli-service.js，参数填serve - 务必勾选
Node parameters中的--inspect-brk，否则断点可能在 Vue 初始化前就错过了 - Working directory 必须设为项目根目录，否则路径解析失败
断点打在 setup() 或组合式 API 函数里才有效
在 <script setup> 中直接写 const count = ref(0) 是无效断点位置——这段代码会被 Vite/Vue 编译器提前处理成渲染函数调用，原始行号已丢失。
真正能停住的地方是执行时上下文明确、未被内联的逻辑入口：
-
onMounted(() => { debugger })—— 可靠，且能观察 DOM 挂载后状态 - 自定义组合式函数内部，比如
useUserStore()的第一行 -
defineProps和defineEmits的返回值使用处（如解构后赋值） - 避免在
ref()、computed()等响应式声明语句上设断点，它们通常被编译为静态初始化，不进入调试流程
Chrome 浏览器必须启用远程调试协议
WebStorm 调试依赖 Chrome 的 --remote-debugging-port 接口通信。默认情况下，新版 Chrome 启动时不开放该端口，会导致 WebStorm 显示 “Cannot connect to the target”。
解决方法不是改 WebStorm 设置，而是改 Chrome 启动参数：
- 在 WebStorm → Settings → Tools → Web Browsers → Chrome，找到 “Chrome browser arguments” 输入框
- 填入：
--remote-allow-origins=*和--remote-debugging-port=9222（端口号可任选，但需与 WebStorm Debug 配置中一致） - 重启 Chrome，再点击 WebStorm 的 Debug 按钮，否则断点永远不会命中
- 注意：这个设置仅影响 WebStorm 启动的 Chrome 实例，不影响你手动打开的浏览器窗口
vite dev 进程被 Node.js 调试器接管，所有后续的模块加载、组件实例化、响应式追踪都会暴露在调试器视野里——但前提是，你得让这个进程真正跑起来，而不是只打开一个空 HTML。 
