Whistle development debugging best practices

This is an online sharing for students last week, which has been organized into articles here.

What’s a whistle?

First of all, the definition of the official website is as follows:

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, Websocket requests and 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.

A Whistle acts as a “hub” between a client and a remote server. When you make a request to a server, the proxy server picks up the request and forwards it to the remote server, which then passes the results back to the client.

Whistle is a forward proxy, as opposed to nginx’s reverse proxy, so what’s the difference? You can look at these two pictures.

Forward proxy:

Reverse proxy:

Use words to describe is more popular, if we go to rent a house, here I am, “the client”, mediation is “is a proxy server”, the landlord is “Internet”, here I am to looking for a house, go and find a mediation, let him (proxy server) to help me to look for houses, it is a proactive behavior, is the forward agent.

If we go to rent a house without looking for an agent, I find the house in a rent group and go to look at the house on site, only to find that this is a principal landlord and very angry. In this scenario, the “primary host” is the reverse proxy server, our purpose is to find a house, but the real host (server) is blocked by the intermediary (proxy server), I don’t even know who the host (server) is.

Whistle makes it easy to modify responses, such as mocking status codes, error messages, or even inserting a script into a web page.

2. The installation starts

Install the whistle:

npm install -g whistle
Copy the code

Start the whistle:

w2 start
Copy the code

Open localhost:8899 to see the screen. For more specific proxy configuration steps, see this:

Whistle Installation start

Here are a few key steps to remember:

1. Select Enable HTTP/2
2. Download the installation certificate and trust it
3. Set up the system agent or switchyOmega plugin agent. If you use the Chrome plugin, remember to click the Apply option.

If the Network can catch the browser request, the configuration is successful, or the certificate or proxy is not configured properly.

3. Function introduction

The interface of Whistle is mainly composed of the following parts:

1. At the top of the toolbar, you can set the list clearing, recording, filtering, playback and other functions
2. The content area in the middle shows caught Network requests under Network, set proxy Rules under Rules, set variables under Values, and installed plug-ins under Plugins.
3. The request details on the right show details about the selected request.

3.1 the Network

Network displays a list of captured requests. You can Clear the list by using Clear in the upper part and filter certain requests by using filter in the Settings.

Right-click a request, you can also generate a TWO-DIMENSIONAL code, directly scan the code can send the corresponding request. You can also see the request details on the right. There are mainly request headers, request parameters, response headers, response data, cookies, logs and other information.

3.2 Rules

Rules is where agent Rules are set. You can use create to create different rule categories to group agent Rules for the same project.

You can also use the Enable/Disable function to switch whether proxy rules take effect.

4. Set the hosts

If you’ve ever done a search on how to Access Google, you’ve probably seen some tutorials that tell you to modify the hosts file on your computer and set www.google.com to an address they give you. This allows you to access Google through a proxy server, which is the forward proxy mentioned earlier.

With Whistle, we can do this without modifying the hosts file on our system.

Create a whistle’s rules category, such as test, and add the following rule to test:

https://www.baidu.com/ localhost:3000
Copy the code

I started a project locally using Vite, listening on port 3000, and can see the following effect. Although baidu is open, localhost:3000 is actually displayed.

Open Network to see the details of the request at www.baidu.com and you can see that the Url in effect is localhost:3000.

4.1 Proxy To the Local

4.1.1 Proxy HTML file

In addition to proxy to another domain, you can also proxy online to a local file. Create an index. HTML file in any directory and write hello, THIS is Baidu.

Next, set the new proxy rule to set the proxy address to the absolute path of the index.html.

https://www.baidu.com/ file://${projectPath}/test/index.html
Copy the code

The projectPath variable is used above. In Whistle, we can define variables for reuse. If our working directory is fixed, we can set it to a variable to avoid repeating the path prefix. Take Mac as an example:

` ` ` projectPath # access on it is the user name/Users/you/Desktop/project/test/index. The HTML/Users/username/Desktop/project ` ` `Copy the code

In addition to this approach, you can define variables in the Values directory, create a key called projectPath under Values, and write the path above into it.

So let’s open Baidu to see the effect.

4.1.2 Proxy Static Resources

In addition to proxy HTML files, we can also proxy static resources to local, if you want to modify online JS resources, this is a good way.

If you open Baidu, you can see that all of his static resources are under the domain name dss0.bdStatic.com, so you can proxy these resources.

# https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman file://${projectPath}/test
Copy the code

If you want to Disable the Cache, you can return 404 for all the requested resources. If you want to Disable the Cache, you can return 404 for all the requested resources.

4.2 Proxy Response Content

Whistle also lets you modify the response for a variety of development and debugging of the interface. Here I proxy the response request to test.json, create a key called test.json in Values, write a string of JSON data inside, and return a JSON data.

https://www.baidu.com/ resBody://{test.json}
Copy the code

The result is the output of the JSON Content to the page, because the content-Type: text/ HTML sentence tells the browser that the current response is a document.

If you proxy the interface that responds to JSON, you can mock the various returned data and exception scenarios.

4.3 Cross-domain Resolution

