Debug Frontend Projects with Whistle: From Webpack DevServer to Legacy Setups

Using Whistle with Webpack DevServer

Most frontend projects use webpack. This example uses a create‑react‑app project named my-app. After running npm run start, the app is served at localhost:3000. Localhost has limitations such as cookie domain restrictions and extra logic.

To overcome these, Whistle can map an online domain (e.g., qq.ketang.com) to the local server. Open Whistle’s rule editor at 127.0.0.1:8899, enable the Default rule, and add the rule: qq.ketang.com/ http://127.0.0.1:3000/ Save the rule, then configure the SwitchyOmega proxy to use Whistle. Accessing https://qq.ketang.com in the browser loads the local my-app while using the real domain.

What Whistle Does

The rule forwards all requests under qq.ketang.com/ to http://127.0.0.1:3000/. Whistle supports various pattern‑matching modes for different scenarios.

Exclude Sub‑path CGI Forwarding

Use excludeFilter to prevent certain CGI paths from being proxied:

# good – exclude CGI paths
qq.ketang.com/  http://127.0.0.1:3000/  excludeFilter://qq.ketang.com/cgi-proxy/

Wildcard or regex patterns can also be used:

# wildcard
qq.ketang.com/  http://127.0.0.1:3000/  excludeFilter://^qq.ketang.com/cgi-*

# regex
qq.ketang.com/  http://127.0.0.1:3000/  excludeFilter:///^\w+://qq\.ketang\.com/cgi-/

Mock Specific CGI Interfaces

Three ways to mock a CGI response:

Serve a local file:

qq.ketang.com/cgi-proxy/getMyName  file:///User/dug/data/getMyName.json

Use the Values panel: qq.ketang.com/cgi-proxy/getMyName file://{ans.json} Use xfile mode, which falls back to the online resource if the file is missing.

Legacy Projects Without Build Tools

For projects that serve static assets directly, map the online asset paths to local directories:

# CSS
qq.ketang.com/assets/css/  xfile:///User/dug/myWork/ketang_pro/assets/css/
# JS
qq.ketang.com/assets/js/   xfile:///User/dug/myWork/ketang_pro/assets/js/

Now requests to /assets/css/ and /assets/js/ are answered by the local files, enabling local modification and debugging.

Extending Whistle with Plugins

Special scenarios can be handled with plugins. For example, the whistle.combo plugin splits combo URLs like http://i.cdn.com/??x.js,y.js,z.js into separate requests.

# whistle.combo
https://github.com/whistle-plugins/whistle.combo

A collection of Whistle plugins is available at:

# Whistle plugins list
https://github.com/whistle-plugins