javascript - 在监控XMLHttpRequest时，如何检测请求是否是xhr？

Question

我已经添加了监听器

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 还是文档、脚本还是其他类型？

Answer 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 等。查看图像中的两个待处理请求，在收到响应后，它们被替换为某种“类型”