WebRex

Introduction

WebRex is a debugging proxy made for web developers.

Its configuration tries to resemble webpack-dev-server (for simplicity and UX familiarity reasons).

It provides Web interface which you must access, to configure the proxy settings and all other features that WebRex has.

When you open WebRex it will open a terminal instance and will display 2 urls to be followed: one is the url where the proxy is running and the other is the url of the WebRex UI.

If you have an ngrok token configured in settings, you will also see the url of the ngrok tunnel and respective QRCode which an be scanned.

In short, this app is like if webpack-dev-server and Mockoon had a child (or a proxy and a mock server had a child) and chrome devtools was its uncle.

How it works

Install

• Download WebRex or compile from source.
• Execute WebRex

::: info The first run takes longer to start because it's installing some assets in your home folder, under a directory created for it. A new terminal instance will popup it will display something like the following: :::

Starting...
Preparing DB...
Installing new version 2.0.0-rc.19...

Server started at http://localhost:3001
WebRex UI running at http://localhost:3001/webrex-ui

• Open WebRex UI on your favorite browser

Configure

Open WebRex on browser, go to settings tab and adapt the configuration to your needs.

Import or backup configurations

You can backup your configuration to a *.json file and restore later using the settings page.

This allows you not only to save your snippets, interceptors and settings but also to share them with colleagues if needed.

Setps to import

1. Open settings page of WebUI
2. Press the Import button and locate the *.json file where you saved it

Debugging

When running proxy, all request are logged with timestamp, duration in miliseconds, http status, request method and url used

ie:

[2025-11-26T15:06:39.954Z]     3ms 200 POST   https://whatever.com/api/v1/my-service/aliens

Why you need WebRex?

Use Case 1

You have a web aplication and want to check it's behaviour in case the backend send a different response. Then:

• start the web app
• start WebRex
• open a browser tab and type the address where WebRex is running "{hostname}:{port}/webrex-ui" (default is localhost:3001/webrex-ui)
• configure WebRex configuration, in settings tab, with at least 2 proxy routes, where one points to the web app and the other points to the backend
• open another browser tab and type root address (same as above but without /webrex-ui pathname) of WebRex "{hostname}:{port}" (default is localhost:3001)
• it's important that you open the WebRex address instead of the web app address so that you call "WebRex-proxy -> web-app" and web-app calls "WebRex-proxy -> backend". Otherwise the proxy won't be in the middle and won't work as you expect

Development

Software Requirements

• Deno Runtime ^2.3.1
• Node >=20.19.6 or Bun ^1.3.5
• Task ^3.46.3

Skills Requirements

• Angular >=21
• Deno 2 (most of the knowledge from NodeJS translates to Deno. Deno is just a better version of Node.)

How to compile

To compile run the following command in the root folder of the project:

task compile

How to run from source

To contribute to the project with development, run the backend and the frontend of WebRex in parallel:

task start:frontend

task start:backend