断点失效的根本原因是脚本未加载或调试环境未就绪。需依次检查：script路径404、混合内容被阻、module语法限制；确保用http而非file协议调试；验证动态加载时机、iframe/sw/async影响；确认sourcemap生成与映射正确；并启用webstorm调试插件及chrome ide支持插件。

断点打不中、debugger没反应、控制台报“Script error”或资源 404 —— 这些不是代码写错了，而是脚本根本没加载进页面，调试器连入口都没摸到。

检查 HTML 中 script 标签是否被正确解析

WebStorm 不会主动校验 <script></script> 标签的 src 路径是否真实存在或可访问，它只管你设的断点位置。如果浏览器压根没拉下 JS 文件，后续所有调试动作都无效。

• 打开 Chrome DevTools → Network 面板 → 刷新页面 → 筛选 JS 或按名称搜索你的脚本文件名（如 main.js）
• 确认状态码是 200；若为 404，检查 src 路径是否写错（比如漏了 ./、多了一层 dist/、大小写不一致）
• 若为 blocked:mixed-content，说明你在 https 页面里引用了 http 脚本，浏览器直接拒载
• 若用 type="module"，注意模块脚本默认是严格模式且不支持 document.write，某些老逻辑会静默失败

确认 JavaScript Debug 配置的 URL 能实际访问到该 HTML

很多人右键 index.html → Debug，结果断点灰色不可用。这是因为 WebStorm 默认尝试用 file:// 协议打开，而 Chrome 禁止调试本地文件中的 JS（安全限制）。

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

• 必须用 HTTP 协议：配置 JavaScript Debug 时，URL 字段填的是完整地址，例如 http://localhost:5173/（Vite）、http://localhost:3000/（React Scripts），不能是 file:///path/to/index.html
• 确保该 URL 在浏览器里能正常打开，并且 Network 面板能看到你的 JS 被加载
• 如果项目用的是 WebStorm 内置服务器（如直接跑 http://localhost:63342/），要确认 Settings → Tools → Web Browsers and Preview → Built-in server port 是启用的，且端口未被占用

排查 script 加载时机与执行上下文错位

脚本加载成功 ≠ 调试器能接管。常见于动态插入、延迟加载、iframe 或 Service Worker 场景。

• 用 document.createElement('script') + appendChild 动态加载？确保在插入后监听 onload，而不是立即设断点——脚本可能还没编译
• 脚本在 <iframe></iframe> 里？WebStorm 默认不监听 iframe 上下文，需手动在 Settings → Tools → Debugger → JavaScript → Additional JavaScript Debugging Options 勾选 Debug in iframes
• 用了 Service Worker 缓存 JS？清空缓存或临时禁用 SW（chrome://serviceworker-internals/），否则你改了代码但浏览器还在跑旧版本
• 脚本被包裹在 async 或 defer 中？断点可能在 DOM 尚未就绪时就触发，导致 document.getElementById 返回 null，看起来像“脚本异常”，其实是执行时机问题

验证 sourcemap 是否生效且路径映射正确

即使脚本加载了，如果 sourcemap 没对上，WebStorm 就无法把压缩/打包后的代码行映射回你的源码，断点依旧“未绑定”。

• 在 Chrome DevTools → Sources 面板，展开左侧树状结构，看能否看到你的原始 .ts 或 .vue 文件；看不到 = sourcemap 未生成或未加载
• Network 面板搜 .js.map，确认返回 200 且响应体是合法 JSON（开头有 {，不是 404 页面 HTML）
• 如果用 webpack/vite，检查构建配置：vite.config.ts 中 build.sourcemap 必须为 true（开发模式默认开，但自定义 build.rollupOptions 可能覆盖）
• Remote URL mapping 必须配准：例如本地路径 /Users/me/project/src 对应远程 URL webpack:///src，少一个斜杠或拼错 webpack 都会导致映射失败

最常被忽略的一点：WebStorm 的 JavaScript Debugger 插件必须启用，且 JetBrains IDE Support Chrome 插件必须已安装并开启。两者缺一，调试通道就断了——哪怕 URL 和 sourcemap 全对，断点也永远是空心灰点。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南