WebStorm调试前端需用“Attach to Chrome”模式，手动启动带--remote-debugging-port=9222的专用Chrome实例，URL填项目真实地址（如http://localhost:5173/），禁用自动打开浏览器，并确保source map正确生成与映射。
WebStorm 本身不提供“自动代理”功能，所谓“自动代理调试前端页面”，实际是误传概念——它靠的是 Chrome DevTools Protocol 直连调试端口，不是走 HTTP 代理。真正要打通的，是 Chrome 实例、WebStorm 内置调试服务、source map 映射三者之间的链路。
Chrome 必须用 --remote-debugging-port 启动专用实例
WebStorm 的 JavaScript Debug 配置默认走 “Attach to Chrome”，不是启动浏览器，而是连接一个已开启远程调试协议的 Chrome 进程。你日常开着的 Chrome 不监听调试端口，直接 Attach 会失败。
- 先彻底关掉所有 Chrome 进程（任务管理器里检查
chrome.exe是否残留） - 手动命令行启动调试专用实例：
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="C:\temp\chrome_debug"（macOS/Linux 路径需调整，引号不能省） - 别用无痕模式，除非插件设置里明确勾选了“允许在无痕模式下运行”
- 新版 Chrome（115+）已弃用
JetBrains IDE Support插件，WebStorm 2023.3+ 直接对接 Chrome DevTools Protocol，装了也无效
JavaScript Debug 配置必须选 Attach to Chrome，且 URL 对齐开发服务器
选错启动模式是断点不命中的最常见原因。“Launch” 模式会让 WebStorm 自己拉起 Chrome，但 profile 隔离、插件缺失、source map 路径错位问题频发；稳定调试只推荐 “Attach”。
- Run → Edit Configurations → + →
JavaScript Debug→ 选择Attach to Chrome -
Port填9222（必须和命令行启动时的--remote-debugging-port完全一致） -
URL填你项目真实地址，例如：http://localhost:5173/（Vite）、http://localhost:3000/（CRA），末尾带斜杠，不加index.html - 绝对不要填
http://localhost:63342（这是 WebStorm 内置服务端口，仅用于静态 HTML 示例）
Vue/React 项目必须禁用 devServer 自动打开浏览器
Vue CLI 和 Vite 默认会在 npm run serve 或 npm run dev 启动后，用系统默认浏览器打开页面——这个“默认浏览器”几乎从来不是你那个带 --remote-debugging-port 的专用 Chrome 实例，导致 WebStorm 附加失败、断点不触发。
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
立即学习“前端免费学习笔记（深入）”；
- Vite：在
vite.config.ts的server里加open: false - Vue CLI：在
vue.config.js中加devServer: { open: false } - 改完配置后，必须重启开发服务器（
npm run dev等），否则不生效 - 之后手动在你启动的调试专用 Chrome 里输入 URL 访问页面
source map 必须生成且路径映射正确
断点打在源码上却停在 bundle.js 里，或停在 proxy handler 里出不来，90% 是 source map 问题。WebStorm 依赖 sourcemap 文件把运行时代码位置反向映射回你的 .ts 或 .vue 文件。
- 确保构建工具开启了 source map：Vite 默认开，Vue CLI 需确认
vue.config.js有configureWebpack: { devtool: 'source-map' } - 检查浏览器 Network 标签页，刷新页面后看是否能加载到
.js.map文件（状态码 200，类型application/json） - 如果用了自定义
base（如 Vite 的base: '/admin/'），URL必须带对应前缀，否则路径匹配失败 - Vue 3 项目可进 WebStorm 设置 → Build, Execution, Deployment → Debugger → Stepping，把
node_modules、vue、react等加进 “Do not step into” 列表，避免跳进响应式底层
真正卡住人的，从来不是配置步骤多，而是 Chrome 进程没杀干净、端口不一致、URL 少了个斜杠、或者开发服务器没重启——这些细节一错，整个链路就断在第一环。调试通道是单向直连，没有 fallback，对不上就是连不上。
