Electron/Node应用调试时，如何开启Network Panel查看HTTPS请求？

嘿，这个问题我之前开发Electron应用时也踩过坑！确实，用request/axios这类基于Node.js http/https模块的库在主进程发请求时，Chrome调试器的Network面板默认抓不到——因为Node层的请求走的是Node自身的网络栈，和Chromium的网络栈完全分开，DevTools只会监听Chromium栈的请求。下面给你几个简单可行的解决办法：

方法一：让Axios使用Chromium的网络栈（推荐） #

你可以给axios配置一个基于Electron net模块的适配器，net是Electron封装的Chromium原生网络栈，用它发起的请求会自动出现在Network面板里。

直接在主进程里添加这段配置代码：

const axios = require('axios');
const { net } = require('electron');

// 替换axios的默认适配器为Electron net模块实现
axios.defaults.adapter = function (config) {
  return new Promise((resolve, reject) => {
    // 构建net请求实例
    const request = net.request({
      method: config.method,
      url: config.url,
      headers: config.headers,
    });

    // 处理响应数据
    request.on('response', (response) => {
      let responseData = '';
      response.on('data', (chunk) => {
        responseData += chunk;
      });
      response.on('end', () => {
        resolve({
          data: responseData,
          status: response.statusCode,
          statusText: response.statusMessage,
          headers: response.headers,
          config: config,
        });
      });
    });

    // 捕获请求错误
    request.on('error', (err) => {
      reject(err);
    });

    // 发送请求体（如果有）
    if (config.data) {
      request.write(config.data);
    }

    request.end();
  });
};

配置完成后，你用axios发起的所有请求都会走Chromium的网络栈，直接在DevTools的Network面板就能看到完整的请求详情了。

方法二：导出网络日志并导入到DevTools #

如果不想改动代码，你可以在启动Electron时开启网络日志导出，再把日志导入到Chrome DevTools查看：

1. 用命令行启动你的Electron应用，加上--log-net-log参数指定日志文件：

electron --log-net-log=net-requests-log.json ./your-main-entry.js

2. 运行应用并完成需要调试的请求后，关闭应用，根目录会生成net-requests-log.json文件。
3. 打开Chrome DevTools的Network面板，点击右上角的「Import HAR」按钮（向下箭头加横线的图标），选择刚才生成的json文件，就能看到所有请求的详细信息，包括Node层发起的HTTPS请求。

方法三：把请求移到渲染进程发起 #

如果你的业务逻辑允许，直接把请求移到渲染进程（比如Vue/React组件、前端脚本里）发起，这样默认就能在Network面板看到请求——因为渲染进程的请求天然走Chromium的网络栈，不需要额外配置。

内容的提问来源于stack exchange，提问作者user2167582