开源代码httptoolkit，如何本地运行测试？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

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

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

下载地址

httptoolkit项目由三部分组成，分别是：desktop、server和ui。下载地址是：

• https://github.com/httptoolkit/httptoolkit-desktop/archive/master.zip
• https://github.com/httptoolkit/httptoolkit-ui/archive/master.zip
• https://github.com/httptoolkit/httptoolkit-server/archive/master.zip

desktop、server和ui三者之间的关系，可以查看这个readme.md文件：

• https://github.com/httptoolkit/httptoolkit-desktop/blob/master/README.md

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

注意事项

下面的是一些注意事项：

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

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

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的大多数功能了（并不推荐这么使用）。对，是的，就一个网页，就可以打开本地程序，并且执行抓包任务了。是不是非常的神奇？

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

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

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

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

npm run start:dev

如果不正常的话，请看苏南大叔的继续分析。大家请对比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，还是默认下载最新版的server到desktop目录下面。

这里不提中间的过程了，反正是比较崩溃。这里就说最后的结论吧。问题主要集中在：官方提供setup-dev.js脚本老出各种问题，所以就自动改手动了。

• 步骤一，修改httptoolkit-server启动文件。

把httptoolkit-desktop/httptoolkit-server/bin/下面的两个文件，httptoolkit-server和httptoolkit-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版本，都给标注的明明白白...下面的截图是他代码里面自己写的，所以，苏南大叔这里截图出来也不能算违规。

下面的文字是作者原版注释，大家有钱的记得捧个钱场。大意就是：“直接在这个地方返回一个true，就是pro版本了，但是请你不要这么做”。看，这老外就是实诚的过分了，对吧？哈哈~

        // 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界面还是会继续逻辑崩溃。这块的逻辑，作者没公开。所以，苏南大叔也就不公开了。

相关文章

• https://newsn.net/say/httptoolkit.html

结论

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

• https://newsn.net/tag/httptoolkit/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。