Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

LightProxy all-around proxy packet capture tool #19

Open
xcodebuild opened this issue Jan 6, 2020 · 1 comment
Open

LightProxy all-around proxy packet capture tool #19

xcodebuild opened this issue Jan 6, 2020 · 1 comment

Comments

 @xcodebuild
Copy link
Collaborator

xcodebuild commented Jan 6, 2020

See the original text: https://www.xcodebuild.com/2020/01/05/yuque/lightproxy/

LightProxy all-around proxy packet capture tool

 image

LightProxy Yes IFE Team developed a model based on Electron And whistle The open source desktop agent software of is committed to enabling front-end developers to accurately master their own development environment HTTP The proxy uses rules to forward and modify the content of each request and response.

 image

Why a proxy tool is needed

Because proxy tools can let you control your current development environment as you wish.

development environment It is one of the most important factors affecting R&D efficiency, such as unavailable environment, uncompleted deployment, unstable upstream environment, etc Let a very simple requirement easily consume several days of time

When the development environment falls into an unhealthy state, developers are more likely to break pots. Prefer to endure manual operation every time a line of code is changed build I don't want to spend time making the watch available after a few minutes of development, and then I find myself getting more and more busy.

 image

In Greek mythology, there was a man who was punished by Sisyphus. The way he was punished was: he had to push a huge stone to the top of the mountain, and every time he reached the top of the mountain, the huge stone rolled back to the bottom of the mountain, and so on. In the Western context, the adjective "sisyphean" (English: sisyphean) describes "an endless and futile task".

When your interface and page suddenly fail to work, the proxy tool can quickly mock One. When you want to test the possible consequences of online page changes, proxy tools can let you quickly see the desired effect locally without going through a complex publishing process.

What is a good development environment

Since we are discussing the impact of development environment on R&D efficiency, let's first take a look at what a good front-end development environment is.

stable

A good development environment should first be stable and available, and should not hang up or change frequently during development and testing.
The front end, which relies on the daily interface of the back end for debugging, should have a deep understanding of this point. The environment often brings new problems before its own problems are solved.

Quick verification

It is also a basic requirement that the modified code can be verified in the shortest possible time, which is why most front-end builders focus on Hot reload And more advanced HMR  。

In some scenarios, a simple modification will go through a long wait. For example, depending on the return content of the upstream modification interface, you need to modify the page structure of the backend and redeploy it. You need to go through a complete publishing process to test the impact of a modification on the real online page.

This development method of changing a line and waiting for dozens of minutes is extremely terrible for the drag on efficiency.

 image

Consistency with online

The online environment of many projects is extremely complex. In order to solve problems in daily development, there will also be an offline DEMO Page, and then move to online after development.

This method is relatively stable and can be quickly verified, but the prominent problem is that it is not consistent with online. There will be many if-else Logic, such as the most common:

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

This situation also often leads to Bug It is very difficult to be located, and finally forces developers to degenerate to online environment for inefficient debugging.

certainty

Developers should have a clear understanding of the current environment, rather than constantly doubting whether their configuration is effective, whether the cache is hit, and so on.

In some cases, we use hosts Switch tools for joint commissioning, but after switching hosts Later, he had to check back and forth to see if his switch was effective. He had to know the DNS Cache of Chrome and the Socket.

This uncertainty not only increases the mental burden of developers, but also makes it difficult to locate bugs.

How does LightProxy solve these problems

So LightProxy How to solve these problems

LightProxy Based on whistle The agent capability of the request And response  。

for instance

For example, when we need to add a DIV If there is no agent, we need to rely on a similar pre release environment on the back end LightProxy We just need to use:

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

 image

You can insert a div  。

Similarly, we can directly put a JS Forward to a local file under development

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

When the backend is missing CORS First, we can add CORS Head

 https: //Xxx. com/xx. json resCors://# Add CORS header to the response request

You can also directly change a file into an inline text by using ES6 String framed

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

on the whole, LightProxy It allows developers to fully control their own development environment and customize their own development environment at a very low cost, rather than waiting for the relying party to provide the corresponding environment according to their own needs.

You can even use it yourself NodeJS Write a response to a rule: Use NodeJS to write rules

Quick confirmation

In order to quickly confirm whether the agent works as expected, we have LightProxy The response header of the proxy network request adds some relevant information to help developers quickly confirm what rules the current request hit and how the request came from (who responded, what rules were matched, and the actual source of access).

 image

No silver bullet

Although the agent tool can quickly solve the problems in various development environments, it is not a silver bullet.

This solution is more suitable for quickly bypassing various obstacles in the development phase. However, in the end, a healthy environment is still needed in the multi person collaboration to ensure the smooth collaboration process of the project. You can't completely ignore the development environment after having an agent tool.

Start&Download

Having said so much, I started to use it LightProxy Control your development environment: https://github.com/alibaba/lightproxy

download

MacOS version
Windows Edition

Problem feedback

Welcome to join the nail group to discuss and feedback questions, or directly feedback questions on the issue: https://github.com/alibaba/lightproxy/issues

Ps: The author of Whistle is also in the group. Welcome to flirt

 Webp net-resizeimage (4)

link

 @imtaotao
Copy link

The group QR code has expired~

Sign up for free to join this conversation on GitHub . Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants