Whistle is a cross-platform Web debugging agent based on Node. Similar to Fiddler on Windows, it is used to view and modify HTTP, HTTPS and Websocket requests/responses. It can also be used as an HTTP proxy server. Unlike Fiddler, which modifyrequests and responses through breakpoints, Whistle uses a configuration method similar to hosts. It supports multiple matching methods, such as domain names, paths, regular expressions, wildcards and wildcard paths, and can be extended through Node.

If you have more time, you can see the official document: wproxy.org/whistle/

If you want to get used to common features quickly, read on.

MAC Installation and Configuration

Install Node.js and select the LTS version. After installation, run NPM install -g whistle from the command line (sudo if no permission is prompted)

On the CLI, enter w2 start, press Enter, and open http://127.0.0.1:8899. If the following interface is displayed, the installation is successful.

Whistle of the agent

Install the Chrome Proxy plugin, open Chrome’s App Store, search SwitchyOmega, and add the extension. Create a new scene mode for Whistle and refer to the following figure for each configuration

In the upper right corner of your browser, locate the SwitchOmega extension and select the new Whistle mode. Open the http://local.whistlejs.com/, if you can open the whistle is set successfully, can begin to use!

(If you can’t fQ, please reply the plug-in to the public account, and then you can get the plug-in installation package for installation.)

Commonly used functions

Proxy interface, modify the return body.

The most common scenario is when the back-end interface is dead or not well developed and can be simulated to return fake data so that front-end debugging can be independent of the back-end.

Method 1: Save the return body locally and proxy it locally

https://xxx.com/test file://D:/path/test/file/test.json
Copy the code

Method 2: Create a new data file save in Whistle

Whistle doesn’t automatically add content-Type: application/json to Response Headers if it doesn’t end in. Json. Charset = UTF-8, then some request libraries will not get the correct return.

Once established, write the rule as follows:

https://xxx.com/test file://{createData.json}
Copy the code

If the interface has cross-domain problems, set the response header information

Permanent information:

Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, token
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
content-type: application/json
status: 200
Copy the code

Create data in value

Set up rules

https://xxx.com/test resHeaders://{corsHeader}
Copy the code

With the host

We can specify an IP address for a domain name or a specific URL, bypassing DNS resolution and allowing requests to go directly to the specified IP address. Switching between development, test, and pre-release environments is usually done by switching hosts so that different environments can be accessed without changing the code or accessing different urls based on the environment configuration file.

10.187. 56202. xxx.com  // Multiple domain names can be specified at the same time
Copy the code

redirect

The most common scenario is when a page needs to be debugged in a particular context, but the context has no portal to open the page. For example, in a applet environment, debug an H5 page.

https://www.baidu.com/ redirect://https://xxx.com
Copy the code

Replace online files

If there’s a particular problem with the online environment. It cannot be reproduced in the production environment. At this time, you can directly replace the JS file to the local debugging to improve the debugging efficiency.

http:/ / example.com/cdn/example.js file:// {example. Js} / / can also replace to the local
Copy the code

Example Modify the returned status of an interface

This test is generally used to test the Dr Status locally. An interface returns a specific status, such as 500 or 404, to check whether the page is abnormal

https://xxx.com/test statusCode://500
Copy the code

Insert the js

In this case, it is usually temporary debugging, to insert a section of JS to the page, to see the execution. Or insert some tools JS, convenient debugging. For example, insert vconsole.js. This will bring up a console on the page, and you can see the output of console.log. Especially useful for mobile debugging

https://xxx.com/test js://{vConsole.js}
Copy the code

The effect is as follows:

However, Whistle offers more convenient plugins:

npm i -g whistle.inspect
https://www.google.com whistle.inspect://
Copy the code

Github.com/Tencent/vCo…

Regular use

It is generally used for domain name/URL proxy of a certain type. For example, I want the address containing the domain name baidu.com not to go through proxy

/ ^ (? ! .*baidu.com).*$/ socks:/ / 127.0.0.1:1086
Copy the code

reqScript

Consider one scenario: We need to test the situation that a video upload interface returns 500 to see if it follows the normal prompt logic. Usually, we can solve the problem by simulating the status code. But if the interface is cross-domain, we will first issue an options request with the same path. Only POST requests are processed.

https://xxx.com/test reqScript://{onlyPostRule}
Copy the code

Rules in value

if (method === 'POST') {
    rules.push('https://xxx.com statusCode://500');
}
Copy the code

Turn the HTTPS HTTP

This is because the HSTS or server does not support HTTPS or the certificate is incorrect. For example, the HTTPS certificate in the test environment is not properly configured. Sometimes the HTTPS page cannot be opened, so you need to convert it to HTTP.

https://xxx.com http://xxx.com
Copy the code

HSTS introduced: www.thesslstore.com/blog/clear-…

The last

  • Welcome to add my wechat (Winty230), pull you into the technology group, long-term exchange learning…
  • Welcome to pay attention to “front-end Q”, seriously learn front-end, do a professional technical people…