Boost Front‑End Debugging with Fiddler, Switch Host, and Nginx

Fiddler + Willow Plugin

Fiddler acts as a proxy between client and server; with the Willow plugin you can redirect static file requests to local files, allowing you to test pages on a mobile device by setting the phone’s proxy to your computer.

Willow also supports single‑file and whole‑directory proxying, which is easier to use than Fiddler’s built‑in feature.

Mobile Request Proxy

Enable the "Allow remote computers to connect" option in Fiddler, ensure the phone and PC are on the same LAN, and set the phone’s Wi‑Fi proxy to the PC’s IP address and Fiddler’s listening port (default 7777). Then copy the PC’s browser URL to the phone to view the local page.

If Fiddler appears inactive (white), click the lower‑left button to reactivate it.

Switch Host

Switch Host lets you map a domain name to a specific IP address. For example, you can bind folger.test.com to 127.0.0.1 so that accessing folger.test.com:8080 actually reaches a local Node service listening on port 8080.

Nginx

Nginx is a high‑performance HTTP server and reverse proxy. Front‑end developers who cannot control the backend should learn to configure Nginx for proxying APIs and static resources.

Interface forwarding : Suppose a backend service runs at 1.1.1.1:8080 with endpoint /test. By switching the host to point folger.test.com to 127.0.0.1 and configuring Nginx to forward /test requests to 1.1.1.1:8080, you can test the API without changing code.

Local file proxy : Nginx can also serve local static files, which is a strong use case for front‑end development.

Tips and Pitfalls

On Windows, start Nginx from the command line (e.g., nginx.exe). The author created two batch files for convenience:

start.bat   start nginx.exe
restart.bat nginx -s reload

If configuration changes do not take effect, a full system reboot may be necessary.