Introduction to 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](https://github.com/alibaba/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.

No repository file or test is named. Review the proposed LightProxy introduction, its examples, and the linked quick-start and wireless-proxy documentation first; confirm the documentation entry point and publish the article with its examples and referenced images integrated.

Written by the indexing model from the issue text.