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:

<code>qq.ketang.com/  http://127.0.0.1:3000/</code>

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:

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

Wildcard or regex patterns can also be used:

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

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

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:

<code># 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/</code>

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.

<code># whistle.combo
https://github.com/whistle-plugins/whistle.combo</code>

A collection of Whistle plugins is available at:

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