Debugging online file ing local files in chrome

With reres, Chrome has the autoresponse function of path ing.

Frontend development often requires Remote Environment debugging. For example, you can modify online bugs and the development environment is not local. We need to map remote CSS files or JS files to local files, and debug and develop by modifying local files. Generally, we can map data using the following methods:

1. Modify the host file. Only domain names can be mapped to IP addresses.

2. Use Apache or nginx to build a reverse proxy-the environment needs to be installed, which is relatively cumbersome to configure

3. Use the autorespnose function in Fiddler-directory ing is not supported and cannot be used in Mac or Linux.

The above method, or lack of functions, or additional software installation, or complicated configuration, or does not support multiple platforms.My ideal request ing tool should be like this: simple, open the browser can use, support directory ing, file ing, cross-platform.Reres is written in this target. You can map requests to other URLs or local files or directories. Reres supports single URL ing and directory ing.

Use reres now

First install reres: https://chrome.google.com/webstore/detail/reres/gieocpkbblidnocefjakldecahgeeica? Hl = ZH-CN & GL = Cn

After installation, enterchrome://extensions/Go to the extension page, find reres, and check "allow access to file URLs" to allow reres to support local ing, as shown below:

Now, reres can be used. The following describes how to use some basic functions:

Add Rules

Click "add rule", enter the following information, and then save:

• If URL match: A regular expression. When the requested URL matches the regular expression, the rule takes effect. Note: Do not start/And end/Gi, Such/. */GiPlease write.

• Response: Ing response address. The mapped response address will replace the regular matching part in the URL. The online address isHttp ://The local address startsFile :///For exampleHttp://cssha.comOrFile: // D:/a. js

Start/disable

Select or deselect the check box before the corresponding rule.

Edit rule

Move the cursor over the response rule and click "edit ".

Delete rule

Move the cursor over the response rule and click "delete ".

Batch import rules

Click "Manage Rules" to go to the Management page. Click "import" at the top to import the rule list file. The rule list file is a JSON file in the following format:

[    {        "req":"^https?:\\/\\/.*test.com",        "res":"http://qunar.com",        "checked":false    },    {        "req":".*hanan.com",        "res":"http://cssha.com",        "checked":true    }]

The meanings of related fields are as follows:

• REQ: The regular expression that the request matches (corresponding to the content of the if URL match input box)

• Res: Mapped response address (corresponding to the content in the response input box)

• Checked: Enabled or not

 

The source code of this plug-in is hosted at https://github.com/hanan198501/reres. the development process involves the following source projects. Thank you for your support:

• Less

• Bootstrap

• Angularjs

•  

Debugging online file ing local files in chrome