Cross-domain is a common problem encountered in Web development. The common solution is CORS, which allows the specified domain name to be cross-domain Access by setting the access-Control-Allow-Origin response header.

With Whistle we can add the access-Control-Allow-Origin response header, which is cross-domain.

www.baidu.com resCors://*
Copy the code

Access-control-allow-origin: * has been added to the response header at www.baidu.com.

4.4 modify the ua

Whistle provides syntax to support changing the requested userAgent, but this only works for the request, not the local userAgent. Because it still essentially changes the userAgent in the request header.

https://www.baidu.com/ ua://{ua}
Copy the code

So we will request Baidu to set the UA as Windows Phone to see the effect.

Mozilla / 5.0 (Windows Phone 10.0; The Android 2; Microsoft; Rm-1113) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Mobile Safari/537.36 Edge/13.10586Copy the code

When we opened Baidu again, we found that the page had turned into H5 mode, although we opened it with PC.

If we look at the details of the request, we can see that the userAgent in the request header has been changed, but the local navigator. UserAgent will not be changed because Whistle only modifies the request.

4.5 Custom Styles

In addition to changing the information about a request, Whistle also supports customizing the presentation style of a request under a domain name. Try the following code:

www.baidu.com style://color=@fff&fontStyle=italic&bgColor=red
Copy the code

5. The Real deal — Bypassing website payments

After so many years of rule usage, here’s a real one for you. Use Whistle to bypass a paid website.

The Adult Attachment Style Inventory is an online assessment site, but it’s paid, and when we click on the Start test, there’s this paid popup. So is there a way around this fee?

So let’s take a look at what it does when we click “Start”. We blindly guess that it will send the interface to the background, get the user’s VIP information, and then decide whether to pop up. So open the developer tools and take a look.

Obviously, the ToolCheck interface is called to get the VIP, so can we bypass the VIP check by modifying the data returned by the interface? The answer is yes.

Let’s take a look at the call stack for this request. It’s easy to see that it’s called in the loadToolCheck of tool.js.

This function clearly sends an Ajax request, and when the data is returned, success will be called, so set breakpoints in the success criteria, click again to start testing to see the effect.

As you can see, there’s a judgment being made. If the interface responds ok, set a variable to true and hide the load popover. I have to make fun of the pinyin naming of this variable here, but hideLoading is hidejiazai.

So in this case, we just need to change the return result of this interface to OK through resBody, and then bypass the site’s check VIP logic. When I open it again, I find that the window will not pop up, and I can directly enter the quiz page, which is perfect.

    ```vip
    ok
    ```
    https://www.zxgj.cn/gongju/toolcheck resBody://{vip}
Copy the code

In addition to modifying the interface response, there is another option, which is to make a local copy of the js file and delete the if else logic, leaving only the contents of the if.

We then delegate the JS file to our local modified JS resource, bypassing the check logic perfectly. Refresh the page and open it again to find that the contents of the JS file have become local to us.

6. Mobile debugging

One of whistle’s most commonly used functions is mobile debugging. Although it is possible to debug webView using chrome://inspect in a mobile test environment, it is often blocked for online applications, making it difficult to debug.

Imagine having a bug on your H5 page online, but you don’t know what the problem is. Does the interface return the wrong message? LocalStorage? Is a style not working? Or… ?

Locating bugs by blind guessing is painful. The scariest way to find bugs is to temporarily add logs and then release them.

6.1 installation

We still need to configure whistle on the mobile terminal. First, make sure that the mobile phone and computer are connected to the same wifi network, then open the WIFI detailed configuration, set the agent to manual, and the server is the IP address of your computer and the port number is 8899. Then you need to download Whistle’s certificate on your phone, install it, and trust it.

When we can see the request on the mobile phone in the Network, it means that the proxy configuration has taken effect. At this time, the proxy rule on your computer also takes effect on the mobile phone.

6.2 injection vConsole

VConsole is a very useful mobile debugging tool. Its interface is similar to Chrome developer tool. It has Console, Element, Network, Storage and other functions, which can help us quickly get some basic information about the page.

However, vConsole should only be used in a test environment, or in a production environment by some special means (such as clicking a button 10 times in a row for 1s), and it should not be shown to the user as it would expose information.

Fortunately, Whistle provides the jsPrepend syntax that allows us to inject A JS script into a page. So when we open the page, vConsole will already be injected, and it will only work on the phones we have connected to the agent.

https://www.baidu.com/ jsPrepend://{vConsole.js}
Copy the code

We can download the vConsole source code from the Internet, create a key called vconsole. js in Values, copy the source code, and instantiate the vConsole class.

Open Baidu again, found the lower right corner has appeared a small button vConsole, then we can happily carry out a variety of debugging.

6.3 Printing Logs

In addition to injecting vConsole, you can also enable log printing by setting the following rule:

https://www.baidu.com/  log://
Copy the code

If you open Baidu again, you can see all log information printed on the Console under the Console option of Tools on Network. This approach is also suitable for some debugging on the mobile end.

7. The mock interface returns

