How to find the API endpoints of a website using browser developer tools

The Network panel in Chrome DevTools logs every request a page makes. API calls made with fetch() or XMLHttpRequest fall under the Fetch/XHR type filter, which is the fastest way to separate them from the page's own assets. Edge uses the same DevTools, and Firefox has the same idea in its Network Monitor under the XHR filter.

Two details trip people up. DevTools only records while it is open, so open it first and then reload. And the list resets on navigation unless Preserve log is checked, which matters for apps that do full page loads between screens. How to keep network requests after a reload covers that setting in detail.

Each row has columns for Name, Status, Type, Initiator, Size and Time. Right-click the column header to add more, such as Method or Domain. The Initiator column links to the script and line that sent the request, which helps when you want to know which part of the UI calls an endpoint.

The type buttons (All, Fetch/XHR, Doc, CSS, JS, Font, Img, Media, Manifest, WS, Wasm, Other) are the first cut. The Filter box does the rest. Plain text matches the URL, and property filters match specific fields. The Network features reference lists them all. These are the ones you will use most when mapping an API.

• method:POST shows only one HTTP method, useful for finding every write endpoint.
• domain:api.example.com keeps one host. Apps often call several, such as their own API, an auth server and analytics.
• status-code:401 or status-code:500 finds failing calls.
• larger-than:100k finds heavy responses.
• mime-type:application/json keeps JSON responses only.
• has-response-header:set-cookie finds calls that set cookies, often login and session endpoints.

Several filters separated by spaces combine with AND, and OR is not supported. To exclude matches, check the Invert box next to the Filter box. More filters adds options such as Hide extension URLs and 3rd-party requests.

Filters only look at request properties. To find an endpoint by something inside it, press Ctrl+F (Cmd+F on a Mac) while the Network panel is focused. The Search tab looks through request headers, payloads and responses, with toggles for match case and regular expressions.

This is the quickest way to answer "which call returns this value?". Type an order number, a user email or a field name you can see on screen, and Search shows the requests that contain it.

The Network panel only shows calls that actually happened, so a feature you never opened has no rows. Two ways to close the gap:

• Exercise more of the app. Use a test account with the roles you care about, and visit settings, admin and error states.
• Search the loaded JavaScript. Press Cmd+Option+F (Ctrl+Shift+F on Windows and Linux) to open the Search panel, which searches all loaded resources. Look for path fragments such as /api/, /v1/ or /graphql. Note that it does not search network headers or responses.

If the app uses GraphQL, most calls go to a single URL such as /graphql. The endpoint list then tells you little, and the operation names in each request's Payload tab are what you want to collect.

A raw request log repeats itself. The same endpoint shows up many times with different IDs, such as /users/41 and /users/42. To get a usable list, group rows by method and path, replace IDs with placeholders like /users/{id}, and note the query parameters and body fields each one accepts.

That is tedious by hand for more than a few dozen calls. A HAR file plus a converter gets you most of the way. See how to create a HAR file in Chrome for the export, and Generate an OpenAPI spec from your web app's network traffic for turning it into a spec. If you mostly want to replay calls, Create a Postman collection from a website's requests is the shorter route.

Netraptor is a Chrome extension that adds a Netraptor panel to DevTools, laid out like Chrome's Network panel. It does the grouping and templating for you, and the captured data stays in your browser.

• Open the Netraptor panel and it captures the tab's requests right away, with Chrome's type chips (Fetch/XHR, GraphQL, Doc, JS and the rest), a Waterfall column and Initiator, Timing and Cookies tabs.
• Requests are grouped under each page load, headed Reloaded or Navigated to. Single-page-app route changes start a new group too, so you can see which screen made which calls.
• Hide noise is on by default and hides analytics, realtime and ad requests. Identical calls that arrive back to back collapse into one row marked ×3, which keeps a polling endpoint from filling the list.
• The filter box takes Chrome's syntax and suggests keywords as you type. It also accepts wildcards such as status-code:4xx, OR between terms, - to hide a match and endpoint:/orders/{id}. Save filters you reuse, on the Free plan.
• Press Cmd/Ctrl+F to search request and response headers and bodies in the session, with case-sensitive and regex options.
• Open the API Map tab to see endpoints grouped with IDs parameterized, such as /users/{id}, with real request and response samples. The GraphQL tab lists operations when the app uses GraphQL.

To cover pages you would not click by hand, turn on Keep history for this site in the toolbar popup and run Crawl this site. The crawler visits same-site links in your real logged-in tab, skips logout and delete-looking links, and only fills forms if you opt in for that domain. Keep history also saves fetch and XHR calls with DevTools closed.

The Free plan exports HAR, Postman Collection v2.1 and curl, and crawls 25 pages per run. Pro ($29.99 one-time) adds OpenAPI 3.1, Bruno and Insomnia exports, crawls of up to 1000 pages and full session history.