Skip to content
Computing Medium #wireshark#pcap#analysis

Reading a Packet Capture

A real HTTP fetch annotated frame by frame. SYN, handshake, GET, response, FIN.

A free, animated reading a packet capture you can read here or embed on any website, from Scrollchart.

Reading a Packet Capture

Reading a Packet CaptureHTTP fetch decoded frame by frame: TCP handshake, GET, response segments, four-way closeClientServer :80TCP handshakeHTTP requestHTTP responseTCP close10.000000TCP74BSYN seq=0Client opens connection; ISN chosen, MSS and window scale options attached20.000312TCP74BSYN-ACK seq=0 ack=1Server accepts; picks its own ISN and echoes client MSS30.000598TCP66BACK ack=1Three-way handshake complete; connection ESTABLISHED both sides40.001102HTTP432BGET /index.html HTTP/1.1Request line, Host, User-Agent, Accept-Encoding: gzip headers50.001204TCP66BACK ack=367Server acknowledges receipt of the GET before response is ready60.018440HTTP1448BHTTP/1.1 200 OK (partial)Status line, Content-Type, Content-Length: 24831, Transfer-Encoding; first data segment70.018540TCP1448Bcontinuation seq=...Additional data segment; receiver window and SACK in play80.018780TCP66BACK ack=2730Cumulative ACK for two data segments received so far90.031200TCP66BFIN-ACK seq=...Server signals it has no more data to send (active close)100.031430TCP66BFIN-ACK ack=...Client acknowledges and sends its own FIN; four-way close completesTotal elapsed: 31.4 ms | 3-way handshake: 0.6 ms | Server think time (TTFB): 17.3 ms | Frames: 10Filter: tcp.port == 80 | Coloring: blue = client, teal = server, purple = HTTP payload

A simulated pcap timeline of an HTTP fetch: TCP three-way handshake, TLS handshake, HTTP GET, response chunks, FIN/ACK close. Each frame is clickable, expanding to show the layered headers and a one-line interpretation.

Good for

  • Network debugging tutorials and pcap walk-through blog posts
  • SRE incident post-mortems with packet-capture evidence
  • Security-blog packet analysis and protocol decode explainers

Source & accuracy

This reading a packet capture is an editorial illustration built to represent the concept accurately. Where it shows figures, they are typical or representative values chosen to make the relationship clear, not a single underlying dataset. The diagram and its explainer are reviewed and maintained centrally, and updated over time as understanding improves.

Decoding the packet flow

A packet capture shows every packet that crosses the network interface, with timestamps and decoded content. A simple HTTP fetch starts with a TCP handshake: client sends SYN (sync) to the server. Server responds with SYN/ACK. Client sends ACK back. All three messages are visible in the trace. Then the client sends the HTTP GET request (headers, query string, body) in one or more packets. Server responds with HTTP 200, the response headers, and the body in chunks.

Performance analysis through packet timing

Wireshark annotates each packet with its absolute timestamp and the delta (time since the previous packet on that stream). A SYN arriving at 100.000ms, SYN/ACK at 100.050ms, GET at 100.051ms, and response at 100.150ms tells you the server took 99ms to generate the response. Retransmissions appear as duplicate packets. Packet sizes reveal inefficient chunking (tiny packets waste header overhead). Out-of-order delivery (sequence numbers ascending non-monotonically) signals congestion or dropped packets.

Debugging network issues

Captures reveal problems invisible to application logs: FIN packets show unexpected connection closes, RST packets indicate protocol violations or timeouts, ICMP messages report routing failures. Filtering traces (e.g., tcp.port == 443) isolates relevant packets. Comparing captures from the client and server sides pinpoints asymmetric routing or firewall issues. A packet lost on one hop appears in the client's trace but not the server's, immediately localizing the problem.

Embed this diagram

Add this animated reading a packet capture to your own site. Copy one line of HTML, or use the embed builder for theme and sizing options.

Reference

What this is
A free, embeddable, animated reading a packet capture for any website.
Who uses it
Developer blogs, DevOps / SRE sites, Security blogs.
How to embed
Copy one line of HTML. No signup. No watermark. Works in WordPress, Webflow, Ghost, Substack, plain HTML.
File size
iframe embed, ~80 KB gzipped (loads on demand, does not block your page paint).
License
Free forever. Editorial explainer text included; updated centrally over time.

Embed format options

Copy the universal HTML snippet, the WordPress shortcode, or an iframe fallback - see the WordPress plugin page for details. Any format keeps the same Core Web Vitals profile and the same explainer text.

Embed snippet
<div data-scrollchart="wireshark-trace" data-scrollchart-v="1"></div>
<script src="https://scrollchart.com/embed.js" async></script>

Frequently asked questions

Where can I get a free animated "Reading a Packet Capture" for my website?
Scrollchart provides "Reading a Packet Capture" as a free, embeddable animated diagram you can add to any website with one line of HTML. No signup is required and there is no watermark. The diagram and its explainer text are served from scrollchart.com, so the embed stays current without any maintenance on your end.
How do I embed a reading a packet capture in a developer or tech blog?
Copy the one-line snippet from the Scrollchart diagram page and paste it into your post HTML. It works in any static site generator, CMS, or hand-coded HTML page. The embed is a thin loader, not an iframe, so the content is fully in your DOM.