Introduction to LightProxy: Web debugging proxy alternative to Charles

xcodebuild commented 4 years ago

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:

Some content are render by server for SEO
Some scripts are from other projects
Only some scripts(we-are-dev) are what we are developing

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.

sachinjain024 commented 2 years ago

You can also try out Requestly - Chrome & Firefox browser extension to Intercept & Modify network requests. It is almost comparable to every functionality that Charles Proxy has.

It doesn't show Network traffic because it is visible in Chrome developer tools So you can just copy the URL that you want to modify. Then select the modification type - Redirect a URL(Remote Map), Modify Headers, Modify API Response, Inject scripts, etc.

Here's an example of Modifying Headers using Requestly - https://www.youtube.com/watch?v=CLEHS6NFYZY&ab_channel=Requestly

I am planning to publish a detailed blog post that compares Requestly vs Charles Proxy in more detail. Will share that soon.

sachinjain024 commented 1 year ago

Here's a detailed post I talked about -- Charles Proxy Alternative that runs directly in Chrome, Firefox, and all Chromium-based browsers. No need to install & setup a desktop application.

alibaba / lightproxy