调试时看不到请求参数，需在fetch/axios等调用前设断点查看options；确保JetBrains插件启用且端口匹配；动态参数用Evaluate Expression实时解析；打包项目须开启并验证Source Map。
调试时看不到请求参数？先确认断点位置是否在实际发送前
WebStorm 本身不直接“捕获”网络请求参数，它只能停在你写的 JS 代码里。如果你在 fetch、axios.post 或 XMLHttpRequest.send 调用**之前**设断点，才能看到即将发出的参数；如果断点设在响应回调里（比如 .then(res => {...})），看到的是返回值，不是请求体。
- 正确做法：在构造请求对象后、发起调用前打点，例如
fetch(url, options)的options变量所在行 - 常见误操作：在
console.log('done')那一行打断点——此时请求早已发出去，参数不可见 - 异步链中参数易丢失：如果参数经过多层函数传递（如
handleClick → apiCall → buildPayload），只在最外层打断点会错过中间值；建议在buildPayload返回前加断点
Chrome DevTools 和 WebStorm 联动失效？检查 JetBrains IDE Support 插件状态
WebStorm 调试 JS 请求依赖 Chrome 插件与 IDE 的通信。插件未启用或版本不匹配时，断点能设上但不触发，或者变量显示 undefined。
- 打开
chrome://extensions，确认JetBrains IDE Support已启用且未报错 - 右键插件图标 → “选项”，检查 Host 是否为
localhost，Port 是否与 WebStorm 内置服务器端口一致（默认63342） - 若改过端口（如设为
8081），需同步修改 WebStorm 设置：Settings → Tools → Web Browsers and Preview → Built-in server port - 插件图标灰色？说明未连接上 IDE——关掉所有 Chrome 窗口重试，或重启 WebStorm
请求参数是动态生成的？用 Evaluate Expression 实时查看
当参数由复杂表达式拼接（如 JSON.stringify({ ...state, timestamp: Date.now() })），光看变量名看不出真实内容。这时别靠悬停，直接右键表达式 → Evaluate Expression。
- 支持运行任意 JS 表达式，例如输入
JSON.stringify(payload)查看最终字符串 - 可访问当前作用域所有变量，包括闭包内未声明为
const的临时值 - 注意：不能在未暂停时使用；若表达式含副作用（如调用
Math.random()），结果仅反映单次求值 - 对 Promise 参数，可输入
await fetch(...)强制等待并查看响应体（仅限当前暂停帧）
用了打包工具（Vite/Webpack）？确保 Source Map 开启且路径正确
如果项目经构建，原始 JS 文件和运行时代码不一致，WebStorm 无法将断点映射到源码，请求参数变量名可能显示为 _a、t1 等压缩名，甚至无法读取。
立即学习“Java免费学习笔记（深入）”；
- Vite 项目：检查
vite.config.ts中build.sourcemap是否为true（开发环境默认开启） - Webpack 项目：确认
devtool: 'source-map'或'eval-source-map'已配置 - WebStorm 设置：打开
Settings → Languages & Frameworks → JavaScript → Debugging，勾选Enable source maps - 关键验证点：在调试时，编辑器顶部应显示 “
xxx.ts (mapped from xxx.js)”，否则 Source Map 未生效
