基于 electron 实现前端页面远程调试工具

背景

经常我们要去看一些页面所发出的请求时，经常会用到 Charles 做为抓包工具来进行接口抓取，但一方面市面是很多抓包工具都是收费或者无法二次开发的。当前我们团队大多数用的也都是 Charles，但是对于一般新手来说，单纯想抓个包或者修改和接口返回数据，直接上手 Charles 不管配置成本和学习成本都相对较高。所以我们有必要自己按照自己最爽的状态来撸一个适合自己的抓包工具。

结果

基于以上诉求，我们自己重新设计并修改了交互，搞了一个符合我们诉求，使用简单的桌面端抓包工具。本身这个插件是可以集成到 utools 里面的，但是由于很多涉及到内部的功能，我们没法通过 utools 进行发布，所以我们自己做了一个可以使用 utools 所有生态的工具箱 Rubick。此次抓包工具也是基于 Rubick 的插件工具。

试玩地址：

Rubick: https://github.com/clouDr-f2e/rubick

抓包插件：https://github.com/clouDr-f2e/rubick-network

这次我们先不看代码，直接来看我们实现的抓包工具的效果：

支持HTTP/HTTPS请求抓取。

支持接口mock

只需要将需要mock 的接口，右击加入 mock 即可完成对接口数据的mock动作，后续所有接口请求将会走到该mock场景：

支持代理转发

如何使用

首先我们需要clone Rubick 工具箱，他是一个基于 Electron 的类似于 utools 的工具箱，
仓库地址：Rubick: https://github.com/clouDr-f2e/rubick 然后可以本地运行：

npm i
npm run dev

之后我们会看到这样的界面：

如果熟悉 utools 的同学，可以直接略过后面的步骤了。

然后再 clone 下 rubick-network 插件，一切准备就绪后，直接复制 rubick-network 下的 plugin.json 到 rubick 输入框 选择新建插件即可看到插件信息：

然后开启插件，即可进行搜索使用！

相比 utools 而言，rubick 最大的优势是开源！！！ 欢迎社区一起建设完善 rubick。

技术实现

以后我们再来介绍一下是如何实现这样一款抓包代理工具的。在实现抓包代理工具之前，首先大家需要去自学一下关于 nodejs 实现代理 的一些知识点，这里推荐几篇不错的文章：

HTTP 代理原理及实现（一）

HTTP 代理原理及实现（二）

简单来讲就是要实现一个中间人，用户通过设置代理，网络请求就会通过中间人代理，再发往正式服务器。

这种中间人的实现方式有两种。

一种为普通的HTTP代理，通过Node.js开启一个HTTP服务，并将我们的浏览器或手机设置到该服务所在的ip和端口，那么HTTP流量就会经过该代理，从而实现数据的拦截。

对于非HTTP请求，比如HTTPS, 或其他应用层请求。可以通过在Node.js 中开启一个TCP服务，监听CONNECT请求，因为应用层也是基于传输层的，所以数据在到达应用层之前会首先经过传输层，从而我们能实现传输层数据监听。

但是对于CONNECT捕抓到的请求，无法获取到HTTP相关的信息，包括头信息等，这对一般的前端分析作用不大，那么想要真正监听HTTPS，还需要支持证书相关的验证。

关于证书如何生成网上也有很多教程，这里就不在赘述，可以自行百度。不过看了一圈别人的设计，自己再动手实现一个 http 代理服务就是轻而易举的事情了，但是为了更加快捷的实现功能，这里我们选择了 anyproxy 作为基础服务，站在巨人的肩膀上进行开发。

anyproxy 安装后提供了一个 websocket 服务，我们只需要监听 websocket 端口对代理过来的数据进行动态展示即可：

function initWs(wsPort = 8002, path = 'do-not-proxy') {
  if(!WebSocket){
    throw (new Error('WebSocket is not supported on this browser'));
  }

  const wsClient = new WebSocket(`ws://localhost:${wsPort}/${path}`);
  wsClient.onerror = (error) => {
    console.error(error);
  };

  wsClient.onopen = (e) => {
    console.info('websocket opened: ', e);
  };

  wsClient.onclose = (e) => {
    console.info('websocket closed: ', e);
  };

  return wsClient;
}

// 链接websocket
const connectWs = () => {
  const wsClient = ws.initWs();
  wsClient.addEventListener('message', (e) => {
    const data = JSON.parse(e.data);
    store.commit('addRecord', data.content);
  });
}

但是 anyproxy 仅仅提供 node 端的能力，所以正好 electron 可以使用 nodejs 能力，也就是我们可以借助 electron 来实现 nodejs 能力。这里由于我们是插件化的，所以参考 utools 的设计，实现方式如下：

// preload.js
const AnyProxy = require('anyproxy');

const options = {
  port: 8001,
  webInterface: {
    enable: true,
    webPort: 8002
  },
  forceProxyHttps: true,
  wsIntercept: false, // 不开启websocket代理
  silent: true
};

class Network {
  constructor() {
    this.mockList = [];
    this.proxyServer = null;
  }
  initNetwork(op, {
    beforeSendRequest,
    beforeSendResponse,
    success,
    onRecord,
  }) {
    if (op === 'start') {
      if (!this.proxyServer || !this.proxyServer.recorder) {
        const _this = this;
        options.rule = {
          *beforeSendRequest(requestDetail) {
            if (beforeSendRequest) {
              return beforeSendRequest(requestDetail);
            }
            return requestDetail
          },
          *beforeSendResponse (requestDetail, responseDetail) {
            if (beforeSendResponse) {
              return beforeSendResponse(requestDetail, responseDetail);
            }
            return responseDetail;
          }
        };
        this.proxyServer = new AnyProxy.ProxyServer(options);
        this.proxyServer.once('ready', () => {
          console.log('启动完成');
          success && success(this.proxyServer);
        });
      }
      this.proxyServer.start();
    } else {
      AnyProxy.utils.systemProxyMgr.disableGlobalProxy('http');
      AnyProxy.utils.systemProxyMgr.disableGlobalProxy('https');
      this.proxyServer.close();
      success && success();
    }
  }
  getIPAddress() {
    const interfaces = require('os').networkInterfaces();
    for (const devName in interfaces) {
      const iface = interfaces[devName];
      for (let i = 0; i < iface.length; i++) {
        const alias = iface[i];
        if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
          return alias.address;
        }
      }
    }
  }
}

只需要在 preload.js 中加上 anyproxy 服务的实现，即可完成我们的诉求！

结语

什么是 rubick ?

基于 electron 的工具箱，媲美 utools的开源插件，已实现 utools 大部分的 API 能力，所以可以做到无缝适配 utools 开源的插件。 之所以做这个工具箱一方面是 utools 本身并未开源，但是公司内部的工具库又无法发布到 utools 插件中，所以为了既要享受 utools 生态又要有定制化需求，我们自己参考 utools 设计，做了 Rubick.

欢迎大家给rubick pr 和提 issue 帮助我们完善

Rubick: https://github.com/clouDr-f2e/rubick

相关参考：

HTTP 代理原理及实现（一）

HTTP 代理原理及实现（二）

Electron + Vue 实现一个代理客户端

原文地址：https://blog.csdn.net/qq_32344993/article/details/118253682