详细介绍WebStorm调试Vue组件之Debugger工具（超好用）-webstorm-PHP中文网

断点不生效的首要原因是 source map 未启用或 remote url mapping 配置错误；需确认 webpack:// 下可见真实 .vue 文件，并在 vue.config.js 或 vite.config.ts 中显式启用 source map，同时正确配置 webstorm 的 local path 与 remote url（如 webpack:///src）。

详细介绍webstorm调试vue组件之debugger工具（超好用）

断点不生效？先确认 source map 真启用了

WebStorm 里点断点没反应、红点变灰、提示 Unbound breakpoint，90% 是 source map 没真正生效。Vue CLI 默认开发模式下虽设了 devtool: 'source-map'，但一旦你改过 vue.config.js、升级到 Vue CLI 5+、或用了自定义 webpack 配置，就很容易被覆盖或关掉。

验证方式：启动 npm run serve 后，打开 Chrome DevTools → Sources 面板 → 展开 webpack:// → 能否直接看到 .vue 文件（如 src/views/Home.vue）？如果只看到 app.js、chunk-xxx.js，说明 source map 没生成。

Vue CLI 项目：在 vue.config.js 显式加这段（别信“默认已开”）：

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（Windows 用正斜杠 /，别用 \）
Remote URL：必须填 webpack:///src（不是 http://localhost:8080/src，也不是 /src）
若用了别名（如 @/components），额外加一条：Local path 填 src/components，Remote URL 填 webpack:///@/components

Chrome 启动参数不对，Debugger 根本连不上

点击 Debug 后弹出 about:blank 或报错 Unable to connect to debugger，大概率是 Chrome 远程调试协议被拦截了。WebStorm 必须用带调试参数的新进程启动 Chrome，不能复用你日常的浏览器窗口。

Vue-router参考手册

Vue-router参考手册下载

下载

正确做法：

进 Settings → Tools → Web Browsers，选中 Chrome，勾上 Use custom Chrome executable（即使路径默认也建议勾）
在 Chrome 启动参数里加：--remote-allow-origins=* 和 --remote-debugging-port=63342（端口需和 WebStorm 内置 server 端口一致）
不要试图让 WebStorm 复用已有 Chrome 实例——它会新建一个无插件、无书签的干净进程，这是正常行为

Debug 启动前必须先跑起 dev server

和后端调试不同，Vue 项目用的是 webpack-dev-server 或 Vite 的 dev server，不是 WebStorm 自带的内置 server。所以调试必须分两步：先手动或通过 IDE 启动 npm run serve（或 npm run dev），等控制台输出类似 App running at: http://localhost:8080 后，再以 JavaScript Debug 方式启动调试配置。

常见错误：