Whistle is a cross-platform Web debugging agent based on Node, similar to Fiddler on Windows and Charles on MAC. I have used various debugging methods for Web pages, such as Android+Chrome://inspect, IOS+Safari. These are platform-specific and have to be wired up to do the same job. Whistle + Weinre is enough. Today’s focus is on whistle’s configuration

Installation and use

npm install -g whistle
w2 start
Copy the code

Visit this connection to go to the Whistle configuration page http://127.0.0.1:8899/

Now that the proxy service is started, we need to configure the proxy so that requests can go through the proxy service

Configuring the Computer Agent (MAC)

Configure the HTTP and HTTPS proxy server to local port 8899 and apply

If you visit https://goobe.io, you will find that it is not a private connection. This is because you need to configure a certificate for HTTPS requests. Now it is difficult to find an HTTP website, so the certificate still needs to be configured

Certificate of configuration

Click HTTPS and download the CA

Open the downloaded certificate and select System – Add

The newly added certificate is untrusted by default. You need to manually change it to always be trusted

Revisit and see all resource requests

If tunnel to is displayed, click HTTPS and check Capture Tunnel CONNECTS and try

Chrome plug-ins

Fill in the proxy server and port, this process is a bit troublesome, close the proxy and then open the need to fill in again, is there any way to flexibly switch?

Well, if you put it that way, there must be. Proxy SwitchyOmega makes Proxy switching easy, searching and installing from the app Store easy

Once installed, there will be a round button in the upper right corner of your browser. Click Options-New Scene Mode

I named it local whistle for the convenience of differentiation. When I switch to local whistle, the effect is the same as that configured manually before. If I don’t use it, I can choose direct connection, isn’t it convenient?

Configuring the Mobile Phone Agent

As a front-end development, it is necessary to be compatible with different models of real machines. However, there are differences between the simulator and the real machine, which requires the debugging of the real machine. The premise is to configure the agent first

The proxy Settings

It’s important to note that because whistle works on a computer, your phone needs to be on the same LAN as your computer — in other words, the same wireless network

Set the host name/server and port number

certificate

To make HTTPS proxy requests, download the certificate. After configuring the proxy, use the browser provided by the system to access Rootca. pro and download the certificate as prompted

When installing a certificate, There are some differences between Android and ios

The android

IOS

At this point, the preparation has been done, let’s see how to use it