GithubHelp home page GithubHelp logo

alibaba / lightproxy Goto Github PK

View Code? Open in Web Editor NEW
3.1K 36.0 255.0 42.7 MB

💎 Cross platform Web debugging proxy

Home Page: https://lightproxy.org/

License: Apache License 2.0

JavaScript 6.12% TypeScript 84.82% HTML 1.64% Less 7.27% EJS 0.16%
whistle proxy electron debug lightproxy light typescript devtools chrome

lightproxy's Issues

yarn install fail

yarn-error.log

Error: https://registry.npm.alibaba-inc.com/monaco-editor-webpack-plugin/download/monaco-editor-webpack-plugin-1.7.0.tgz: ETIMEDOUT
 at Timeout._onTimeout (/usr/local/Cellar/yarn/1.17.0/libexec/lib/cli.js:141099:19)
 at listOnTimeout (internal/timers.js:531:17)
 at processTimers (internal/timers.js:475:7)

yarn config list

{
  'version-tag-prefix': 'v',
  'version-git-tag': true,
  'version-commit-hooks': true,
  'version-git-sign': false,
  'version-git-message': 'v%s',
  'init-version': '1.0.0',
  'init-license': 'MIT',
  'save-prefix': '^',
  'bin-links': true,
  'ignore-scripts': false,
  'ignore-optional': false,
  registry: 'https://registry.npm.taobao.org',
  'strict-ssl': false,
  'user-agent': 'yarn/1.17.0 npm/? node/v12.5.0 darwin x64',
  lastUpdateCheck: 1577698269175,
  'sass-binary-site': 'http://npm.taobao.org/mirrors/node-sass'
}

删除yarn.lock 可以下载依赖成功,但在yarn run dev时会提醒electron安装失败要求重新安装

spawn node ENOENT

Error: spawn node ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:264:19)
at onErrorNT (internal/child_process.js:456:16)
at processTicksAndRejections (internal/process/task_queues.js:80:21)

只在 Beta 版出现

如何和 umi 一起工作

常用的 umiUMRcommon chunk 等功能可能会对联调体验造成影响,需要写一个文档指导如何配合使用

提供重新初始化证书的菜单

部分用户尤其是 Windows 用户会在第一次安装证书的过程中权限搞错,需要在菜单里直接提供一个安装证书的功能,方便排查问题和恢复

系统代理开启能否提供一个设置开关?

工具体验了下很赞!实际中发现一个问题,mac下手动关闭了系统代理,下次启动还是默认开启了系统代理。如果有一个设置能管理就更好啦,非常感谢。

install package error

# haoranliu @ iMac in ~/OpenSource/lightproxy on git:develop x [16:34:10]
$ cnpm install
✖ Install fail! Error: [whistle@./whistle] resolved target /Users/haoranliu/OpenSource/lightproxy/whistle error: ENOENT: no such file or directory, lstat '/Users/haoranliu/OpenSource/lightproxy/whistle'
Error: [whistle@./whistle] resolved target /Users/haoranliu/OpenSource/lightproxy/whistle error: ENOENT: no such file or directory, lstat '/Users/haoranliu/OpenSource/lightproxy/whistle'
    at module.exports (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/download/local.js:30:11)
    at module.exports.throw (<anonymous>)
    at onRejected (/usr/local/lib/node_modules/cnpm/node_modules/co/index.js:81:24)
npminstall version: 3.23.0
npminstall args: /usr/local/Cellar/node/13.5.0/bin/node /usr/local/lib/node_modules/cnpm/node_modules/npminstall/bin/install.js --fix-bug-versions --china --userconfig=/Users/haoranliu/.cnpmrc --disturl=https://npm.taobao.org/mirrors/node --registry=https://r.npm.taobao.org

根目录package.json使用了./whistle 但是根目录没有whistle文件夹

"update:whistle": "rm -rf whistle && git clone https://github.com/avwo/whistle --depth=1 && patch -u -b whistle/lib/inspectors/res.js -i whistle.patch && yarn add ./whistle ./whistle-start",

重启代理之后无法再次监听 12888 端口

现象:重启代理之后端口先是 12888,后出现 5xxxx,重新启动软件来保证监听 12888 端口
预期:希望能一直监听 12888 端口
猜想:怀疑前面进程没有释放完被占用,新进程无法再次监听 12888 端口

Roadmap

Roadmap

1.1.0

主要 bugfix & Windows 兼容性问题

对外发布

1.1.5

插件机制,允许三方开发新的 tab,考虑兼容 whistle 插件等

1.2.0

类 Devtools 抓包界面,需要在 whistle 中实现 Devtools Protocol,工作量可能较大,要拆成多个版本实现

image

Roadmap 为大致要做的方向,具体的事项参考 https://github.com/alibaba/lightproxy/projects

内置常用软件白名单规则

有部分常用软件(例如 AppStore)不愿意被代理,目前是把这些规则放在 Default 中容易被用户删除,把这些规则移动到设置中作为一个选项

LightProxy 全能代理抓包工具

原文见:https://www.xcodebuild.com/2020/01/05/yuque/lightproxy/

LightProxy 全能代理抓包工具

image

LightProxy 是 IFE 团队开发的一款基于 Electron 和 whistle 的开源桌面代理软件,致力于让前端开发人员能够精确的掌握自己的开发环境,通过 HTTP 代理使用规则转发、修改每一个请求和响应的内容。

