Dev Tools > Frame Inspector

Frame Inspector
HTTP/2 Frames · Animation FPS · WebSocket Frames

Parse HTTP/2 protocol frames from raw hex or text, measure CSS animation frame rates in real time, and decode WebSocket frame payloads. Client-side, no server required.

HTTP/2 frame parser Live FPS meter WebSocket decoder Client-side

Frame Inspector

Three frame inspection tools for developers: HTTP/2 protocol frame parsing, live animation FPS measurement, and WebSocket frame decoding.

Get HTTP/2 frames from: Wireshark → right-click packet → Copy → Bytes as Hex | Chrome DevTools chrome://net-export/

Measures the browser's rendering frame rate using requestAnimationFrame and the Performance API. Shows live FPS, frame time, and a 60-frame history chart.

Frames Per Second
--
Press Start to measure
--Current FPS
--Avg FPS
--Min FPS
--Frame Time
Uses requestAnimationFrame API

What this measures

This tool schedules a callback via requestAnimationFrame each frame and measures the time between consecutive callbacks using performance.now(). The inverse of frame time gives FPS. The browser targets 60 FPS (16.67ms/frame) for smooth animations. Drops below 30 FPS are visually choppy.

HTTP/2 Frame Structure

Every HTTP/2 message is broken into frames. Understanding frame structure is essential for debugging HTTP/2 connections.

9-byte frame header

Every HTTP/2 frame starts with a 9-byte header containing three fields. Length (24 bits, 3 bytes): payload size in bytes, max 2^24-1. Type (8 bits, 1 byte): frame type (0x0=DATA, 0x1=HEADERS, etc.). Flags (8 bits, 1 byte): type-specific flags. Reserved bit + Stream ID (31 bits, 4 bytes): which stream this frame belongs to (0 = connection-level).

+-----------------------------------------------+
|                 Length (24)                   |
+---------------+---------------+---------------+
|   Type (8)    |   Flags (8)   |
+-+-------------+---------------+------+--------+
|R|             Stream ID (31)                  |
+=+=============================================+
|            Frame Payload (Length bytes)       |
+-----------------------------------------------+

How to capture HTTP/2 frames

Wireshark: Capture on the network interface. Filter: http2. Right-click a frame → Copy → Bytes as Hex Stream. Requires decrypted TLS (set SSL key log file in browser settings first).

Chrome net-log: Navigate to chrome://net-export/ → Start Logging → visit your site → Stop → Save. The JSON export contains HTTP/2 frame events with raw bytes.

curl: Use curl --http2 -v https://example.com for verbose HTTP/2 output including frame type labels.

HTTP/2 Frame Types

TypeHexDirectionFlagsPurpose
DATA0x0BothEND_STREAM, PADDEDHTTP response/request body payload
HEADERS0x1BothEND_STREAM, END_HEADERS, PADDED, PRIORITYHTTP headers (HPACK compressed)
PRIORITY0x2Client→ServerNoneStream prioritization (deprecated in HTTP/3)
RST_STREAM0x3BothNoneTerminate a stream with error code
SETTINGS0x4BothACKConfigure connection parameters
PUSH_PROMISE0x5Server→ClientEND_HEADERS, PADDEDServer push notification (deprecated in Chrome)
PING0x6BothACKRound-trip latency measurement
GOAWAY0x7BothNoneGraceful shutdown with last stream ID
WINDOW_UPDATE0x8BothNoneFlow control window size increment
CONTINUATION0x9BothEND_HEADERSContinue a HEADERS frame sequence

Network Dev Tools

Server Timing AnalyzerParse Server-Timing headers HTTP Headers InspectorAnalyze response headers WebSocket TesterConnect and test WebSocket endpoints cURL Command BuilderBuild cURL commands visually Latency TesterTest server response times

Frame Inspector – FAQ

What are HTTP/2 frames?+
HTTP/2 frames are the smallest communication units in HTTP/2. Every request and response is split into one or more frames. Each frame has a 9-byte header: 3 bytes for payload length, 1 byte for frame type, 1 byte for flags, and 4 bytes for stream ID. The most common types are HEADERS (0x1) carrying compressed request/response headers, and DATA (0x0) carrying the body payload. Multiple streams can be multiplexed on a single TCP connection using different stream IDs.
How do I capture HTTP/2 frames for analysis?+
Since HTTP/2 typically runs over TLS, you need to decrypt it first. In Chrome: set environment variable SSLKEYLOGFILE=/path/to/keys.log, then in Wireshark go to Edit → Preferences → Protocols → TLS → (Pre)-Master-Secret log filename and point to your key log. Capture HTTP/2 traffic and filter by http2 in Wireshark. Alternatively, use Chrome DevTools → Network tab which shows HTTP/2 frames decoded, or use chrome://net-export/ for raw frame dumps.
What is frame rate (FPS) in web performance?+
Frame rate (FPS) measures how many times per second the browser renders a new visual frame. The target is 60 FPS (16.67ms per frame) for smooth animations. Below 30 FPS animations look choppy. The browser uses requestAnimationFrame to schedule rendering callbacks. Long JavaScript tasks or heavy CSS paint operations block the main thread and drop frames. Use the FPS meter tab to measure your browser's rendering performance in real time.
What is a WebSocket frame?+
WebSocket frames are the message units of the WebSocket protocol (RFC 6455). Unlike HTTP/2 frames, WebSocket frames are simpler: a 2-14 byte header containing: FIN bit (last fragment?), opcode (0=continue, 1=text, 2=binary, 8=close, 9=ping, 10=pong), mask bit, payload length, optional masking key (client→server always masked), and payload data. Text frames carry UTF-8 encoded text. Binary frames carry arbitrary binary data. Most WebSocket APIs work with JSON over text frames.