Chrome DevTools 在执行之前批准网络请求

Question

我正在 Chrome DevTools（或任何等效工具）中寻找一种方法来控制我的 Web 应用程序完成的 HTTP 请求：

我想在执行之前批准 HTTP 请求，或者让它们以意外的方式失败（给它状态 500 或其他）。

用法示例：测试意外行为

有谁知道实现这个的方法。

Answer 1

我看到 2 种可能的解决方案可以在客户端实现此目标：

使用抽屉中的请求阻止面板（打开 Chrome DevTools -> Esc -> '...' -> 请求阻止这是完全开箱即用的，适用于大多数 "offline-first" 用例。
使用服务工作者。它们基本上是一种代理请求和单独响应的方式（例如，通过 500-er 响应）。您可能希望通过使用 Chrome Devtools Snippets（打开 Chrome DevTools -> Sources -> Snippets）来 enable/disable 这样的调试功能，因为您不希望所有请求都失败时间 :)

首先你需要像这样注册你的服务人员：

if('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/path-to-service-worker.js').then(function(registration) {
    // registration successful
  }).catch(function(err) {
    // registration failed
  });
}

之后重新加载浏览器（或者在 DevTools -> Application -> Service Workers 中安装你的 service-worker），这样你的 service-worker.js 是活跃的，可以监听 'fetch' 事件并像这样代理对该域的请求：

self.addEventListener('fetch', function(event) {
  // this will set a breakpoint in chrome devtools, allowing you to manually edit the response
  debugger; 
  // alternatively you could reponse with an error response like this:
  event.respondWith(
    new Response(null, {
      status: 500
    })
  );
});

旁注：由于浏览器的安全限制，serviceworkers 只能在 https 和本地主机上工作。

更多信息： https://developer.mozilla.org/en-US/docs/Web/API/Response/Response https://developers.google.com/web/fundamentals/primers/service-workers/

Answer 2

您可以使用 Requestly Chrome 扩展来重定向、取消、阻止、修改 headers,... 请求。

在执行之前批准请求，例如对于 AJAX 请求创建重定向规则并将其指向静态 JSON 文件或其他脚本。

要阻止请求，请使用取消请求功能并设置自定义模式。

Chrome DevTools 在执行之前批准网络请求

Chrome DevTools Approve Network Requests before executing

api

google-chrome

http

devtools