断点不生效的首要原因是 source map 未启用或 Remote URL mapping 配置错误；需确认 webpack:// 下可见真实 .vue 文件，并在 vue.config.js 或 vite.config.ts 中显式启用 source map，同时正确配置 WebStorm 的 Local path 与 Remote URL（如 webpack:///src）。
断点不生效？先确认 source map 是否真启用
Vue CLI 默认在开发模式下已启用 devtool: 'source-map'，但如果你用的是自定义 webpack 配置、Vite 或手动改过 vue.config.js，很可能被覆盖或禁用。断点点击后没红点、或红点灰掉、或命中时显示“Unbound breakpoint”，基本都卡在这一步。
检查方式：启动 npm run serve 后，打开浏览器开发者工具 → Sources 面板 → 展开 webpack:// → 能否看到真实的 .vue 文件（而非编译后的 .js）？如果只看到一堆 app.js、chunk-xxx.js，说明 source map 没生效。
- Vue CLI 项目：在
vue.config.js显式加这段（尤其升级 Vue CLI 5+ 后）：module.exports = { configureWebpack: config => { if (process.env.NODE_ENV === 'development') { config.devtool = 'source-map'; } } }; - Vite 项目：确保
vite.config.ts中build.sourcemap为true，且开发时默认就带完整 source map，一般无需额外操作 - 检查生成的
index.html里是否引用了.map文件（如app.js.map），没有则配置失败
Remote URL mapping 必须配对，否则断点找不到源文件
WebStorm 无法仅靠文件路径自动匹配浏览器里运行的代码，它依赖 Remote URL mapping 做路径映射。常见现象是：断点设上了，页面也访问了，但调试器完全不暂停——十有八九是这里没对上。
典型配置（以 Vue CLI 默认项目为例）：
立即学习“前端免费学习笔记（深入）”；
-
Local path: 你本地项目根目录下的src文件夹全路径，例如/Users/you/project/my-vue-app/src -
Remote URL: 必须填webpack:///src（不是http://localhost:8080/src，也不是/src） - 注意大小写和斜杠方向：Windows 下路径用正斜杠
/，不要用反斜杠\ - 如果用了别名（如
@/components），需额外加一条映射：Local path填src/components，Remote URL填webpack:///@/components
调试器打不开 Chrome？检查浏览器启动参数和插件权限
WebStorm 调试依赖 Chrome 的远程调试协议，若点击 Debug 后弹出空白页（about:blank）或报错 Unable to connect to debugger，大概率是 Chrome 启动参数或安全策略拦住了。
必须在 WebStorm 设置里配置 Chrome 启动参数：
- 进入
Settings → Tools → Web Browsers - 选中 Chrome，勾选
Use custom Chrome executable（即使路径默认也建议勾上） - 在
Chrome arguments栏粘贴：--remote-allow-origins=*和--remote-debugging-port=9222 - 重启 WebStorm；首次调试时，Chrome 可能会弹出“允许远程调试”提示，点允许
- 确保系统没装多个 Chrome 实例（比如企业版/个人版共存），WebStorm 可能调用错版本
在 <script setup> 里设断点，别点错位置
Composition API + <script setup> 是主流写法，但 WebStorm 对其断点支持有细节差异：直接在 const foo = ref(1) 这行设断点，有时会跳过；而函数内部、响应式副作用（如 watch 回调）、事件处理函数内设断点更稳。
实操建议：
- 避免在顶层响应式声明语句设断点（如
const count = ref(0)、const { data } = useApi()） - 优先在
onMounted、onClick、watch回调、computedgetter 内部设断点 - 如果必须查初始化逻辑，可在
onBeforeMount里加一句console.log('debug')，再在控制台里点进去找对应源码行设断点 - 遇到
Uncaught SyntaxError: Cannot use import statement outside a module报错，说明 WebStorm 尝试把.vue当纯 JS 解析了——退回上一步检查 Remote URL mapping 是否漏配或写错
真正卡住的地方往往不是“怎么设断点”，而是 source map 路径和 Remote URL mapping 之间那层看不见的映射关系——差一个斜杠、少一个 webpack:// 前缀，整个调试链就断了。
