本文讲述httptoolkit作为开源代码的属性,在上篇文章中,苏南大叔描述了httptoolkit的基本使用问题。本篇文章中,苏南大叔描述httptoolkit的代码组成及运行。作为electron系列的开源代码,httptoolkit给人的惊喜,也是蛮多的。

苏南大叔:开源代码httptoolkit,如何本地运行测试? - httptoolkit-dev
开源代码httptoolkit,如何本地运行测试?(图8-1)

httptoolkit并不是简单的传统electron程序,在github上面,它分为三部分:desktopserverui,不是基于传统的file://协议的,而是http://协议。本文测试环境:httptoolkit-desktop@20200303httptoolkit-server@20200316httptoolkit-ui@20200321

下载地址

httptoolkit项目由三部分组成,分别是:desktopserverui。下载地址是:

desktopserverui三者之间的关系,可以查看这个readme.md文件:

分别下载三个项目,然后分别执行npm i安装依赖项目,这些都是基本操作。

苏南大叔:开源代码httptoolkit,如何本地运行测试? - httptoolkit-ui
开源代码httptoolkit,如何本地运行测试?(图8-2)

注意事项

下面的是一些注意事项:

  • server会占用端口4545645457。(如果重复启动两个server的话,就会报端口错误)
  • 本地测试的话,使用的是local.httptoolkit.tech这个域名(事实上是本地127.0.0.1),端口是8080,所以,是不是会本地的nginx或者apache有端口冲突呢?
  • 成品测试的话,是使用的app.httptoolki.tech这个域名,端口还是8080。是远程的地址哦。是不是非常非常的意外...这个不会有8080端口冲突的危险。

苏南大叔:开源代码httptoolkit,如何本地运行测试? - httptoolkit-mock
开源代码httptoolkit,如何本地运行测试?(图8-3)

这里,您可能需要下面的语句来处理端口冲突的问题:

kill -kill $(lsof -t -i :8080)
kill -kill $(lsof -t -i :45456)
kill -kill $(lsof -t -i :45457)

相关文章:https://newsn.net/say/kill-by-port.html

测试方式之第一步,启动ui

本文中,苏南大叔目标是测试模式。启动ui,根据官方说明,你可以使用自己的ui界面,或者使用官方提供的ui界面。这里,苏南大叔当然是使用官方界面。为了防止端口冲突,建议您先用下面的语句,为8080端口扫清障碍。

kill -kill $(lsof -t -i :8080)

官方ui里面自带了server项目,所以,它有两种启动方式:
方案一(推荐):使用自带的server,那么运行npm start
方案二:使用独立的server,就是在server项目下面执行npm start,而ui项目下面执行npm run start:web

这里执行完毕后,就可以在本地通过local.httptoolkit.tech:8080来使用httptoolkit的大多数功能了(并不推荐这么使用)。对,是的,就一个网页,就可以打开本地程序,并且执行抓包任务了。是不是非常的神奇?

苏南大叔:开源代码httptoolkit,如何本地运行测试? - local-web-ui
开源代码httptoolkit,如何本地运行测试?(图8-4)

local.httptoolkit.tech这个域名的解析地址是:127.0.0.1

测试方式之第二步,启动desktop

实际上,desktop不启动的话,也是可以通过网页的方式,执行几乎所有的操作的。如果启动desktop的话,就是看起来更像是一个应用程序。毕竟,让大家操作网页界面,还是很多人不能接受的。而且网页操作的时候,是有一些js错误提示的。

官方推荐的命令如下所示,如果您那边一切正常的话,就不用再往下看了。

npm run start:dev

苏南大叔:开源代码httptoolkit,如何本地运行测试? - httptoolkit-npm-start-dev
开源代码httptoolkit,如何本地运行测试?(图8-5)

如果不正常的话,请看苏南大叔的继续分析。大家请对比desktop根目录下面的package.json文件。

"scripts": {
    "prestart": "node setup-local.js",
    "start": "electron-forge start",
    "prestart:dev": "node setup-dev.js",
    "start:dev": "APP_URL='http://local.httptoolkit.tech:8080' electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "publish": "electron-forge publish"
  },

苏南大叔的测试中,主要的矛盾点就集中在这里,折腾了好几天。主要矛盾点就两个:

  • 处理APP_URL,是使用本地设置local.httptoolkit.tech,还是默认的app.httptoolkit.tech
  • httptoolkit-server,本地的话,使用ui配套的server,还是默认下载最新版的serverdesktop目录下面。
这里不提中间的过程了,反正是比较崩溃。这里就说最后的结论吧。问题主要集中在:官方提供setup-dev.js脚本老出各种问题,所以就自动改手动了。
  • 步骤一,修改httptoolkit-server启动文件。

httptoolkit-desktop/httptoolkit-server/bin/下面的两个文件,httptoolkit-serverhttptoolkit-server.cmd内容进行修改:

#!/usr/bin/env node
setInterval(() => {}, 999999999);
  • 第二步,清空prestart:dev命令。

清空pageage.json里面的prestart:dev命令:

"prestart:dev": "",
"start:dev": "APP_URL='http://local.httptoolkit.tech:8080' electron-forge start",
  • 第三步,执行electron
npm run start:dev

pro版本

苏南大叔之所以对这个西班牙开发者这么推荐赞赏,其中一点就是看他的pro版本的逻辑了,这孩子是无比的实诚。不但代码开源,而且连哪里可以变成pro版本,都给标注的明明白白...下面的截图是他代码里面自己写的,所以,苏南大叔这里截图出来也不能算违规。

苏南大叔:开源代码httptoolkit,如何本地运行测试? - httptoolkit-ispaiduser
开源代码httptoolkit,如何本地运行测试?(图8-6)

下面的文字是作者原版注释,大家有钱的记得捧个钱场。

        // You could set this to true to become a paid user for free.
        // I'd rather you didn't. HTTP Toolkit takes time & love to build,
        // and I can't do that if it doesn't pay my bills!
        //
        // Fund open source - if you want pro, help pay for its development.
        // Can't afford it? Get in touch: tim@httptoolkit.tech.

上边的代码修改之后,界面大部分功能就pro了。不过setting界面还是会继续逻辑崩溃。这块的逻辑,作者没公开。所以,苏南大叔也就不公开了。

苏南大叔:开源代码httptoolkit,如何本地运行测试? - httptoolkit-active
开源代码httptoolkit,如何本地运行测试?(图8-7)

newsn.net:这里是【作者】可见内容

相关文章

结论

本篇文章,主要以如何本地调试httptoolkit为主,启动本地调试模式,才有可能获得其中的一些关键奥秘嘛。更多文章,请点击苏南大叔的博客:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   httptoolkit

本站的忠实读者小伙伴,正在阅读下面这些文章: