Electron：如何捕获主进程的所有请求响应？

我想从主进程中获取电子应用程序中发生的所有请求的响应。

此图显示我想要获得的响应位于“响应”选项卡，而不是 Chrome 开发工具上的“标头”选项卡 https://i.stack.imgur.com/AYA1G.png.

我没有使用<webview>标签，我正在使用mainWindow.loadURL().

session.defaultSession.webRequest.onCompleted({ urls: ['*://*/*'] }, function (details, callback) {
     console.log(details);
});

因此，为了检索我尝试过的响应：

try {
     mainWindow.webContents.debugger.attach('1.3')
} catch (err) {
     console.log('Debugger attach failed: ', err)
}

mainWindow.webContents.debugger.on('detach', (event, reason) => {
     console.log('Debugger detached due to: ', reason)
});

mainWindow.webContents.debugger.sendCommand('Network.enable');

session.defaultSession.webRequest.onCompleted({ urls: ['*://*/*'] }, function (details, callback) {
     mainWindow.webContents.debugger.sendCommand('Network.getResponseBody', { requestId: details.id.toString() }, function (body, body64) {
          console.log(body);
     });
});

但它输出

UnhandledPromiseRejectionWarning: Error: No resource with given identifier found
UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either
                                  by throwing inside of an async function without a catch block,
                                  or by rejecting a promise which was not handled with .catch(). 
                                  (rejection id: 1)

所以我尝试了

try {
     mainWindow.webContents.debugger.attach('1.3')
} catch (err) {
     console.log('Debugger attach failed: ', err)
}

mainWindow.webContents.debugger.on('detach', (event, reason) => {
     console.log('Debugger detached due to: ', reason)
});

mainWindow.webContents.debugger.sendCommand('Network.enable');

mainWindow.webContents.debugger.on('message', function(event, method, params, resourceType){
     if (method === 'Network.responseReceived') {
          if (params.type === 'XHR') {
               mainWindow.webContents.debugger.sendCommand('Network.getResponseBody', { requestId: params.requestId }, function (body, body64) {
                    console.log(body);
               });
          }
     }
});

但它输出相同：

UnhandledPromiseRejectionWarning: Error: No resource with given identifier found
UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either
                                  by throwing inside of an async function without a catch block,
                                  or by rejecting a promise which was not handled with .catch(). 
                                  (rejection id: 1)

有任何想法吗？

自从我写这个问题以来已经有一段时间了，我刚刚找到了解决方案。 我混合了 WebRequest API 和调试器 API，它们不共享相同的请求 ID。我还放置了一个函数作为参数，但是 sendMessage 方法返回一个承诺并且没有回调函数。

这是一种仅使用 Debugger API 的方法，效果很好：

try {
  mainWindow.webContents.debugger.attach('1.3');
} catch (err) {
  console.log('Debugger attach failed: ', err);
}

mainWindow.webContents.debugger.on('detach', (event, reason) => {
  console.log('Debugger detached due to: ', reason);
});

mainWindow.webContents.debugger.on('message', (event, method, params) => {
  if (method === 'Network.responseReceived') {
    console.log(params.response.url);
    mainWindow.webContents.debugger.sendCommand('Network.getResponseBody', { requestId: params.requestId }).then(function(response) {
      console.log(response);
    });
  }
})
  
mainWindow.webContents.debugger.sendCommand('Network.enable');

使用以下示例进行制作：

• https://www.electronjs.org/docs/api/debugger https://www.electronjs.org/docs/api/debugger
• Chrome 扩展 - 如何获取 HTTP 响应正文？ https://stackoverflow.com/questions/18534771/chrome-extension-how-to-get-http-response-body