scenario

A front-end engineer might encounter a scenario where everything in the test environment works fine, something goes wrong in the production environment, and a new problem is introduced after the bugs are fixed and the system goes live. The process can only be repeated again.

So can we debug the function without going online, using native code directly on the line.

We have the following tools to choose from: Fiddler (Windows), Charles (MAC), MitmProxy (script customizable)

Here we take Charles and MitmProxy as examples to illustrate

charles

1. Open Charles, click Tools -> Map Local -> Add, Map the required Path to Local Path (your own Local directory), and find the directory or file you need to Map (such as js directory).


2. We can also choose Map Remote mode, which can Map to URL address, such as www.example.com/js -> test.example.com/js

3. Next, we just need to let the browser proxy to Charles, Charles default enabled HTTP proxy, 8888 end

  • Chrome users download the plugin switchyOmega and configure it as follows

  • Safari users do not need to install the plugin, just Charles -> Proxy -> MacosProxy.

4. The configuration is complete. Next, your local js changes can be applied directly to Exampel.com.

mitmproxy

Mitmproxy doesn’t have an interface and can only run on a terminal, but it can customize Python plug-ins to do what you want.

Let me first explain how local files can be applied directly online.

The idea is that we use a proxy, or more accurately, a middleman hijacking, but the middleman is us.

The agent software will modify the content returned to us according to the rules we configured when we visit the webpage. For example, when we visit example.com/js/a.js, we find that we configured the rules to find the local file A.js. After finding the file and getting the content, The boby content of the response is directly changed to the local content, so that the browser will render according to the local content.

We use mitmProxy script to implement a custom file test.py

Import re import glob from mitmproxy import HTTP # main_js = glob.glob('./js/a\.js') main_content = "if main_js: with open(main_js[0]) as f: Main_content = f.read() # match example.com/js/a.js pattern = re.compile("http://example\.com/js/a\.js") def request(flow: http.HTTPFlow) -> None: if pattern.match(flow.request.pretty_url): flow.response = http.HTTPResponse.make( 200, main_content, {"Content-Type": "application/javascript", "Content-Encoding": "gzip"} )Copy the code

Then run mitmdump -s test.py to achieve the same effect as Charles.