浏览器调试JS网络请求需协同Network与Sources面板：开启Preserve log和Disable cache，通过Reveal in Sources定位发起代码，启用Async stack traces追踪异步链，并用Overrides或Console临时修改请求验证逻辑。
在浏览器中拦截并调试 JavaScript 网络请求，核心是结合 Network 面板 与 Sources 面板 协同工作，而不是只盯着 console.log 或盲目打断点。关键在于看清“请求发没发、发给谁、带什么、回什么、后续怎么处理”。
看清请求全过程：Network 面板必须这样用
打开 DevTools（F12）→ 切到 Network 标签页 → 操作页面触发请求（如点击按钮）。注意以下三点：
- 勾选 “Preserve log”：防止刷新后清空历史请求，方便复现流程
- 勾选 “Disable cache”：避免因缓存导致请求不发出，掩盖真实逻辑问题
- 点击具体请求 → 查看 Headers、Preview、Response、Timing：确认 URL、请求头（特别是 token、Content-Type）、参数格式、响应结构是否符合预期；Preview 能直接看到 JSON 渲染效果，比 Response 更直观
定位发送源头：从请求反查 JS 代码位置
Network 面板里右键某条请求 → 选择 “Reveal in Sources panel”，DevTools 会自动跳转到发起该请求的 JS 行（前提是源码未压缩且启用了 source maps）。如果跳转失败，说明：
小红书长文-谷歌浏览器
下载
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。
- 代码被 Webpack/Vite 打包为 eval 形式 → 在 Sources 左侧展开 webpack:// 或 vite:// 查找对应模块
- 未启用 Source Maps → 在 Settings（⚙️）→ Preferences → 勾选 “Enable JavaScript source maps”
- 请求由第三方库（如 axios）封装发出 → 断点可设在调用处（如
api.getUser()），而非底层 fetch 或 XMLHttpRequest
调试请求后续逻辑：别只盯 .then()，要连上异步链
fetch 或 axios 的响应处理常分散在多个函数中，单在 .then() 打断点容易漏掉错误分支或 await 后续：
立即学习“Java免费学习笔记（深入）”；
- 开启异步堆栈追踪：Sources 面板左下角 ⚙️ → 勾选 “Async stack traces”，这样 Promise 拒绝或 await 失败时，Call Stack 会显示完整调用链，直达原始发起位置
-
主动验证响应数据结构：在 Network 中确认返回是
{data: [...], code: 200}，再回到 Sources 里检查 JS 是否写了res.items（实际字段可能是res.data），避免因字段名不匹配导致静默失败 -
捕获未处理的 Promise 拒绝：Sources 面板右上角 ? 图标 → 勾选 “Pause on caught exceptions” 和 “Pause on uncaught exceptions”，尤其对
try/catch包裹的 fetch 很有用
临时修改请求行为：用 Overrides 或 Console 快速验证
不想改源码、反复构建，可用浏览器能力快速干预：
-
Overrides 功能：Sources → 右键 localhost → “Setup local overrides” → 选文件夹 → 刷新后即可编辑并持久化 JS 文件（比如把
fetch('/api/user')改成fetch('/mock/user')） -
Console 注入测试：暂停在断点时，在 Console 直接运行
fetch('/test').then(r => r.json()).then(console.log)，验证接口可达性与基础响应格式 - 拦截并修改请求头：Network → 右键请求 → “Copy as fetch” → 粘贴到 Console，手动修改 headers 或 body 后执行，绕过前端逻辑直接测后端
