A:

1: Compares common packet capture software

1: MAC, Charles

2: Windows filddler

Limited by platform, the configuration is cumbersome.

2: Whistle’s advantages

Free, open source, cross-platform proxy capture software. The configuration is relatively simple and the function is powerful. You can extend the function through the Node module

Liverpoolfc.tv: wproxy.org/whistle/

Making: github.com/avwo/whistl…

Brief introduction of main functions

Two: installation and startup

1: Installs the node

https://nodejs.org (download the node from the official website. LTS is recommended.) The node version must be later than V0.10.0Copy the code

2: install the whistle

npm  i -g whistle
Copy the code

3: start

1) w2 start

The default port number is 8899. If the port conflicts or is occupied, you can use the new w2 start -p port number to reset the port

If http://127.0.0.1:8899/ is displayed, the startup is successful

4: common commands

W2 or Whistle Help for help information

W2 restart restart the userlist. json file.

W2 stop closing

Three: Google Chrome install plug-in

After installing and starting Whistle, the browser usually needs to set the whistle agent to point to the Whistle Server address 127.0.0.1:8899. To facilitate the switch, Chrome recommends installing proxyOmega plug-in to improve the switching efficiency, so that you can switch the whistle agent with one click

Download address:

Github.com/FelisCatus/…

Drag it into Google’s extension

The interface effect is

Four: function and use

1: listens for requests under the domain name specified for packet capture

rendering

2: Resource request forwarding (replace online resource files with local files)

If there are special problems with the online environment. Can not reproduce in the production environment, this time you can directly replace the JS file to the local debugging, improve the debugging efficiency.

  1. Replace online JS with local JS (can check online JS file version is not correct, content error, etc.)

Prepend means to add before, body means to replace directly, and append means to add after

Eg: Replace the jquery file loaded on baidu’s home page with the file specified locally

Dss0.bdstatic.com/5aV1bjqh_Q2… file:///Users/Yelei/Desktop/share/baidu_insert.js

Configuration in value (there are differences between the two approaches)

1) Use absolute path references

2) Use the content introduced in the import value. This method preserves the original file

Dss0.bdstatic.com/5aV1bjqh_Q2… jsPrepend://{baidu_insert.js}

  1. Replace with the path on the other line

For example, if you visit any web site, you can point it to the corresponding domain name

123.com www.baidu.com

3: inject HTML, CSS, JS

The content of the injected file can be saved in the computer or written in the value. You can do it either way

  1. CSS injection, change the font color of Baidu home page to red

Save it on your computer

www.baidu.com css:///Users/Yelei/Desktop/share/baidu_resect.css

Store values

www.baidu.com cssPrepend://{baidu_resect.css}

Stored in files

www.baidu.com css:///$whistle/baidu_resect.css

Files stored in files

Effect:

1: JS injection. Baidu home page injects vconsole.js

Method 1: Download the source code to a local PC

Place the source code and initialization code of vconsole.js in values and replace it

www.baidu.com jsPrepend://{vconsole.min.js} # import source code

www.baidu.com jsPrepend://{vconsole.js} # import instantiated JS

Method two: Use the plugins provided by Whistle

npm i whistle.inspect

www.baidu.com whistle.inspect://

2. The HTML injection

Add a red box of 100 width and height on baidu home page

www.baidu.com htmlPrepend://{addDom.html}

4: Access your own data and mock

http://api/users/getUsers file:///Users/Yelei/Desktop/share/users.json

5: Mobile phone agent to whistle

The HTTPS certificate is installed on the mobile phone

The steps to install certificate Refer to the article: cloud.tencent.com/developer/a…

After downloading the ios certificate on the PC (scan the QR code box of HTTPS on the PC to download the certificate),

Or through wechat/QQ, the PC downloaded after the certificate file in the past.

After installing the certificate, you can use the interface on PC to monitor and capture packets in the mobile phone application.

Settings => Downloaded description file =>

Connect your PC and mobile phone to the same LAN (usually with a wifi connection, but the company has network policies to limit it). Click Online in the upper right corner of the whistle interface and set your mobile phone’s proxy address as the IP address in Online. Then you can monitor the app on the whistle desktop