What is a whistle

Whistle is a cross-platform packet capture and Web debug tool. With Whistle, you can configure a proxy server, simulate interface data, capture requests and redirect them to specific urls, modify request headers and response headers, modify parameters for GET requests, and inject JAVASCRIPT and CSS into matching pages

Whistle offers similar functions to Fiddler, but also some features that fiddler doesn’t have. It’s a much better experience than Fiddler. At first, I was the only one in the company. Whistle, which runs on Windows, MAC and Linux, is constantly being updated, and its maintainers are responsive to the community’s questions.

The rest of this article will explain how to install and use whistle. If you want to learn how to use whistle, you are advised to try it after reading the whole article. If you have any problems, you can read the resources at the end of this article or Google it yourself.

The installation of the whistle

  1. To install Node.js, click the link and select install LTS version
  2. Run from the command linenpm install -g whistle(If no permission is prompted, run as admin or sudo)

The start of the whistle

  1. Run Whistle Start from the command line (w2 restart is recommended; when you need to restart, press up and enter).
  2. Visit http://127.0.0.1:8899/ in the browser. If a packet capture page is displayed, the installation and startup are successful

Whistle of the agent

After Whistle starts up, we need to delegate browser requests to Whistle so that Whistle can handle requests from the browser. To do this, we need to install a SwitchyOmega Chrome extension.

SwitchyOmega installation and configuration

  1. Access this link, click “Add to CHROME”, click the popup box “Add Extension”, if blocked, you can click here and select Switchyomega_chromium. CRX to download, then enter CHROME :// Extensions/in the browser address bar, Press Enter to open the page, drag the downloaded file to the Extensions page, and click Install extension.
  2. The page is automatically redirected to the configuration page of SwitchyOmega. Click “Skip Tutorial”
  3. Click on the left “New Scene Mode…” “, you can type “whistle”
  4. Click the Create button
  5. Proxy server -> Proxy Protocol, the drop – down box to select HTTP, willexample.comInstead of127.0.0.1That will be80Instead of8899
  6. Delete all text from the “unpropped address list” field, as the host is likely to be used locally
  7. Click “Apply Options” on the left
  8. Switch to whistle by clicking the circle icon in the upper right corner of Chrome
  9. To open whistle, type local.whistlejs.com and press Enter. SwitchyOmega is configured ok

Common configurations for Whistle

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. Typically at work, switching between development, test, and pre-release environments is 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.

Whistle’s host is configured under rules:

The following are common host configuration methods:

Map qq.com to 127.0.0.1. When you visit www.qq.com/, you ask for local 127.0.0.1

127.0.0.1 qq.com
Copy the code

You can also take the port with you

127.0.0.1:3000 qq.com
Copy the code

You can even map a specified path to an IP and port

127.0.0.1:3000 https://www.qq.com/a/b/c
Copy the code

Of course, writing the rule the other way around also works

https://www.qq.com/a/b/c 127.0.0.1:3000
Copy the code

A Whistle has more than just a host. Read on

redirect

Redirect Baidu.com to QQ.com

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

This rule is especially useful in mobile debugging scenarios: for example, we want to open a web page in an APP, but the APP does not have a URL input box. We can randomly click the information flow of this APP. If we catch a page request, we can redirect it to our URL.

Modify the return body

This function can be simulated to return false data when the back-end interface is down or not well developed, allowing front-end debugging to be independent of the back-end

http://example.com/api/getUserList file://D:/path/to/your/file/userList.json
Copy the code

Replace the local userlist. json file with the return of the getUserList request. If it’s not easy to write the file on disk, put it in the Values file that comes with Whistle.

http://example.com/api/getUserList file://{userList.json}
Copy the code

Values is a useful feature, located as follows:

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.

Replace online files

If there are formal environment bugs, js can be replaced with local files or folders to improve debugging efficiency.

http://example.com/cdn/example.js file://D:/path/to/your/file/example.js
Copy the code

Replace the request URL

http://qq.com/a/b?c=d http://qq.com/v/w?x=y&z=z
Copy the code

Note: This rule doesn’t change in the browser’s network because the request has already been sent to the Whistle layer. You can see the Real Url on the right side of the network in Whistle

Modify return code

By modifying the return code, you can simulate an interface error

https://www.qq.com statusCode://500
Copy the code

Modify the headers of the request and response

Web development sometimes encounters some problems caused by incorrect setting of the request header. If the problem occurs in the formal environment, we can simulate the repair by modifying the request header (such as modifying Cookie, user-Agent, content-Type, etc.). After confirming the problem, Then modify the code to improve efficiency.

https://www.qq.com reqHeaders://{loginCookie}
Copy the code

Similarly, we can modify response headers with resHeaders. As mentioned above, we can impersonate fake data using file://{userlist. json}, but this may cause some cross-domain headers to be lost. We can add cross-domain correlation headers via resHeaders

https://www.qq.com/some/ajax resHeaders://{CORSHeaders}
Copy the code

The value of CORSHeaders in Values is

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

Insert the js

We can insert a JS from Whistle into a page without changing the page code. For example, we can insert a JS to refresh the page:

https://www.google.com jsPrepend://{reload.js}
Copy the code

More useful is to insert debugging related js, such as vconsole.js, into the page. You can of course download vconsole.min.js to github, or put it in Values, and then add the initialization code. Finally, inject vconsole.js into the page to debug. However, Whistle offers more convenient plugins:

npm i -g whistle.inspect
Copy the code
https://www.google.com whistle.inspect://
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. To process only post requests, we can do this:

http://qq.com/media/video reqScript://{onlyPostRule}
Copy the code

The onlyPostRule of Values:

if (method === 'POST') {
  	rules.push('http://qq.com/media/video statusCode://500');
}
Copy the code

https

To fetch HTTPS requests, you need to install a certificate. The documentation on the official website is very detailed, but there are two points to add:

  1. If you install the Whistle certificate on one computer, you’ll need to continue installing the Whistle certificate on another computer
  2. The download of rootca.crt is enabled because Whistle acts as a whistle agent. Therefore, when installing a certificate on a mobile device, you must connect to whistle’s agent to install it

Mobile phone agent to whistle

You can connect your PC and phone to the same LAN (usually with a wifi connection, but the company has network policy restrictions) and click Online in the upper right corner of the Whistle interface

Enter wifi Settings on the phone, set the agent to manual, circle ipv4 IP for the host name, and set the port to whistle’s default 8899:

After doing this, we can catch the request on the phone.

That’s it for Whistle. Feel free to leave a comment if you have any questions or ideas.

References:

Whistle Official Document