xhr断点需在sources面板设置，输入url关键词匹配xmlhttprequest或fetch请求，不支持条件表达式但可编辑断点添加js条件，仅捕获主线程js发起的请求。
HTML 本身不能设 XHR 断点——断点必须落在 JavaScript 层，但你可以用 DevTools 的 XHR Breakpoints 功能，在请求发起或响应时精准暂停，且无需修改任何代码。
XHR Breakpoints 怎么开？
它不在 Elements 或 Console 面板，而是在 Sources 面板右侧的「XHR Breakpoints」区域：
- 打开 DevTools（
F12或Ctrl+Shift+I），切到Sources标签页 - 展开左侧边栏底部的
XHR Breakpoints折叠区 - 点击
+号，输入 URL 关键词（如/api/user、search、graphql） - 勾选「
XHR」或「Fetch」（现代页面多用fetch，建议两者都勾）
输入后回车即生效。只要后续任意 JS 调用 XMLHttpRequest 或 fetch 且 URL 包含该字符串，执行就会暂停在发起请求的那一行——不是 HTML，是真正发请求的 JS 代码行。
为什么输 /api/ 却没断住？
常见失效原因不是配置错，而是匹配逻辑被忽略：
-
/api/只匹配 URL 中**任意位置**包含该子串，不区分协议、域名、参数；但若请求是https://example.com/v2/users，/api/就不会命中 - URL 是经过重写或代理的（如开发环境用 Webpack Dev Server 代理到
/api/），实际发出的请求可能是http://localhost:3000/users，此时应填/users - 有些框架（如 Vue Query、React Query）封装了请求逻辑，真实
fetch调用藏在库内部，需配合Blackbox script过滤掉react-query.js等文件，才能停在你写的useQuery(...)调用处 - 请求由 Service Worker 拦截并响应，DevTools 默认不触发 XHR 断点，需在
Application → Service Workers中取消勾选「Bypass for network」临时禁用
如何让断点只在特定条件触发？
XHR Breakpoints 本身不支持条件表达式，但可以组合其他机制实现等效效果：
- 在断点暂停后，立即打开 Console，检查
debugger上下文中的arguments或调用栈，快速判断是否目标请求 - 右键已设的 XHR 断点 → 「Edit breakpoint」→ 输入 JS 表达式，例如：
request.url.includes('prod') && request.method === 'POST'（注意：此处request是 DevTools 提供的伪变量，仅在编辑框中可用） - 更可靠的做法：在业务代码中手动加
if (url.includes('xxx')) debugger;，再配合Blackboxing第三方脚本，确保单步时只停在你这行 - 对加密接口调试，可在断点后直接修改
fetch的init参数或XMLHttpRequest.prototype.send，跳过签名计算环节
真正容易被忽略的是：XHR 断点只捕获 JS 主线程发起的请求。WebSocket、EventSource、图片/脚本资源加载、以及被 AbortController 中断的请求，都不会触发。如果页面“看起来没发请求”，先确认 Network 面板里对应请求是否真的存在、是否被过滤掉了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
