Whistle is a powerful web debugging proxy that extends beyond simple packet capture to significant improve frontend development workflows. Its capabilities include request/resposne modification, mobile H5 debugging, CORS resolution, and domain mapping.

Installation and Setup

Install Whistle globally via npm:

npm install -g whistle
w2 start  # Launch Whistle
w2 stop   # Terminate Whistle

After starting, Whistle runs a local server on port 8899. Access the configuration panel at http://localhost:8899 to manage packet capture and modifications. Add authentication with -n username -w password during startup for security.

Browser Proxy Configuration

Install SwitchyOmega browser extension to route traffic through Whistle. Configure the proxy server as 127.0.0.1:8899 and switch browser traffic to use this proxy.

HTTPS Certificate Setup

Download and install Whistle's root certificate from the configuration panel to enable HTTPS request interception. This allows full inspection of encrypted traffic.

Mobile Device Debugging

Enable mobile debugging by setting manual proxy configuration on devices:

• Ensure device and computer share the same network
• Disable computer firewall
• Set device WiFi proxy to computer's IP address and port 8899

Mobile requests will then appear in Whistle's network list.

Practical Applications

Weinre Remote Debugging

Debug mobile H5 pages directly by adding rules in the Rules section:

https://example.com weinre://debuginstance

Access the Weinre console via the toolbar to inspect elements and modify mobile page content in real-time.

Response Modification

Mock API responses by mapping endpoints to local files:

/api/user file:///mock/user.json

Create mock data files in the Values section to test frontend logic without backend dependencies.

CORS Resolution

Bypass cross-origin restrictions by injecting headers:

/api/data resHeaders://cors-config

Define CORS headers in the corresponding Values file:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: *

Request Body Manipulation

Merge additional data into outgoing requests:

/api/update reqMerge://extra-data

JavaScript Injection

Inject debugging tools or custom scripts into pages:

https://example.com jsPrepend://{debug.js}

Create debug.js in Values:

if (typeof VConsole !== 'undefined') {
  new VConsole();
}

Domain Mapping

Redirect domains to local development servers:

127.0.0.1:8080 dev.example.com staging.example.com

Documentation Reference

Complete documentation available at wproxy.org/whistle.