I Built a Local Web Debug Tool for Serial, TCP, and UDP

AllenLiao — Sat, 11 Apr 2026 14:20:11 +0000

What SerialNet Debug Studio does

Right now, the project supports:

Serial connection for local COM / USB devices
TCP client mode for network-connected devices
UDP sending and local listening
Real-time log panel with [RX] / [TX] / [SYS] / [ERR]
Real-time multi-channel charts
Command sending panel with text / HEX modes
Line ending options
Checksum support
Command history
Local storage for recent connections and commands
Multi-language UI

It is designed to stay local and lightweight:

no login
no database
no cloud dependency

Under the hood, the current stack is:

FastAPI
Uvicorn
WebSocket
pyserial
HTML / CSS / JavaScript
Apache ECharts

The browser handles the UI and charting, while the backend handles Serial / TCP / UDP communication and streams logs and parsed data to the frontend in real time.

Why I made it web-based instead of desktop-only

I wanted something that felt lightweight, easy to iterate on, and convenient to use.

A browser UI gives me a lot of flexibility for:

log layout
real-time chart rendering
command panel interaction
future extensibility

At the same time, this is not a pure frontend app.
The backend runs locally and handles hardware and network communication, so the browser gets the convenience of a web UI without losing access to serial ports and sockets.

That combination ended up being a really good fit for this type of tool.

How I use it in practice

1. As a better serial monitor for embedded boards

For Arduino, ESP32, STM32, and similar devices, the flow is simple:

choose Serial
select the port and baud rate
connect
watch logs on the left
watch charts on the right
send commands from the bottom panel

What I like most is that logs, charting, and command sending all happen in the same place.

2. For TCP debugging on Wi-Fi devices

Once a device moves to Wi-Fi, debugging is no longer just a serial problem.

In that case I can switch to TCP mode, connect to the target host and port, and keep the same workflow:

live logs
command sending
charting

That consistency is one of the main reasons I built this tool.

3. For lightweight UDP testing

Some devices report data over UDP, or sometimes I just need to listen on a local port quickly.

The tool currently supports UDP sending and local listening, so it works well for lightweight packet-based debugging too.

Live charting is one of my favorite parts

A lot of embedded output is easier to understand as a graph than as raw text.

Typical examples include:

temperature and humidity
ADC values
motor control signals
encoder feedback
IMU data
voltage and current telemetry
internal state values

Instead of copying data into another plotting tool, I wanted to see it immediately.

That is why the chart panel supports:

dynamic multi-channel plotting
pause / resume
zoom selection
reset zoom
CSV copy / export

For my own workflow, that has been much more useful than a basic serial plotter.

Screenshots

Serial mode with live logs and charts

TCP debugging interface

Chart zoom / brush selection

Command history

How to run it

If you want to try it locally:

git clone https://github.com/xiayus/SerialNet-Debug-Studio.git
cd SerialNet-Debug-Studio
python -m pip install -r requirements.txt
uvicorn app:app --host 127.0.0.1 --port 8000

Then open:

http://127.0.0.1:8000

If you do not want to run it from source, you can also download a prebuilt release from the repository.

Who this project is for

I think this tool is especially useful for:

Embedded developers

If you work with Arduino, ESP32, STM32, or other microcontroller-based systems and often switch between logs, commands, and data plotting.

People debugging network-connected devices

If your device uses TCP or UDP and you want logs, sending, and charting in one place.

Developers who like local-first tools

If you prefer lightweight tools that run locally without accounts, databases, or heavy setup.

Builders looking for architecture ideas

If you are interested in combining:

a Python backend for communication
WebSocket for real-time streaming
a browser frontend for charts and control panels

What I may add next

I am trying to keep the project focused, but a few directions I am exploring are:

MQTT
BLE
more protocol adapters
plugin-style protocol parsing
more chart types
custom JavaScript parsing support

I do not want to turn it into a bloated all-in-one platform too early, though.
For now, the priority is to keep the core debugging workflow smooth.

Final thoughts

This project came from a very practical frustration:

I was tired of switching between multiple tools just to debug one device properly.

So I built something that fits my own workflow better:

connect → inspect logs → send commands → watch charts → iterate

If that sounds useful for your workflow too, feel free to check it out:

👉 SerialNet-Debug-Studio on GitHub

Feedback, issues, and suggestions are always welcome.
And if you find it useful, a star would mean a lot.

DEV Community: AllenLiao