如何在Chrome DevTools中为网络请求加断点并逐次执行请求？

一、给网络请求添加断点 #

两种实用方法：

• 按URL/域名拦截断点
  1. 打开DevTools（快捷键F12或Ctrl+Shift+I），切换到Network面板
  2. 点击面板左上角的红色断点图标，勾选Enable request blocking
  3. 右键已完成的目标请求，选择Block request URL（拦截单个URL）或Block request domain（拦截整个域名下的请求）；也可以手动在下方的Request blocking列表添加规则，支持通配符（比如*example.com/api/*）
• 按请求类型代码断点
  1. 切换到Sources面板，展开左侧的XHR/fetch Breakpoints
  2. 点击+号，输入请求URL包含的关键词（比如/table-data），回车后，只要有匹配的XHR/fetch请求发起，DevTools就会自动暂停在触发请求的代码位置

二、逐次执行后续请求（请求完成后自动断点） #

针对你截图里的表格逐行加载场景——要实现每次请求完成后自动断点，操作如下：

1. 先按上面的方法，给表格数据接口添加XHR/fetch断点
2. 触发第一次请求（比如刷新页面或点击加载按钮），DevTools会在请求发起时暂停
3. 切换到Network面板，右键该请求选择Copy -> Copy as fetch，把请求代码复制到Console面板备用（如需手动触发请求）
4. 保留XHR/fetch Breakpoints里的规则，确保每次匹配请求都会触发暂停
5. 点击DevTools顶部的Resume script execution（▶），让第一次请求完成，拿到第一行数据
6. 此时断点规则仍生效，你在页面操作（比如点击“下一行”按钮）触发下一次请求时，DevTools会自动暂停，再点击Resume script execution就能获取第二行数据，以此循环

如果需要更灵活的自动断点，也可以在Console面板执行这段脚本：

let requestIndex = 0;
const targetApi = "/api/get-table-row"; // 替换成你的目标接口URL
fetch = new Proxy(fetch, {
  apply: async (target, thisArg, args) => {
    const requestUrl = args[0];
    if (requestUrl.includes(targetApi)) {
      requestIndex++;
      console.log(`第${requestIndex}次请求即将执行，按F8继续`);
      debugger; // 自动触发断点
    }
    return target.apply(thisArg, args);
  }
});

执行后，每次目标请求发起前都会自动断点，按F8就能继续完成当前请求，之后等待下一次操作触发请求即可。

内容的提问来源于stack exchange，提问作者Neret