Wireshark seems a bit misleading. More like a "network inspector" if one leans towards the browser's network tab in the inspector?
But it really looks useful and I'll definitely play with it to see if I put it into my toolbox.
replies(2):
Subtrace lets you see every request with full payload, headers, status code, and latency details. Tools like Sentry and OpenTelemetry often leave out these crucial details, making prod debugging slow and annoying. Most of the time, all I want to see are the headers and JSON payload of real backend requests, but it's impossible to do that in today's tools without excessive logging, which just makes everything slower and more annoying.
Subtrace shows you every backend request flowing through your system. You can use simple filters to search for the requests you care about and inspect their details.
Internally, Subtrace intercepts all network-related Linux syscalls using Seccomp BPF so that it can act as a proxy for all incoming and outgoing TCP connections. It then parses HTTP requests out of the proxied TCP stream and sends them to the browser over WebSocket. The Chrome DevTools Network tab is already ubiquitous for viewing HTTP requests in the frontend, so we repurposed it to work in the browser like any other app (we were surprised that it's just a bunch of TypeScript).
Setup is just one command for any Linux program written in any language.
You can use Subtrace by adding a `subtrace run` prefix to your backend server startup command. No signup required. Try for yourself: https://docs.subtrace.dev
But it really looks useful and I'll definitely play with it to see if I put it into my toolbox.
IMO the real UX problem is that there’s nothing in between “Wireshark” and “DevTools.”
What would be cool is a program that renders the real DevTools UI from a .pcap file (or stdin).
There’s a lot of use cases where I can capture all the traffic with Wireshark but I just want a basic DevTools interface.