Michael Lip

Posted on Mar 27 • Originally published at theluckystrike.github.io

Everything I Use in Chrome DevTools for API Testing

#chrome #devtools #tutorial #webdev

Chrome ships with everything you need to test REST APIs without installing a separate client. Full disclosure: I built json-formatter-pro as part of Zovo, a collection of 16 Chrome extensions I maintain. Take my perspective accordingly. I test APIs in DevTools dozens of times a day, and the tight integration with your page's JavaScript context means you test against live cookies, tokens, and session state without copy-pasting anything. This post covers the native methods I actually use daily, from a first fetch() call to response mocking and performance profiling.

Last verified: March 2026 , All steps tested on Chrome 134 (latest stable). Extension data verified against Chrome Web Store.

The Ultimate Chrome JSON Extension , dcode

How Chrome Handles API Requests

When your JavaScript calls fetch(), the request starts in the renderer process, crosses an IPC boundary into the Network Service (a dedicated process since Chrome 67), and hits the OS network stack. The Network Service handles DNS resolution, connection pooling, TLS negotiation, and HTTP/2 multiplexing.

Chrome maintains up to 6 TCP connections per origin under HTTP/1.1 and a single multiplexed connection under HTTP/2 or HTTP/3. When you see a request "stalled" in the Network panel, it usually means the browser hit that per-origin limit and is waiting for a slot to open.

DevTools hooks into all of this through the Chrome DevTools Protocol (CDP), a WebSocket-based protocol exposing domains like Network, Runtime, and Fetch. The same protocol powers Puppeteer and Playwright, which is why browser automation captures the exact same network data you see in DevTools.

Making API Calls from the Console

Open DevTools with Cmd+Option+I on Mac or Ctrl+Shift+I on Windows, then click the Console tab. Any fetch() call you make shares the page's cookies, origin, and session state.

A simple GET request:

const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
const data = await response.json();
console.log(data);

Chrome's Console supports top-level await, so no async wrapper needed. The response object gives you status, headers, and methods like json(), text(), and blob() to read the body.

For POST requests:

const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ title: 'Test', body: 'Content', userId: 1 })
});
const data = await response.json();
console.log(data);

Press the up arrow to recall previous commands. Store tokens in Console variables and reuse them across requests in the same session.

For cross-origin requests that need cookies, add credentials: 'include':

const response = await fetch('https://api.example.com/protected', {
credentials: 'include',
headers: { 'Authorization': 'Bearer YOUR_TOKEN_HERE' }
});

The fetch() function includes cookies for same-origin requests by default but omits them for cross-origin calls. The server must also respond with Access-Control-Allow-Credentials: true and a specific origin in its CORS headers. The wildcard * doesn't work with credentials.

Inspecting Live Traffic in the Network Panel

Switch to the Network tab to see every HTTP request in real time. Click the Fetch/XHR filter to narrow the list to API calls only.

Each row shows the URL, method, status code, size, and timing. Click any request to open a detail pane. Headers shows request and response headers. Payload shows the request body. Preview renders JSON as a collapsible tree. Response shows raw text.

Press Cmd+F or Ctrl+F with the Network panel focused to search across all captured URLs, headers, and response bodies at once. The filter bar also accepts regex when prefixed with /, and supports property filters like status-code:404 or method:POST.

Right-click any request for replay options. "Copy as fetch" generates a complete fetch() call you can paste into the Console and modify. "Copy as cURL" produces the terminal equivalent. "Replay XHR" resends the exact request, though this only works for XHR calls, not Fetch API calls.

Advanced Techniques

Local Overrides for Response Mocking

Chrome lets you intercept API responses and replace them with local files. Go to Sources, click the Overrides tab, and select a local folder. Then in the Network panel, right-click any response and choose "Override content."

Chrome saves the response locally and serves your version on subsequent requests. Overrides persist across reloads until you disable them. In my experience, this replaces the need for mock servers in about 70% of frontend debugging scenarios.

Request Blocking

Block specific endpoints to test failure handling. Right-click any request in the Network panel and choose "Block request URL." Patterns support wildcards, so api.example.com/users blocks all user-related endpoints at once.

When a blocked request fires, Chrome returns a network error. This lets you verify error states, fallback UI, and retry logic without touching the backend.

Throttling

The Network panel's throttling dropdown simulates different connection speeds. Built-in presets include Fast 3G (1.6 Mbps, 562ms RTT) and Slow 3G (500 Kbps, 2000ms RTT). You can also create custom profiles with exact values. The "Offline" preset cuts all network access for testing offline-capable apps.

Snippets for Reusable Tests

The Sources panel has a Snippets feature that acts as a lightweight notebook. Create a snippet, write your API test code, and run it anytime with Cmd+Enter or Ctrl+Enter. Snippets persist across browser sessions and make a practical alternative to external clients when you need repeatable tests without a full project setup.

