如何使用Chrome DevTools拦截所有请求（含未发起的请求）？

数据老陈

2026-8-2

拦截未发起的网络请求方案

一、用Chrome DevTools原生拦截规则实现精准拦截

打开Chrome DevTools（快捷键F12/Ctrl+Shift+I），切换到Network面板
勾选顶部的Disable cache避免缓存干扰，然后点击左上角的「拦截请求」按钮（图标为带斜杠的圆圈，hover提示"Enable request blocking"）
在右侧弹出的Request blocking面板中，点击Add pattern，输入匹配规则：*://stackoverflow.com/posts/*。这个规则会匹配所有该路径下的Fetch/XHR请求，不管是不是首次发起的请求
确认规则后，所有符合模式的请求在发起阶段就会被拦截，不会发送到服务器

二、重写原生API实现灵活拦截（适合复杂场景）

如果需要更精细的控制（比如只拦截特定触发逻辑的请求），可以在DevTools的Console或Snippets中执行以下代码，重写fetch和XMLHttpRequest方法：

// 拦截Fetch请求
const originalFetch = window.fetch;
window.fetch = function(url, options) {
  if (url.startsWith('https://stackoverflow.com/posts/')) {
    console.log('已拦截Fetch请求:', url);
    // 可根据需求返回模拟响应或错误
    return Promise.reject(new Error('请求已被拦截'));
  }
  return originalFetch.apply(this, arguments);
};

// 拦截XHR请求
const originalXHR = XMLHttpRequest;
window.XMLHttpRequest = function() {
  const xhr = new originalXHR();
  const originalOpen = xhr.open;
  xhr.open = function(method, url) {
    if (url.startsWith('https://stackoverflow.com/posts/')) {
      console.log('已拦截XHR请求:', url);
      this.abort();
      return;
    }
    originalOpen.apply(this, arguments);
  };
  return xhr;
};

这段代码会在请求发起前直接拦截符合条件的请求，哪怕是页面加载后首次出现的目标请求。