image

为什么需要一个代理工具

因为代理工具能够让你随心所欲的掌控自己当前的开发环境。

开发环境是影响研发效能最大的一个因素之一,不可用的环境,无法完成的部署,不稳定的上游环境等等都让一个非常简单的需求轻松消耗掉数天的时间

当开发环境陷入一种不健康的状态时,开发者就更容易破罐子破摔。宁可忍受每改一行代码重新手动 build 几分钟再开发也不愿意花时间让 watch 可用,然后发现自己越来越忙乱。

image

希腊神话中有一个受到惩罚的人西西弗斯,他受罚的方式是:必须将一块巨石推上山顶,而每次到达山顶后巨石又滚回山下,如此永无止境地重复下去。在西方语境中,形容词“西西弗斯式的”(英语:sisyphean)形容“永无尽头而又徒劳无功的任务”。

当你的接口和页面突然不能工作时,代理工具可以快速 mock 一个。当你想测试一下线上页面改动可能会带来的后果,代理工具可以让你不经过复杂的发布过程快速在本地看到想要的效果。

什么是好的开发环境

既然我们在讨论开发环境对于研发效率的影响,那我们先来看一看什么是好的前端开发环境。

稳定

好的开发环境首先应该是稳定可用的,不应该在开发测试的过程中频繁挂掉或者频繁发生改变。
依赖于后端日常接口进行调试的前端对这点应该深有体会,自己的问题还没解决,环境就时常带来新的问题。

快速验证

修改代码能够在尽可能短的时间内得到验证也是一个基本诉求,这也是为什么大部分前端构建都会关注 Hot reload 和更高级的 HMR 。

有些场景下的修改一次简单的修改就要经过长时间的等待,例如依赖上游修改接口的返回内容,需要修改后端的页面结构然后重新部署,需要走一遍完整的发布流程来测试某个修改在真实的线上页面会产生的影响等等。

这种改一行等几十分钟的开发方式对效率的拖累是极其恐怖的。

image

和线上的一致性

很多项目的线上环境极为复杂,为了解决日常开发中的问题,也会有一个线下的 DEMO 页面,最后开发完再搬到线上。

这种方式相对来说较为稳定且能快速验证,但比较凸显的问题在于和线上并不一致。开发中会存在很多 if-else 的逻辑,例如最常见的:

const API_BASE = utils.isDaily ? 'http://localhost:7001:': 'https://xxxx/';

这种情况也往往导致 Bug 非常难以被定位,最后逼着开发者退化到在线上环境低效的进行 debug。

确定性

开发者对于当前的环境应该是有确切认知的,而不是一直不停的怀疑自己的配置到底有没有生效,命中的是不是又是缓存等等。

有些情况下我们利用 hosts 切换工具来进行联调,但在切完 hosts 后却又不得不来回确认自己的切换是否生效,清楚 Chrome 的 DNS Cache,清楚 Socket 之类的。

这种非确定性不但提高了开发者心智负担,而且也会导致 Bug 难以定位。

LightProxy 如何解决这些问题

那么 LightProxy 要如何解决上面的这些问题呢

LightProxy 通过基于 whistle 的代理能力,能够任意修改开发环境中的 request 和 response 。

举个例子

例如当我们需要在线上页面中加入一个 DIV ,如果没有代理我们需要依赖后端一套类似的预发环境,而有了 LightProxy 我们只需要使用:

https://www.alibaba.com/ htmlPrepend://(<div>test</div>)

image

就可以在一个线上的页面中插入一个 div 。

同样的,我们可以直接把页面中的一个 JS 转发到本地一个开发中的文件

https://www.google.com/xx.js file:///User/xxx/xxx.js

当后端缺少 CORS 头时,我们可以直接给它先加上 CORS 头

https://xxx.com/xx.json resCors:// # 给响应的请求增加 CORS header

也可以直接把某个文件变成一个内联的文字,只要用类似 ES6 字符串框起来

https://xxx.com/xx.json `test text`

总体来说,LightProxy 能够让开发者完全掌控自己的开发环境,用极低的成本定制自己的开发环境,而不是总是在等待依赖方按照自己的需求提供相应的环境。

甚至于,你可以自己用 NodeJS 书写针对某个规则的响应:使用 NodeJS 编写规则

快速确认

为了能够快速确认代理是否按预期工作,我们在经过 LightProxy 代理的网络请求的 Response Header 增加了一些相关的信息,用于协助开发人员快速确认当前请求命中了什么规则,以及这个请求是怎么来的(由谁响应,匹配什么规则,实际真正访问的来源)。

image

没有银弹

虽然说代理工具可以快速的解决各种开发环境上的坑,但也并不是银弹。

这种方案更加适合在开发阶段快速绕过各种拦路虎,但最终在多人协作中仍然需要有健康的环境来保障项目的协作流程流畅,不能因为有了代理工具后就完全无视开发环境的问题。

开始 & 下载

说了这么多,开始使用 LightProxy 控制你的开发环境吧:https://github.com/alibaba/lightproxy

下载

macOS 版
Windows 版

问题反馈

欢迎加入钉钉群讨论和反馈问题,或者直接在 issue 反馈问题:https://github.com/alibaba/lightproxy/issues

ps: Whistle 的作者也在群里,欢迎来撩

Webp net-resizeimage (4)

链接

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.