Measuring API Performance

Click any request in the Network panel, then open the Timing tab. It breaks down each phase: Stalled/Blocking, DNS Lookup, Initial Connection, SSL, Request Sent, Waiting (TTFB), and Content Download.

For a typical HTTPS API call, DNS lookup runs under 5ms for cached domains. TCP adds 10 to 50ms depending on distance. TLS 1.3 adds another 10 to 30ms. TTFB under 200ms indicates a responsive server. Above 500ms suggests bottlenecks worth investigating.

For scriptable benchmarking:

const t0 = performance.now();
const res = await fetch('https://api.example.com/data');
const json = await res.json();
console.log(Request + parse: ${(performance.now() - t0).toFixed(1)}ms);

The Resource Timing API via performance.getEntriesByType('resource') gives you programmatic access to the same data with sub-millisecond precision. You can filter, average, and export it for regression tracking.

Common Problems and Fixes

CORS Errors

When you call fetch() targeting a different origin, Chrome blocks the response unless the server includes the correct Access-Control-Allow-Origin header. If you control the server, add the header. If you don't, launch Chrome with --disable-web-security from a separate testing profile. Only use this for testing, never for general browsing.

Network Panel Shows "(failed)"

A "(failed)" status with no HTTP code means the request never reached the server. Common causes include ad blockers intercepting the request, CSP directives blocking the URL, or the server being unreachable. Disable extensions one by one to isolate. Check the Console for CSP violation messages.

JSON Displays as Raw Text

If the Preview tab shows JSON as a plain string, the server is sending the wrong Content-Type. Chrome only activates JSON Preview for application/json. The fix is server-side. While waiting for that, copy the raw response and run JSON.parse() in the Console. For frequent formatting, JSON Formatter Pro detects and formats JSON regardless of Content-Type.

Requests Appearing Twice

You're seeing CORS preflight. When your fetch() uses custom headers or non-simple methods like PUT or DELETE, Chrome sends an OPTIONS request first to check permissions. Both appear in the Network panel. Filter by the Method column to distinguish them, and verify your server responds to OPTIONS with the correct Access-Control-Allow-Methods and Access-Control-Allow-Headers.

Extensions Worth Adding

Chrome's built-in tools cover most API testing needs, but a few extensions help for daily use.

JSON Formatter Pro formats raw JSON responses directly in the browser tab with collapsible trees, syntax highlighting, and dark mode. At 738KiB, it adds minimal overhead. When you navigate to an API endpoint that returns JSON, it formats the response in place automatically.

ModHeader lets you add or modify HTTP headers at the browser level. Useful for injecting custom routing headers or feature flags without writing code.

Postman Interceptor bridges Chrome with the Postman desktop app by capturing cookies and requests from your browser session. Worth it if your team already relies on Postman collections.

For most solo work, a JSON formatter plus DevTools handles the majority of API testing. Dedicated clients like Postman earn their place when you need saved collections, automated test suites, or team collaboration. I wrote a more detailed version covering WebSocket debugging, HAR exports, and chrome://net-internals for deeper network troubleshooting.

I build Chrome extensions at zovo.one. All 16 are free, open source, and collect zero data.

{
"@context": "https://schema.org",
"@type": "Article",
"headline": "API Testing in Chrome: The Ultimate Guide",
"description": "Expert guide on api testing chrome guide",
"image": "https://zovo.one/images/default-hero.jpg",
"author": {
"@type": "Person",
"name": "Michael Lip",
"url": "https://zovo.one/about",
"sameAs": [
"https://www.linkedin.com/in/michaellip",
"https://github.com/theluckystrike",
"https://www.upwork.com/freelancers/~theluckystrike"
],
"jobTitle": "Chrome Extension Engineer"
},
"publisher": {
"@type": "Organization",
"name": "Zovo",
"url": "https://zovo.one",
"logo": {
"@type": "ImageObject",
"url": "https://zovo.one/images/zovo-logo.png"
}
},
"datePublished": "2026-03-18",
"dateModified": "2026-03-18",
"wordCount": 1000,
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://zovo.one/guides/api-testing-chrome-ultimate-guide/"
}
}

{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://zovo.one"
},
{
"@type": "ListItem",
"position": 2,
"name": "Guides",
"item": "https://zovo.one/guides/"
},
{
"@type": "ListItem",
"position": 3,
"name": "API Testing in Chrome: The Ultimate Guide",
"item": "https://zovo.one/guides/api-testing-chrome-ultimate-guide/"
}
]
}

Date	Change
March 18, 2026	Initial publication. All data verified against Chrome Web Store and DataForSEO.
March 18, 2026	Added FAQ section based on Google People Also Ask data.
March 18, 2026	Schema markup added (Article, FAQ, Author, Breadcrumb).

DEV Community

Everything I Use in Chrome DevTools for API Testing

Top comments (0)