Debug a Broken API Payload in 4 Browser-Only Steps

May 27, 2026

Guide

Debug a Broken API Payload in 4 Browser-Only Steps

6 min read

By Donald Leijon - Independent web developer and tool builder, based in Sweden.

Decode a failed request sample, format its JSON, compare a corrected payload, and test its request ID pattern without uploading the text.

developer-toolscontent-workflowsdebugging

Quick scan

  • Problem: A log line contains an encoded payload and a request ID, but not an immediately readable failure reason.
  • Approach: Decode, format, compare, and match using four local browser tools.
  • What this verifies: Readable decoded text, JSON syntax, visible before/after changes, and whether a sample ID matches a pattern.
  • What this does not verify: Your API contract, authentication, production logs, or whether the proposed fix is correct.

This is a small debugging pass for text copied from a safe test environment. It is not a reason to paste credentials, customer data, session tokens, or production secrets into any tool.

The copied request fragment

Imagine a failed request log includes this text:

payload=eyJyZXF1ZXN0SWQiOiJyZXFfMTA0MiIsInN0YXR1cyI6ImZhaWxlZCIsImVycm9yIjoibWlzc2luZyB0b2tlbiIsInJldHJ5IjpmYWxzZX0=
trace_id=req_1042

The payload is Base64. The trace ID is readable, but we want to know whether it agrees with the payload and what changed after a proposed correction.

Step 1: Decode only the payload value

Open Encoder / Decoder, select Base64 decode, and paste only the string after payload=.

Input:

eyJyZXF1ZXN0SWQiOiJyZXFfMTA0MiIsInN0YXR1cyI6ImZhaWxlZCIsImVycm9yIjoibWlzc2luZyB0b2tlbiIsInJldHJ5IjpmYWxzZX0=

Decoded output:

{"requestId":"req_1042","status":"failed","error":"missing token","retry":false}

What you learned: the encoded fragment is readable JSON and it contains the same apparent request ID as the log line. What you have not learned: whether the string came from the correct service or whether its error is trustworthy.

Step 2: Format and inspect JSON paths

Paste the decoded output into JSON Format Studio and choose Validate or Prettify.

Formatted output:

{
  "requestId": "req_1042",
  "status": "failed",
  "error": "missing token",
  "retry": false
}

The path panel should make these values easy to inspect:

$.requestId   string   req_1042
$.status      string   failed
$.error       string   missing token
$.retry       boolean  false

Validation here means the sample parses as JSON. It does not validate required fields, allowed statuses, or service-side behavior. Those checks belong in schema validation and automated tests in the application.

Step 3: Compare the failed sample with a proposed corrected response

Suppose a local test now returns:

{
  "requestId": "req_1042",
  "status": "accepted",
  "retry": false
}

Paste the failed formatted payload and the new formatted payload into Diff Viewer.

The meaningful diff should be small:

- "status": "failed",
- "error": "missing token",
+ "status": "accepted",
  "retry": false

This is useful review evidence: it makes the proposed change visible. It is not proof that the token was transmitted correctly or that the endpoint accepted a real request.

Step 4: Test the trace ID pattern against sample logs

Open Regex Playground and use this pattern with the global flag:

req_[0-9]+

Test input:

request accepted trace_id=req_1042 duration=81ms
retry skipped trace_id=req_1042 reason=already_accepted
healthcheck trace_id=system

Expected matches:

req_1042
req_1042

The pattern helps find IDs in this sample. Before using it in real code, test it against the actual runtime, edge cases, and log format. For example, it will not match IDs containing letters after the underscore.

A practical stopping rule

After this local pass, you can write a precise debugging note:

The copied sample decodes to valid JSON. It reports requestId req_1042,
status failed, and error missing token. A corrected test fixture removes
the error field and changes status to accepted. Production verification pending.

That last sentence matters. Local text inspection is good at making evidence legible; it cannot substitute for service tests or production verification.

Continue the workflow

If you use AI models in your debugging workflow — writing prompts for log analysis, asking a model to explain a payload diff, or using AI pair programming during incident work — AI Programming Manual covers those patterns with a developer focus.

FAQ

Can I paste a production token into Encoder / Decoder?

No. Even when a tool runs locally, keep secrets, customer data, and credentials out of copied debugging samples. Use redacted or synthetic data.

Does valid JSON mean the API request is valid?

No. It only means the text can be parsed as JSON. Contract rules and server behavior still require application tests or verified service responses.

Why compare formatted JSON instead of raw JSON?

Formatting removes whitespace noise and makes field-level changes easier to review in a diff.

Continue the developer path

Next, strengthen the two assumptions in the sample.

The payload guide reveals JSON values and a trace ID. These notes clarify how far those checks can be trusted.

Run the debug path

Decode a safe sample payload.

Start with synthetic or redacted text, then continue through formatting, diffing, and regex checks.