DEV Community

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

Posted on

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

#arduino #esp32 #opensource #python

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:

  1. choose Serial
  2. select the port and baud rate
  3. connect
  4. watch logs on the left
  5. watch charts on the right
  6. 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
Enter fullscreen mode Exit fullscreen mode

Then open:

http://127.0.0.1:8000
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)