Introduction -website

Node-based cross-platform Web debugging agent, similar tools on Windows platform Fiddler, vase (too much trouble). It is used to view and modify HTTP, HTTPS, and Websocket requests and responses, and can also be used as an HTTP proxy server.

In short: simple, convenient, cross-terminal, open source, free and ongoing maintenance.

Agent debugging process:

Install-start

You need to use the Switchyomega_Chromium. CRX browser proxy plug-in

  • Install Node: Download the installation package from the official website
  • Install whistle: NPM install -g whistle
  • Whistle: W2 start
  • Configuring the Proxy: Use Proxy SwitchyOmega to configure a 127.0.0.1:8899 Proxy
  1. PC website setting agent:

  1. Mobile terminal setup proxy:

You need to configure the Wi-Fi proxy in the Settings. The following uses iOS as an example:Note: agent needs mobile phone and computer in the same network!!

  1. Wechat developer tools agent:

Operations: Settings –> Proxy Settings –> Manually set proxy

  • Access, w2 start will output the following address on the console

Method 1: domain name access local.whistlejs.com/

Method 2: Use the IP address and port number, for example, http://127.0.0.1:8899

Intercepting HTTPS configuration

This is a special one so you have to configure it

Common commands

  1. w2 statusSee the whistle instance running on this machine
  2. w2 startStart whistle normally
  3. w2 stopStop the whistle (w2 runCannot be stopped with this command.
  4. w2 restartRestart the whistle (w2 runCannot restart with this command.
  5. The port number of the service can be used as a command line argumentw2 start -p xxxxTo specify (default port 8899)
  6. w2 help 或 w2 -h 或 w2 --helpSee the help
  7. w2 -V 或 w2 --versionViewing the Current Version

Commonly used functions

The most commonly used functions are NetWork and Rules. NetWork is to view captured packets and Rules is to set up a whistle agent. Here I take a mobile activity as an example to introduce the use of whistle.

Filter In red: Enabled

Top Filter sets the Filter, Include Filter only looks at domain name requests you want to see:

Rules Configuration Rules

The principle is to replace the local modify hosts file. Double-click the created rule set. If the checked symbol appears, the rule set is applied. For example,

www.qq.com www.qqapi.com # means that the request for www.qq.com is proxy to www.qqapi.com, so that multiple rules can be double clicked to switch proxy.Copy the code

Matches the specified rule – action

www.qq.com operatorURI # match all HTTP requests http://www.qq.com under domain name www.qq.com OperatorURI # Match all HTTPS requests under the domain name www.qq.com https://www.qq.com operatorURI # port number of the qualified domain name www.qq.com:8888 operatorURI # 8888 port # specify the path http://www.qq.com/xxx operatorURICopy the code

OperatorURI is the corresponding operation, consisting of operation protocol + operation value (operatorURI = opProtocol://opValue) :

Protocol list: wproxy.org/whistle/rul… This feature is a lot of, use it again.

Rules special operators ({},(a),<>)

  • {} : import the configuration file in Values
www.example.com res://{index.html} # corresponds to the file defined in Values. Hold down Ctrl and click {XXX} to quickly locate the source fileCopy the code
  • () : Directly set value on [configuration page] (www.example.com/)
www.example.com res://({"delay":6000,"body":"1234567890"}) # () cannot contain SpacesCopy the code

Proxy protocol: commonly used for development, mobile terminal real-time tuning

[127.0.0.1 tmall.xc2018.com.cn] [127.0.0.1 tmall.xc2018.com.cn] [127.0.0.1 tmall.xc2018.com.cn] [127.0.0.1 tmall.xc2018.com.cnCopy the code

UrlParams modifies request parameters

www.ifeng.com urlParams://(test=1)
Copy the code

Real machine commissioning

Log Displays project logs

/http://www.baidu.com/ log:// # Whenever you visit a whistle page in http://www.baidu.com mode, you can see the output of the console under the log option of whistle:Copy the code

Inject vconsole.js into the page using values + js:

Create a new vconsole.js file under values, put the source code for vConsole in it, and initialize a vConsole object (var vConsole = new vConsole (); , run the following command under rules:

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

At this point, we refresh the page to see:

Debug mobile pages using Whistle’s built-in Weinre:

In rules configuration:

http://www.baidu.com Weinre ://index # At this point you can view the page using WeinreCopy the code