先查source map是否真生成：启动服务后在Chrome Sources面板展开webpack://，必须看到真实.vue文件而非仅app.js；若无，则检查vue.config.js中devtool是否被覆盖为'eval'或删除，Vite项目需确认build.sourcemap为true。

断点设了但不生效，先查 source map 是否真生成

绝大多数“红点灰掉”“点击没反应”“命中后显示 Unbound breakpoint”的情况，根源都在 source map 没正确生成或加载。Vue CLI 默认 dev 模式下 devtool: 'source-map' 是开启的，但升级到 Vue CLI 5+ 或手动改过 vue.config.js 后常被覆盖成 'eval' 或直接删掉。

• 启动 npm run serve 后，打开 Chrome DevTools → Sources 面板 → 展开 webpack://，必须能看到真实的 .vue 文件（如 /src/components/HelloWorld.vue），而不是只有 app.js、chunk-xxx.js
• 如果看不到 .vue 文件，检查 vue.config.js 是否显式写了：

  module.exports = {
    configureWebpack: config => {
      if (process.env.NODE_ENV === 'development') {
        config.devtool = 'source-map';
      }
    }
  };

• Vite 项目则确认 vite.config.ts 中 build.sourcemap 为 true（开发模式默认已开，但若改过 build 配置可能被关）
• 顺手检查生成的 index.html 里是否引用了 .map 文件（如 <script src="/js/app.js.map"></script>），没有就说明构建环节失败

Remote URL mapping 配不匹配，断点永远找不到源文件

WebStorm 不靠文件名猜路径，它靠你手动配置的 Remote URL 映射去把浏览器里运行的 webpack:///src/components/Button.vue 对应回你本地的 /Users/you/project/src/components/Button.vue。配错一个字符（比如斜杠方向、大小写、多/少一个 /），断点就失效。

• Local path 填你本地 src 目录的**绝对路径**（Windows 也用正斜杠 /，别用反斜杠 \），例如：/Users/you/my-vue-app/src
• Remote URL 必须填 webpack:///src（不是 http://localhost:8080/src，也不是 /src）
• 如果用了别名（如 @/utils），额外加一条映射：Local path 填 /Users/you/my-vue-app/src/utils，Remote URL 填 webpack:///@/utils
• 配置入口在 WebStorm → Preferences → Debugger → JavaScript → Remote URLs → Remote URL Mapping

调试配置选错类型，根本连不上浏览器

Vue 项目不能直接 Debug 单个 .vue 文件，也不能用 Node.js 配置跑前端页面——必须用 JavaScript Debug 类型，并且确保服务已提前运行。

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

• 先在终端或 WebStorm 的 npm 工具窗口中执行 npm run serve（或 npm run dev），拿到实际地址（如 http://localhost:5173/）
• 再新建 Run Configuration → 点 + → 选 JavaScript Debug → URL 填上面拿到的完整地址（含端口）
• Browser 选 Chrome，并确保已安装 JetBrains IDE Support 插件（ID: hmhgeddbohgjknpmjagkdomcpobmllji）
• 不要勾选 “Before launch” 里的 npm script 自动启动——因为 Vue 启动慢，WebStorm 会超时；务必手动先起服务，再点 Debug 图标

断点打在 <script setup> 里没反应？检查编译输出结构

Vue 3 的 <script setup> 编译后逻辑会注入到组件 render 函数附近，断点位置容易偏移。WebStorm 有时无法准确将源码行映射到生成代码的对应位置，尤其在使用组合式 API + TypeScript 时更明显。

立即学习“前端免费学习笔记（深入）”；

• 优先把断点打在 setup() 函数内部（非 setup 语法糖），或 onMounted、watch 等钩子函数里，稳定性更高
• 如果必须在 <script setup> 打断点，尝试在语句末尾加分号，避免 WebStorm 把多行解析为单条表达式
• 临时加一句 debugger; 作为兜底，它会在 Chrome DevTools 里强制中断，再切回 WebStorm 查变量
• 确认 tsconfig.json 中 "sourceMap": true 已启用，否则 TS 编译层就断链了

真正卡住人的往往不是某一步操作不会，而是 source map 和 Remote URL 这两处配置同时出错，还互相掩盖问题。建议先在 Sources 面板确认 webpack:// 下有真实 .vue 文件，再核对 mapping 路径是否一字不差——其余步骤都是水到渠成。