node.js – 在调试Electron / Node应用程序时如何显示网络面板

我正在构建一个电子应用程序,我正在使用库(请求/ axios)来发出请求.我没想到的一件事是,在Chrome调试模式下运行时,在Node上发出这些请求将不会显示网络面板.是否有一种简单的方法可以告诉调试模式打开网络面板以调整为https请求(我假设这些库都使用https)？

目前在我的服务器端电子应用程序我只看到以下内容

解决方法

解决方案1 – 创建自己的

您可以包装axios函数并将事件发送到渲染器进程

主要电子过程

const electron = require('electron');

const {
  app,browserWindow,ipcMain
} = electron;

const _axios = require('request-promise');

const axios = {
  get: (url,params) => _axios.get(url,params).then(sendData),post: (url,params) => _axios.post(url,delete: (url,params) => _axios.delete(url,put: (url,params) => _axios.put(url,params).then(sendData)
  // ...
};

function sendData() {
  return (data) => {
    mainWindow.webContents.send('network',data);
    return data;
  };
}

渲染器进程(index.html)：

<!DOCTYPE html>
<html>

<head>
  <Meta charset="UTF-8">
  <title>Hello World!</title>

  <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css"

        rel="stylesheet">
  <style>
    .kb-debug-widget {
      position: fixed;
      bottom: 0;
      height: 200px;
      overflow-x: hidden;
      overflow-y: auto;
      background: grey;
      left: 0;
      right: 0;
      font-size: 10px;
    }
  </style>
</head>

<body>
  <div class="kb-debug-widget">
    <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth"
           id="network">
      <tr>
        <th>Name</th>
        <th>Method</th>
        <th>Status</th>
        <th>Type</th>
        <th>Body</th>
      </tr>
    </table>
  </div>
  <script>
    require('./renderer.js');
    var {
      ipcRenderer,remote
    } = require('electron');

    ipcRenderer.on('network',(event,response) => {
      const networkElement = document.getElementById('network');

      // print whatever you want here!
      networkElement.innerHTML +=
        `
      <tr>
        <td>${response.request.href}</td>
        <td>${response.request.method}</td>
        <td>${response.statusCode}</td>
        <td>${response.headers['content-type']}</td>
        <td>${response. data}</td>
      </tr>
      `;

      // you can also print the network requests to the console with a decent UI by using console.table:
      console.table({
        name: response.request.href,method: response.request.method,status: response.statusCode,type: response.headers['content-type'],body: response. data,});
    });
  </script>
</body>

</html>

这将在视图的底部创建一个小部件.

请求更容易：

const _request = require('request-promise');
const _axios = require('request-promise');

// this should cover all sub-methods
const request = (params,callback) => {
  return _request(params,callback)
  .on('response',(response) => {
    mainWindow.webContents.send('network',response);
    return response;
  });
};

既然是axios&请求返回类似对象,您可以在渲染器端使用相同的功能.

代码在行动