The last part is used for some debugging of the interface, which is convenient for the test development to test the back-end interface in advance, and also convenient for the front-end development to simulate the abnormal scenarios of various interfaces.

7.1 Modifying the Returned Status Code of an Interface

Whistle allows us to change the status code returned by the interface. If you want to test whether your exception handling logic works when the interface returns an exception status code (403, 404, 500, 503, etc.), but the back end doesn’t want to change the interface to 500, you can use Whistle to simulate it yourself.

For example, if we set the return of www.baidu.com to 404, we can see the following error: the web page cannot be found.

https://www.baidu.com/ statusCode://404
Copy the code

7.2 Modifying The Returned Data on an Interface

We can make some changes to the data returned by the interface so that we can simulate various scenarios. Suppose we have a list page and I want to test no data, 100 data, 1000 data, 10000 data.

Referring to the search page of NetEase Cloud Music, there are a lot of search results when we search for “Jay Chou”. What if we want to test the situation without search results?

You can intercept the request interface of the list and set the data returned in the interface to an empty array. Search jay again, magical discovery unexpectedly search not relevant results!

https://music.163.com/weapi/cloudsearch/get/web resBody://{netease.json}
Copy the code

7.3 Simulation Timeout

Whistle can also simulate timeouts, which can be useful for front-end development. One is that we need to test whether the timeout exception handling logic is correct, and the other is that we may need to verify that the timeout retry mechanism is in effect, which would be inefficient to rely entirely on the back end to cooperate.

www.baidu.com reqDelay://5000 enable://abort
Copy the code

7.4 Simulate weak network

A Whistle can simulate a weak net as well as timeouts. While Chrome itself can simulate 2G, 3G and 4G networks, Whistle can be accurate to specific network speeds.

For example, if we set the speed of the request www.baidu.com to 10KB /s, we will find that the web page opens very slowly and takes up to 14s to load.

8. nohost

Nohost is an open source multi-user and multi-environment configuration and packet capture debugging system based on Whistle implemented by Tencent. Personally, I think it is a big killer of Whistle ecology. Github’s introduction is:

1. Environment sharing: No background environment is required for the front end, no front-end environment is required for the back end, and no environment is required for others
2. Packet capture debugging: Remote real-time packet capture debugging, supporting various Whistle rules, and sharing captured data through links
3. Historical record: You can deposit environment configuration and captured packet data for subsequent switching
4. Plug-in extensions: You can implement functions such as inspect, VASE, Autosave, and so on through plug-in extensions
5. External interface: Provides external interfaces for publishing systems and CI tools to automatically add, delete, check, and modify environment configurations

At present, Nohost is widely used in Tencent, and we also carry out multi-environment configuration and debugging through Nohost. The nice thing about this is that if you implement a feature in your branch and want to show it to the product, you can deploy your own environment through NoHost, and the product can just switch to your environment on the interface and see the code on your branch.

Switch the environment with one click through the interface:

In the development environment:

In general, nohost needs to be used in conjunction with CI. For example, when our branch code pushes and triggers a CI build, it will place the build results in a folder named after your feature branch.

When the interface switches the environment, it will read our static resources from the corresponding folder according to the selected environment, so as to achieve multiple sets of environment switch, very convenient.

9. The last

Whistle is a very handy tool to develop and debug, and it can do more than you can ever imagine. For more information about the API, see the official Whistle documentation: Whistle

Finally, all the broker configurations for this article are as follows:

The syntax here conflicts with the md code block, so it indents a TAB, which looks weird. ` ` ` projectPath/Users/gloryyin/Desktop/project ` ` ` ` ` ` ua Mozilla / 5.0 (Windows Phone 10.0; The Android 2; Microsoft; The RM - 1113) AppleWebKit / 537.36 (KHTML, Like Gecko) Chrome/46.0.2486.0 Mobile Safari/537.36 Edge/13.10586 ``` ``` VIP OK ' '# set hosts # proxy to local localhost https://www.baidu.com/ localhost:3000 # proxy to local HTML https://www.baidu.com/ file://${projectPath}/test/index.html # proxy response content https://www.baidu.com/ resBody: / / {test. Json} # agent https://www.baidu.com/ https://www.google.com.hk/ # modified ua https://www.baidu.com/ ua://{ua} # custom style www.baidu.com style://color= @fff&fontstyle =italic&bgColor=red # Proxy resources https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman file://${projectPath} / test # resCors cross domain www.baidu.com: / / * # Example resBody https://www.zxgj.cn/g/ecr?key=0cTtkPxO https://www.zxgj.cn/gongju/toolcheck: / / {VIP} https://www.zxgj.cn/resource/js/tool.js file://${projectPath} / test/tool js debug # # mobile end injection vConsole https://www.baidu.com/ JsPrepend ://{vconsole. js} # Print log https://www.baidu.com/ log:// # mock interface returns # modify interface return status https://www.baidu.com/ StatusCode: / / 404 # modified interface data returned resBody https://music.163.com/weapi/cloudsearch/get/web: / / {netease. Json} # 5 seconds timeout www.baidu.com reqDelay://5000 enable://abort # Simulate weak network www.baidu.com resSpeed://50Copy the code