WebStorm调试JavaScript需四步初始化：启用JavaScript Debugger插件、确认内置服务器端口（如63342）未被占用、为TypeScript/Vue项目正确配置source map、安装并授权Chrome的JetBrains IDE Support插件，缺一将导致断点失效或连接失败。
WebStorm 调试功能开箱即用，但首次使用前必须完成几项关键初始化设置，否则断点不生效、Chrome 连不上、TypeScript 变量显示为 undefined 是大概率事件。
调试插件是否启用
WebStorm 内置的 JavaScript Debugger 插件默认启用，但某些重装或企业版定制环境可能被禁用。它不是可选功能，而是调试前端代码的底层依赖。
- 按
Ctrl+Alt+S（Windows/Linux）或Cmd+,（macOS）打开 Settings - 进入
Plugins→ 切换到Installed标签页 - 搜索
JavaScript Debugger，确认其状态为 Enabled（右侧开关为蓝色） - 若已禁用，勾选后重启 WebStorm —— 不重启不会生效
内置 Web 服务器端口是否冲突
WebStorm 调试 HTML/JS 时依赖内置 Web 服务器（http://localhost:63342），如果该端口被其他进程（如另一个 WebStorm 实例、旧版 JetBrains 工具、Python SimpleHTTPServer）占用，调试会静默失败，浏览器打不开或报 ERR_CONNECTION_REFUSED。
- Settings →
Tools→Web Browsers and Preview - 在
Built-in server port中修改为一个明确未被占用的端口，例如63343或8081 - 改完后无需重启 IDE，但需重新启动当前调试会话
- 验证方式：直接在浏览器访问
http://localhost:63343，应看到 WebStorm 的“欢迎页面”或项目根目录文件列表
TypeScript 和 Vue/React 项目必须配 source map
断点设在 .ts 或 .vue 文件里却停在编译后的 app.js 行上，或者红点变灰、提示 Unbound breakpoint，90% 是因为 source map 没正确生成或没映射到 WebStorm。
- 确保构建工具实际输出了
.map文件：检查 dist/ 或 build/ 目录下是否有同名.js.map - Vue CLI 项目：在
vue.config.js中显式写入devtool: 'source-map'（不要只靠默认值） - Vite 项目：确认
vite.config.ts中build.sourcemap为true，且开发服务器启动时控制台有sourcemap enabled提示 - WebStorm 端：Settings →
Languages & Frameworks→JavaScript→Debugging→ 勾选Enable source maps for JavaScript和Enable source maps for TypeScript
Chrome 联调前必须装插件并授权
点击 Debug 'index.html' 后 Chrome 打开空白页、地址栏显示 about:blank，或 WebStorm 底部 Debug 面板一直显示 “Waiting for connection…”，基本是插件缺失或权限未放行。
- 前往 Chrome Web Store 安装官方插件：
JetBrains IDE Support（注意名称精确匹配，勿装仿冒品） - 安装后右键插件图标 →
Manage extensions→ 开启Allow access to file URLs - WebStorm 设置中：Settings →
Tools→Web Browsers→ 选中 Chrome → 勾选Use custom Chrome executable（即使路径自动填好也建议手动勾上） - 首次调试时，Chrome 可能弹出“允许此网站调试”的提示，必须点
Allow，否则后续所有断点都失效
真正容易被忽略的是 Remote URL mapping —— 它不报错，但一旦配错，断点就永远“看不见”源文件。比如 Vue 项目里 Local path 填了 C:\project\src，Remote URL 却填成 /src 或 http://localhost:8080/src，而正确值必须是 webpack:///src。这个映射不对，调试器连文件都找不到，更别说停点了。
