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

Question

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

此图显示我想要获得的响应位于 Chrome 开发工具的 Response 选项卡中，而不是 Headers 选项卡中。

我没有使用<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)

所以我尝试了

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)

但它输出相同：

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)

---

有任何想法吗？

Answer 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
• Chrome 扩展 - 如何获取 HTTP 响应正文？