1. Install whistle

NPM install -g whistle install w2 startCopy the code

After the startup, open http://127.0.0.1:8899/#network. The following page is displayed

2. Install proxy

SwitchyOmega download address: github.com/FelisCatus/…

As shown in the image above, select.crx to download and add it to Google Extensions. It can also be downloaded directly from the Google App Store, either of which works

3. Whistle + Proxy implements the proxy

1) The console starts whistle 2) Create the required proxy proxy connection and create a new connection named “XXX” with the proxy server set to 127.0.0.1 and port set to 8899 (these two Settings are important!! Directly related to the success of subsequent agents).

3) Set the proxy rule to openhttp://127.0.0.1:8899, set agent Rules in Rules.For example, to point www.baidu.com to the local test-local file, add the test-local file to Values first, and add data at will (PS: Generally, the interface returns JSON. The data to be added here had better be formatted with JSON; otherwise, the interface after proxy returns an exception). If you access www.baidu.com, the local test-local is actually accessed. The following figure shows the result

PS: You can also import a local file, create a local 001.json file, and add data to it. Then values => files => drop file… => copy path and add rules to rules. file://{} is equivalent

www.baidu.com      /$whistle/001.json

Copy the code

4) show time

Select the connection you created in proxy

Open www.baidu.com in your browser

In this case, the page is displayed as the proxy path defined in ***3) ***. The packet capture effect is shown as follows. The accessed url is www.baidu.com and the actual address is file://{test-local}

4, debugging,

Console (log://) Outputs console.xxx() when debugging a mobile device. Some capture tools don’t show this information, but Whistle internally implements a remote log platform similar to browser console. The simple whistle is responsible. Add the log rule to Rules as follows:

Whistle Enables HTTP/HTTPS interception, indicating that it is a whistlehttp://xxx (for the URL of the mobile debugging page). On the mobile terminal, open http://xxx and use ToolsThe Console information is displayed on the Console page.

// Add weinre Rules to Rules as follows:

http://xxx   weinre://

Copy the code

Click Weinre (=> anonymous),

Mobile terminal openOn the http://xxx page, you can see the Targets part turns green, indicating that the debugging process is ok. When you refresh the page, you can see the page printing and DOM information.