XHR断点在请求发送瞬间暂停执行，便于定位调用栈和参数：在Sources面板→XHR Breakpoints→点击+号，留空拦截全部，填路径如/api/user匹配子串，填完整URL则精确匹配；仅捕获JS发起的fetch/XHR/WebSocket，不捕获HTML资源或Service Worker拦截请求。
在浏览器开发者工具中，XHR 断点能让你在 JavaScript 发起特定网络请求（如 fetch、XMLHttpRequest、甚至部分 WebSocket 连接）的**发送瞬间**暂停执行，方便查看调用栈、请求参数、触发逻辑，而无需手动在成百行代码里找请求发起点。
怎么设置 XHR 断点
打开 Chrome 或 Edge 的开发者工具（F12 或 Ctrl+Shift+I），切换到 Sources 面板 → 左侧边栏找到 XHR Breakpoints（可能需点击右上角 ⋯ → More breakpoint types 启用）→ 点击 + 号添加断点：
- 留空：拦截所有 XHR/fetch 请求
- 填入字符串（如
/api/user）：只拦截 URL 包含该字符串的请求（支持路径前缀匹配，不支持正则） - 填入完整 URL（如
https://example.com/api/login）：精确匹配（协议+域名+路径）
它能拦截哪些请求
XHR 断点主要捕获由 JavaScript 主动发起的请求，包括：
java-api-doc-generator
下载
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
-
XMLHttpRequest.send()调用时 -
fetch()被调用并开始发送时（Chrome 80+ 支持，Edge 同步支持） -
new WebSocket(url)建立连接时（部分版本支持，非全部）
⚠️ 注意：它不拦截页面初始 HTML/CSS/JS 加载、图片资源、重定向后的请求、Service Worker 拦截并转发的请求，也不捕获通过 <img src alt="JavaScript 浏览器断点调试中怎么使用 XHR 断点拦截网络请求" >、<link> 等标签自动触发的请求。
立即学习“Java免费学习笔记（深入）”；
断点触发后怎么看关键信息
命中后，执行会停在请求发起的 JS 行（通常是 fetch() 或 xhr.send() 所在行），此时可立即查看：
- Call Stack：左侧堆栈，清楚看到是哪个函数、哪一行、经由哪些调用链触发了这个请求
-
Scope 面板：查看当前作用域内变量，比如
url、options、body是否符合预期 - Network 面板同步出现该请求（灰色未完成状态），可右键 → Replay XHR 重发调试
- 按 F8 继续，或 F10 单步，观察后续处理逻辑（如响应解析、错误处理）
实用技巧和常见问题
- 多个 XHR 断点可共存，勾选启用/禁用，适合分场景调试
- 如果断点没触发，检查是否用了
AbortController提前中止、或请求被缓存（尝试无痕模式或禁用缓存） - Vue/React 等框架中，常配合组件名或 hook 名在 Call Stack 中快速定位到业务层发起点
- 想查请求头或响应体？断点后稍等片刻（或继续执行），再切到 Network 面板看完整详情
