DEV Community

DataStack
DataStack

Posted on

View and Automatically Decode Captured Data with TraceEagle: JSON Pretty, Hex View, Media Preview

Data Viewing and Decoding

Capturing is only the beginning; understanding is what counts. This article shows you how to read a request after opening it: switch the viewing mode independently on both the request and response sides (Structured / Pretty Text / Hex / Auto Detect), automatically decompress compressed data, pretty-print JSON/XML/forms/protobuf, and preview images, videos, and audio directly in the details. Most of the time you don't need to configure anything—just open it and you'll see the most readable form. If you run into garbled data, the end of this article tells you what to do next.

1. When to Use

  • After capturing traffic, you want to read each request clearly—what the request headers, body, and response actually sent.
  • The response opens as a bunch of compressed bytes or looks like garbled data, and you want to switch views to see it clearly.
  • You want to inspect a piece of data as JSON / hex / raw message side by side.
  • You captured images, videos, audio, PDFs, etc., and want to preview directly instead of saving and opening them separately.

If you're dealing with non-HTTP proprietary / binary protocols that standard views still can't parse, see Custom Protocol Decoding.

2. Prerequisites

  • You have already captured at least one piece of traffic (if not, see Quick Start or Capture Traffic from a Specific Program).
  • To see HTTPS plaintext, this connection must be decrypted (TLS in the details shows 'Decrypted'). Undecrypted connections can still be viewed, but only the raw sent/received bytes are visible.
  • No extra configuration is required. Viewing and decoding work right after you open them.

3. Step-by-Step

1. Open Details

Click any item in the request list to open its details. The upper half is the request and the lower half is the response. The two sides are independent and do not affect each other.

2. Choose a Viewing Mode ('View as')

Each side has a row of viewing modes at the top; switch as needed:

  • Structured: start line + request header table + smart body. This is the default view; look at it first.
  • Text · Pretty: automatically indent and format based on content type—JSON, XML, and forms (x-www-form-urlencoded) are laid out readably with one click.
  • Text · Raw: show the complete message as raw text, without changing a single byte.
  • Hex: a hex viewer that shows offsets, highlights hex and ASCII side by side with linked highlighting, and can save to a binary file with one click; even very large data can be viewed smoothly without lag.
  • Auto Detect: hands data to the engine for deep decoding and renders it as a layer-by-layer expandable decode tree—compression nested inside compression, frames nested inside frames, all can be drilled into layer by layer.

If you want the request side in raw view and the response side in structured view, just click each side's button; the two sides can use different views.

Tip: 'View as' only switches the presentation layer. JSON, XML, and forms are not separate buttons; they are formats automatically handled by Text · Pretty. Selecting Text · Pretty will automatically recognize and format them.

3. Let It Auto-Decompress and Auto-Pretty

In most cases you don't need to do anything:

  • Responses compressed with gzip / brotli(br) / deflate / zstd are automatically decompressed before display; multiple stacked encodings (such as gzip, br) are also decoded layer by layer from outer to inner.
  • If the body is JSON / XML / forms / protobuf / gRPC, it is automatically recognized and pretty-printed. protobuf/gRPC can be decoded into field numbers, types, and values without a .proto file.

4. Use Hex to View Raw Bytes

When you want to verify raw bytes, or the data itself is binary, switch to Hex. Click a byte, and hex and the ASCII on the right will highlight in a linked way; when you need to keep a record, click Save to export it as a binary file.

5. Preview Media

When the body is an image, video, or audio, the details view previews / plays it inline directly and marks the type and size, so you don't need to save and open it separately.

4. Verification: Confirm You're Reading Plaintext

A correctly read entry should look like this:

  • In the Structured view, the request line, request headers, and body are all present, with fields clearly displayed.
  • A compressed response opens as readable text (such as well-indented JSON), not a bunch of compressed bytes.
  • If it is an image / video or other media, it can be seen / played directly in the details.
  • Switch to Hex: offset, hex, and ASCII columns are aligned, and clicking a byte highlights linked positions.

5. Troubleshooting and Tips

Symptom Likely Cause What to Do
Opens as a bunch of garbled data / unreadable bytes Not a standard HTTP body; may be a proprietary / binary protocol, or an undecrypted raw stream First switch to Auto Detect and let the engine try to decode it; if it still can't be parsed, use custom decoding—see Custom Protocol Decoding
The response looks compressed and cannot be opened Rare multi-layer or non-standard encoding Switch to Auto Detect and expand the decode tree layer by layer; or switch to Hex to verify the raw bytes
JSON / XML is crammed into one line You are currently in Text · Raw or Structured, where no pretty-printing is applied Switch to Text · Pretty for automatic indentation and formatting
You can only see raw sent/received bytes, with no request headers This connection is undecrypted (non-HTTP or TLS not decrypted) Check whether TLS in the details shows 'Decrypted'; for decryption-related topics, see Application-Layer Capture
You want to verify the original text with not a single byte changed Pretty / Structured views reformat the content Use Text · Raw or Hex; neither modifies the original content
Large responses feel heavy to open The data volume is very large The hex viewer can smoothly browse even very large data; if you need to keep a record, save it as a binary file with one click

Tip: The views on the request and response sides are independent. When troubleshooting by comparison, you can keep Structured on one side and open Hex on the other and compare them on the same screen.

Next Steps

  • If proprietary / in-house protocols can't be parsed by standard views and you want to teach it how to read them: see Custom Protocol Decoding.
  • To compare where two requests differ, line by line: see Request Diff.
  • To modify this data and resend it, or intercept it midway and change it manually: see Request Construction and Replay, Rule Rewriting and Breakpoint Interception.
  • To generate code or export documentation from this API: see Generate Code and Export API Docs.

Top comments (0)