Recently, I used Whistle, an open source tool that replaces Charles in the Node environment and is easy to use. I found that whistle is so powerful that it covers almost everything you can do with a packet capture debugging tool (official note). Many of the flexible requirements can be customized. However, this article will give you a primer on how to use whistle to perform charles-like front-end proxies and mocks.

1 installation

npm install -g whistle
Copy the code

If the installation is too slow, you can use domestic sources:

npm install whistle -g --registry=https://registry.npm.taobao.org
Copy the code

2 start

w2 start
Copy the code

The following figure shows the local tuning environment. In order to enable the front-end page request to be returned by the local “front-end file service”, the forwarding table needs to be configured through the switchOmega browser plug-in. The specific domain name is first forwarded to the Whistle agent process, which determines whether it is a front-end static file request. If yes, forward to the local from the front-end service. If the request is from the backend API, the local network process accesses the host and DNS services to obtain the IP address, and then accesses the external network to request the backend. However, when it comes to front-end mock data, you can configure the rules for the API interface in the Whistle agent process to delegate to a local JSON file so that the back-end access can return the desired data directly in the native environment. This section starts with how to delegate front-end static files.

3.1 Configuring the SwitchOmega For other browser proxy methods, see the Whistle official document configuring the Proxy section. After the installation is complete, right-click the icon and choose “Options” to jump to the configuration page.

Added situational mode Whistle:

Configuring the Auto Switch rule:

The conditional setting can be referred toOfficial configuration documentSet to domain name wildcard:

*.fullstackcoding.cn
Copy the code

When running, select auto Switch mode:

3.2 Configuring whistle After starting whistle, you can visit http://127.0.0.1:8899/ to see the configuration page of Whistle:

After entering the name of the rule we want to configure, we can start to configure the rule:

See the Whistle website hereConfiguration modeThe configuration rules are compatible with the hosts configuration mode of the system, including the left IP address and the right domain name. However, whistle’s default configuration is from left to right. If a whistle matches the pattern on the left, the request will be forwarded to the operatorURI. To keep the logic simple, we suggest that all whistle requests be configured from left to right.

pattern operatorURI
Copy the code

In addition to the host configuration, the most commonly used is the regular pattern. In order to explain how to match the regular pattern, it is necessary to review the common regular symbols. For more information, please visit MDN for related developer materials.

Common regular symbol paraphrase
\ A backslash before a non-special character indicates that the next character is a special character and cannot be taken literally. For example, a “b” without a “” before it usually matches a lowercase “b”, meaning that the character will be interpreted as literal no matter where it appears. But if it is preceded by “”, it no longer matches any characters, but represents a character boundary. A backslash before a special character indicates that the next character is not a special character and should be taken literally. For details, please refer to the “Escaping (Escaping)” section below.
^ Matches the start of the input.
$ Matches the end of the input.
(x) It matches ‘x’ and remembers the matches.
. (decimal point) matches any single character except a newline character by default.
* Matches the previous expression 0 or more times.
? Matches the previous expression 0 or 1 times.
[^xyz] A reverse character set. That is, it matches any character not contained in square brackets. You can use dashes (-) to specify a character range. Any ordinary character is in play here.
\d Match a number. Equivalent to [0-9].

Let’s use these regular symbols to write a pattern matching model, such as test1. Fullstackcoding. Cn/reactapp this request, in which the test is a number 1 ~ 4 behind, then we can through the following matching rules to match:

/^https:\/\/test\d\.fullstackcoding\.cn\/reactapp\/$/ http://localhost:8081/
Copy the code

If you need to put the test1. Fullstackcoding. Cn/reactapp/cs… Reactapp may not have this intermediate path, and the path of the CSS static folder and the name of the file should be inserted into the forwarded URL, which can be matched according to the following matching rules. $2 in the operatorURI is the path to the static CSS folder and the following file name, $1 is captured by the first (reactapp/) parentheses, and $0 is the contents of the entire expression:

/^https:\/\/test\d\.fullstackcoding\.cn\/(reactapp\/)?((?:js|css|images)\/(?:.*))/ http://localhost:8081/$2
Copy the code

If you want to implement the Preserve host in header fields function in Charles, you need to add the following protocol to the rule to override the request header:

reqHeaders://`host=${url.host}`
Copy the code

This completes the forwarding of the front-end request.

It’s as simple as this: Save the JSON you want to return as a TXT file in Notepad and add this rule to the whistle rule. You can add more rules to whistle’s rules if you want to separate the contents of each page:

/.*\/apiname\? size=20&index=0&reqId=(.*)$/ file:///Users/dongyang/Desktop/test.txtCopy the code