在监控 XMLHttpRequest 时，如何检测请求是否为 xhr？答案

【问题标题】：upon monitoring the XMLHttpRequest, how to detect if a request is xhr?在监控 XMLHttpRequest 时，如何检测请求是否为 xhr？
【发布时间】：2014-08-04 17:01:04
【问题描述】：

我添加了监听器

chrome.debugger.onEvent.addListener(function(debuggeeId, message, params) {
   console.log(params);
});

控制台给出：

documentURL: "someurl"
frameId: "407.1"
initiator: Object
  lineNumber: 114
  type: "parser"
  url: "someurl"
  __proto__: Object
loaderId: "407.7"
request: Object
  headers: Object
    Accept: "text/css,*/*;q=0.1"
    Cache-Control: "max-age=0"
    Referer: "someurl"
    User-Agent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36"
    __proto__: Object
  method: "GET"
  url: "someurl"
  __proto__: Object
requestId: "407.861"
timestamp: 1402725779.200758

现在我如何找到请求类型是 xhr 或文档或脚本或其他任何东西？

【问题讨论】：

标签： javascript google-chrome-extension xmlhttprequest google-chrome-devtools

【解决方案1】：

我的问题的解决方案在以下概念中找到：

当我们在"chrome.onEvent"（通用事件）上添加监听器时，每当调用任何事件时都会调用回调。每个事件都有一个特定的消息。真正的误解：我在想一个请求的类型是'xhr'之类的......

但实际上：“一个请求永远不能有任何类型的 xhr、文档等。”和“响应始终具有 xhr、文档等类型”。

我只安慰了一次请求参数，因为该事件是通过消息调用的："Network.requestWillBeSent" 而我忽略了在其他事件中显示响应参数。

当消息为："Network.responseReceived" 时，将收到一个响应参数，然后第三个参数（此处为 params）将具有一个属性类型，用于判断响应是 xhr 还是其他类型

chrome.debugger.onEvent.addListener(function(debuggeeId, message, params) {
   if(message == 'Network.requestWillBeSent') { //chrome requests to server
     console.log(params.type);  //always undefined (as request never have property 'type')
   } else if((message === "Network.responseReceived") { //chrome receives response
     console.log(params.type); //shows which type of response recieved (xhr, or something else)
     if(params.type == 'XHR') {
       //DO YOUR WORK WITH XHR
     }
   } else if(message == "Network.loadingFinished") {
     //Here loading is finished. and now chrome dev tool filter the responses  as per type (responses of only those requests whose response is received, rest requests are in pending queue at current timestamp)
   }
});

这就是 chrome 开发工具过滤网络的方式 Chrome 不会决定请求的响应是否为“xhr”或其他内容。因此，在收到响应之前，它将类型保持为“待处理”。当收到响应时，它将网络归类为 xhr 或文档或 css 等。查看图像中的两个待处理请求，它们在收到响应后被替换为某种“类型”

【讨论】：

有趣。但是如何解释没有响应但两个请求的“加载响应数据失败”，它们的网络类型分别是 Chrome 开发者工具中的 XHR 和文档

【解决方案2】：

您可以 set the XHR Breakpoints 在 Chrome devtools 的 Sources 标签下使用“Any XHR”。

【讨论】：