LightProxy – Web debugging proxy alternative to Charles

栏目: IT技术 · 发布时间: 4年前

内容简介:Web development is much complex nowadays, we develop SPA(single page application), react-native/weex, web page in mobile in-app webview or just a JavaScript script on web page.In normal case we can just develop and debug with just webpack & webpack-dev-ser

Web development is much complex nowadays, we develop SPA(single page application), react-native/weex, web page in mobile in-app webview or just a JavaScript script on web page.

In normal case we can just develop and debug with just webpack & webpack-dev-server, we run npm start , change code and see http://localhost:8080 .

However, real world development is always more complex than expect. Sometimes we need replace script on a online page, capture network infomation on mobile application, mock some api content.That’s why web debugging proxy is always good frends for web developers.

LightProxy

LightProxy is a open-source web debugging proxy alternative to Charles, which is baesed on whistle & Electron.

I will take some example to explain how LightProxy works in web development.

Replace a online script

Sometimes we are just develop part of a website/page. For exmaple, there is a online page with many parts:

we-are-dev

Now we build other peoject we-are-dev in local, here is the directry structure:

src/
-- xxx.js
-- sub/
-- -- yyy.js
build/
-- xxx.js
-- sub/
-- -- yyy.js

How to replace the online page with local content? There a some way to do this:

  • Start a local server which serving same content with online page exclude the path of we-are-dev scripts
  • Start a local server which serving like a online-cdn, sering static content from local files and fallback to online content, then use a hosts editor write a 127.0.0.1 online-cdn-domain rule.

But LightProxy could make this easy, just write a rule like

online-cdn-domain/we-are-dev/0.0.1/xxx.js /path/to/we-are-dev/build/xxx.js
online-cdn-domain/we-are-dev/0.0.1/sub/yyy.js /path/to/we-are-dev/build/sub/yyy.js

Refresh on Chrome, you will see info in response headers like this

LightProxy – Web debugging proxy alternative to Charles

And this two scripts are just replace with local files everytime you visit.

Mock Everyhing

You can also mock document content and response headers.

For example we can write a

test.test.com `Hello LightProxy` resHeaders://`{
  "Content-type": "text/html",
  "Custom-header": "oh yes"
}`

LightProxy – Web debugging proxy alternative to Charles

Then you can visit http://test.test.com

Capture Network

Chrome devtools is good enough in most place. But we need to capture network infomation in mobile application etc.

We can just click Whistle tab in LightProxy.

LightProxy – Web debugging proxy alternative to Charles

Then we can check infomation here.

Proxy for mobile

If you need proxy for mobile development, you can follow https://alibaba.github.io/lightproxy/en/wireless-proxy.html to set it up.

Just install the cert and set mobile proxy to LightProxy, then everything works.

Feedback

Project here: https://github.com/alibaba/lightproxy

More document here: https://alibaba.github.io/lightproxy/en/quick-start.html

Any feedback is welcomed, you can open a issue for any feedback in English or Chinese here.


以上所述就是小编给大家介绍的《LightProxy – Web debugging proxy alternative to Charles》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

利用Python进行数据分析

利用Python进行数据分析

Wes McKinney / 唐学韬 / 机械工业出版社 / 2013-11-18 / 89.00

【名人推荐】 “科学计算和数据分析社区已经等待这本书很多年了:大量具体的实践建议,以及大量综合应用方法。本书在未来几年里肯定会成为Python领域中技术计算的权威指南。” ——Fernando Pérez 加州大学伯克利分校 研究科学家, IPython的创始人之一 【内容简介】 还在苦苦寻觅用Python控制、处理、整理、分析结构化数据的完整课程?本书含有大量的实践案例,......一起来看看 《利用Python进行数据分析》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具