Inspecting Network JSON Payloads with Browser DevTools

If you need to inspect a JSON API response in Microsoft Edge, Chrome, or another Chromium-based browser, the fastest path is: open DevTools, go to Network, filter to Fetch/XHR, click the request, then use Preview for a formatted tree, Response for the raw body, and Payload for the JSON your app sent. This page focuses on that real workflow so a search visitor can get from "where is the JSON?" to the actual data quickly.

Quick Answer for Edge and Chrome

1. Open DevTools with F12 or Ctrl + Shift + I on Windows/Linux, or Cmd + Option + I on macOS.
2. Select the Network tab and reload the page or repeat the action that triggers the API call.
3. Click Fetch/XHR to narrow the list to most API requests.
4. If the list is still noisy, use the filter box with mime-type:application/json.
5. Select the request you care about.
6. Use Preview for formatted JSON, Response for the raw response text, andPayload when you need to inspect the request body that was sent to the server.
7. In current Microsoft Edge DevTools, you can right-click the first line in Preview and choose Copy value to copy formatted response JSON to your clipboard.

If you are using Edge, the labels and tabs are very close to Chrome because both browsers use the same general Chromium DevTools workflow.

Capture the Right Request

The biggest beginner mistake is opening DevTools too late. The Network panel only shows what it recorded while it was open, so start here before reproducing the problem.

• Turn on Preserve log if the page reloads, redirects, or moves between routes.
• Clear the list before you retry the action so the request table only shows what matters.
• Watch Status and Type first. A 200 with type or MIME indicating JSON is very different from a 302, 401, or HTML error page.
• Keep Disable cache in mind if request headers look incomplete or you are chasing a stale response.

Filter Down to JSON Quickly

Fetch/XHR is usually enough for app APIs, but current Edge and Chrome DevTools also support property filters in the Network filter box. This is the fastest way to find the exact JSON response you want.

• Use a resource-type filter: click Fetch/XHR for most API calls triggered by fetch or XMLHttpRequest.
• Filter by MIME type: mime-type:application/json is the cleanest filter for actual JSON responses.
• Filter by method when needed: for writes or form submissions, try method:POSTor method:PUT.
• Filter by endpoint text: typing part of the URL, route, or query string is often enough when you already know the backend path.

mime-type:application/json
method:POST
api/users
mime-type:application/json method:POST

What Each Request Tab Is For

Once you click a request, the sidebar is where the real debugging starts. The most important improvement for most people is understanding that Payload and Response answer different questions.

Headers Tab

Use Headers to confirm the basics: URL, HTTP method, status code, request headers, and response headers. If you are expecting JSON, this is where you verify Content-Type: application/json or spot that the server actually returned something else.

HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
Content-Length: 150
Connection: keep-alive
Date: Tue, 23 Jul 2024 10:00:00 GMT
Server: MyAwesomeServer

Payload Tab

Payload shows what your browser sent. In current Edge DevTools, this can include Request payload (JSON), form data, and query string parameters. If you are debugging a POST or PUT request, this is the tab that answers "what data did my frontend actually submit?"

{
  "email": "alice@example.com",
  "plan": "pro",
  "newsletter": true
}

Preview Tab

Preview is usually the best tab for valid JSON responses. When DevTools can parse the body as JSON, it renders it as an expandable tree so you can open nested objects and arrays without scanning a long minified line.

{
  "user": {
    "id": 101,
    "name": "Alice Smith",
    "email": "alice@example.com",
    "address": {
      "street": "123 Main St",
      "city": "Anytown"
    },
    "orders": [
      {
        "orderId": "A123",
        "amount": 55.75
      },
      {
        "orderId": "B456",
        "amount": 120.00
      }
    ]
  },
  "status": "success"
}

Response Tab

Response shows the body as text. This is the tab to check when Preview does not look right, when the server returned HTML instead of JSON, or when you want to inspect the exact raw response content before formatting it elsewhere.

{"user":{"id":101,"name":"Alice Smith","email":"alice@example.com","address":{"street":"123 Main St","city":"Anytown"},"orders":[{"orderId":"A123","amount":55.75},{"orderId":"B456","amount":120.00}]},"status":"success"}

Timing Tab

Use Timing when the JSON is correct but slow. It breaks the request into waiting, connection, and download phases so you can tell whether the bottleneck is server time or transport time.

Copy and Search the Data Faster

• Copy formatted JSON from Edge: select the request, open Preview, right-click the first line, then choose Copy value.
• Search across many requests: in current Edge and Chrome DevTools, Ctrl + F or Cmd + F in the Network panel opens a search that checks request headers, payloads, and responses.
• Copy request details for reproduction: the Network context menu can also copy a request asfetch or cURL, which is useful when you want to replay the call outside the browser.
• Copy a single nested value: in parsed views, right-clicking a property is often faster than manually selecting text from the raw response.

Common Scenarios and Troubleshooting

• Request Pending or Stalled: If a request shows "Pending" or "Stalled" for a long time, it could indicate a network issue, a server problem, or the browser blocking the request (e.g., CORS issue).
• Preview is blank or not formatted: check the Headers tab for the response Content-Type. Many "JSON" bugs are actually HTML login pages, plain-text error messages, or a backend sending the wrong MIME type.
• Payload tab is empty: that is normal for many GET requests. GET calls often send data in the URL query string instead of a request body.
• Invalid JSON: if Preview cannot parse the response, switch to Response and look for a malformed body such as missing commas, unescaped quotes, or a truncated response.
• The request never appears: open DevTools before the action, keep recording enabled, and use Preserve log if the page navigates away.
• You only need to pretty-print a direct JSON URL: Edge can also format a JSON file or a JSON server response in a normal browser tab with its Pretty-print checkbox. That is useful for a standalone endpoint, but Network is better when you also need headers, timing, status, or the originating request payload.

Conclusion

For most JSON debugging sessions, you do not need a complicated workflow. Capture the request, filter the list down, verify headers, then use Payload, Preview, and Responsedeliberately instead of guessing. In Edge especially, the built-in filters, search, and copy actions are enough to inspect and format most API traffic without leaving DevTools.