Comprehensive Guide to Installing, Configuring, and Using Whistle for Proxy, Mobile Debugging, and Request/Response Manipulation

Many people think Whistle is only a packet‑capture tool, but capturing is just the tip of the iceberg; it can also modify requests and responses, debug H5 on real devices, solve cross‑origin issues, map domains, and more, greatly improving development efficiency and experience.

Installation & Startup

npm install -g whistle
w2 start // start whistle

w2 stop // stop whistle

After starting, Whistle runs a local server on port 8899. Opening http://127.0.0.1:8899 in a browser shows the control panel where all capture and modification settings are configured. You can protect the panel with -n yourusername -w yourpassword when launching.

Browser Proxy Plugin

To route browser traffic through Whistle, install a proxy extension such as SwitchyOmega (available in Chrome Web Store or Edge Store). After installation, configure the proxy server to point to Whistle’s address and port, then enable the proxy mode.

Only HTTP requests are captured initially; HTTPS requires certificate configuration described below.

Certificate Configuration

HTTPS traffic is not shown until a certificate is installed. Follow the QR‑code link or visit https://wproxy.org/whistle/webui/https.html to download and install the certificate. After successful installation, HTTPS requests appear with a check‑mark.

Mobile Capture

Ensure the phone and computer share the same network, disable the computer firewall, and set the phone’s Wi‑Fi proxy to the computer’s IP address and Whistle’s port. After configuration, mobile requests appear in Whistle’s network list.

Application Scenarios

Weinre Console : Add a rule like ${target_url} weinre://${instance_name} to enable remote debugging of H5 pages on real devices via the Weinre console.

Response Tampering : Use file://${path} to replace response bodies with local mock files (e.g., mock.json ), useful for bug isolation and API mocking.

Cross‑Origin Solutions : Apply resHeaders://{cors} with a predefined CORS header file to add the necessary Access‑Control headers without a reverse proxy.

Request Tampering : Use reqMerge://{merge.json} to merge custom JSON into the original request body.

JavaScript Injection (jsPrepend) : Inject arbitrary JS into target pages, such as adding VConsole for mobile debugging, via rules like https://example.com jsPrepend://https://cdn.jsdelivr.net/npm/[email protected]/eruda.min.js .

Domain Mapping : Map multiple domains to a single IP (and port) with a rule like 127.0.0.1:9000 ddd.com aaa.com .

Documentation & Conclusion

Refer to the official Whistle documentation for more details. Using Whistle simplifies mock data creation, bug localization, and overall development workflow.