LightProxy – Web debugging proxy alternative to Charles

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

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"
}`

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.

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.