Mobile debugger Whistle

Mobile development skills are essential in front-end development. When we have a problem like this:

  1. Mobile Canvas rendering failed
  2. Wechat get openId callback page does not match
  3. Failed to upload the wechat browser file. Procedure
  4. Alipay, wechat H5 payment domain name verification does not match
  5. BUG in production environment, dev and test environment cannot reproduce
  6. When cross-domain CORS is enabled on a back-end interface, the local environment cannot be accessed
  7. …

Chrome emulator and wechat developer tools couldn’t perfectly reproduce the problems we had, so we needed whistle for real machine debugging

Whistle principle

Whistle is a cross-platform Web debugging agent implemented by Node. It can be understood as using Node to open a proxy server, and after delegating the device we need to debug to Whistle, Whistle makes the proxy request. In addition, Whistle supports forwarding rules similar to hosts. You can forward the domain names you need to delegate and add plug-ins by using regulars or built-in commands.

Install the whistle

npm install -g whistle

Start the whistle

w2 start or w2 start -p 10086

➜  ~ w2 start
[!] [email protected] is running
[i] 1. use your device to visit the following URL list, gets the IP of the URL you can access:
       http://127.0.0.1:8899/
       http://192.168.97.12:8899/
       Note: If all the above URLs are unable to access, check the firewall settings
             For help see https://github.com/avwo/whistle
[i] 2. configure your device to use whistle as its HTTP and HTTPS proxy on IP:8899
[i] 3. use Chrome to visit http://local.whistlejs.com/ to get started
Copy the code

At this point, we’ve turned on the Whistle agent and can see the Whistle console from our browser at http://127.0.0.1:8899/.

Next, I’ll show you how to use Whistle for proxy packet capture on Windows, MAC, iPhone, and Android.

Set the agent

Set the proxy on the mobile end

When connected to the same WIFI, iPhone and Android set the proxy IP address to 192.168.97.12 (that is, the LAN IP printed above) and port number to 8899 (you can also run -p 10086 to specify a custom port number). Once saved, our mobile device is connected to Whistle.

The proxy is set on the PC

Since Chrome browser is commonly used in PC daily development, only the proxy Settings under Chrome browser are shown here.

For the Chrome Proxy on the PC, I recommend Proxy switchyOmega. After downloading the Chrome plug-in, enter the SwitchOmege configuration. After the default installation, there is a scenario schema called Proxy, which we renamed Whistle.

After changing the name, we entered our LAN IP and whistle’s port number into the proxy server and applied the options.

At this point, we’re ready to delegate Whistle on the PC side, and one configuration change is recommended. The default agent mode is system agent. Because it is known to all that programmers usually surf the Internet scientifically, the default configuration is changed to system agent to avoid the problem that we can’t surf the Internet scientifically when we are used to whistle.

Installing the HTTPS Certificate

The vast majority of domain names now use HTTPS, so to whistle’s HTTPS proxy we need to install an HTTPS certificate.

Download the certificate

On PC: Click HTTPS on the toolbar at the top to open the HTTPS certificate popup box for Whistle and click Download RootCA to Download the HTTPS certificate.

Mobile: After connecting to the Whistle agent, scan the code in the browser and the certificate will be automatically downloaded

Windows Installation Certificate

After downloading the certificate, double-click to open it and install the certificate to a trusted root certification authority.

Mac Installation Certificate

Double-click to open it and install the certificate into your local project or log in. Then search for Whistle where you installed it, double-click to open it, select Trust, and set it to always Trust

IPhone Installation Certificate

Settings – general – about the machine — — — — — – certificate trust Settings — — — — — – > find whistle open trust certificate


Android Installation Certificate

Depending on the system of each manufacturer, you can set it according to the prompts after specific code scanning.

Vein as debugging

Now that we’ve completed all the preparations for Whistle, let’s look at what whistle has to offer

Redirect to redirect

When we open the Whistle console, we can see Rules on the left, where we can group and configure some jump Rules. The configuration in this section is similar to that in the hosts file, where the first domain name is the domain name to be used for proxy and the second domain name is the address to be directed to. Here I redirect https://www.baidu.com to https://www.bilibili.com.

Note that there is a pit in the iPhone, when debugging on the iPhone, the domain name must be added HTTPS, otherwise there will be a problem in the iPhone certificate verification.

Then we open the TAB page and switch switchOmega to the Whistle scene mode we just set. Enter https://www.baidu.com and you can see that Baidu has been successfully switched to STATION B.

Redirection is widely used in our daily life, for example:

  1. When we need to access the online interface locally, there will be cORS cross-domain problems, so we can get around this limitation by masquerading the domain name
  2. When we are developing functions related to wechat or Alipay, there are security domain name restrictions in the background of wechat or Alipay at this time, which can also be completed through this redirection

Log Printing

One of the most painful aspects of mobile debugging is not being able to see logs at all, especially in a production environment with tools like VConsole or Eruda to help us view them. So here we can export the console log by adding the log:// keyword to whistle.

After configuration, switch to the Network option, where we can see all HTTP requests to troubleshoot problems such as interface or resource requests. Select the request that goes to the domain name we open, for example, I use https://www.baidu.com here. You can see the console used in our page by using Tools on the right toolbar

This feature is suitable for troubleshooting some production problems, through the log to trace the problem, or see the JS error. It is of great help in troubleshooting some models compatibility problems.

JsPrepend js injection

Whistle supports injection of pre-made javascript code when loading a web page. Click on Values in the left column to open JS script management. Here I use erUDA injection as an example. First we go to NPM or BooTCDN or similar sites to find some libraries we want to inject, for example I used eruda.min.js. Create a new script with Create. Copy the script file in.

Then create a new script eruda.js to embed the initialization code

OK, get ready. Let’s go back to Rules to configure js injection. Here we inject the eruda.min.js and eruda.js we just wrote

Then we go to https://m.baidu.com to check the effect, you can see that eruda has been injected

Since mobile is not free to modify and run JS code like Chrome’s devTool, this feature makes it possible. It also allows us to inject a library of debugging tools into our production code when testing it.

Weinre Mobile debugging

Weinre is a mobile debugging tool with a long history. Its interface is designed after Chrome DevTool. You can easily see the structure of Dom tree, Network request, Console, etc. And it’s relatively cumbersome to configure. Whistle also has weinre built in, making it easy to use.

Likewise, we open Rules and add weinew://baidu to https://www.baidu.com

Once done, we can go through the top toolbarWeinreYou can see what we added inbaiduExample, click to enter weinre debugging.

Open https://www.baidu.com in the browser, you can see weinre prompt Baidu has been connected.

That’s about all the common functions in Whistle are covered. There are many more features that Whistle supports. These are just some of the features that are often used in front-end debugging. If you are interested, you can explore the Whistle document again