DevTools Mastery: Reverse-Engineering APIs

The Method

Every web UI is just a frontend to an API. Your job: find it.

1. Open target web app
2. F12 → Network tab
3. Filter: Fetch/XHR
4. Use the UI (click, submit, navigate)
5. Watch requests appear
6. Right-click → Copy as cURL
7. You now own that endpoint

Network Tab Walkthrough

Setup

  1. Open DevTools: F12 or Cmd+Opt+I (Mac) / Ctrl+Shift+I (Linux)

  2. Click Network tab

  3. Check Preserve log (keeps requests across page navigations)

  4. Filter by Fetch/XHR (hides CSS, images, etc.)

Capture Requests

  1. Clear existing requests (🚫 icon)

  2. Perform action in UI (login, search, submit form)

  3. Watch requests appear

  4. Click request to inspect

Request Details

Tab Shows

Headers

URL, method, request/response headers

Payload

Request body (POST/PUT data)

Preview

Formatted response

Response

Raw response

Timing

Request duration breakdown

Copy as cURL

  1. Right-click any request

  2. Copy → Copy as cURL

  3. Paste in terminal

  4. Clean up and pipe to jq

Example copied cURL (messy):

curl 'https://app.example.com/api/v2/tickets?status=open' \
  -H 'accept: application/json, text/plain, */*' \
  -H 'accept-language: en-US,en;q=0.9' \
  -H 'authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...' \
  -H 'cookie: _session=abc123; _csrf=xyz789' \
  -H 'user-agent: Mozilla/5.0 ...' \
  --compressed

Cleaned up:

curl -s 'https://app.example.com/api/v2/tickets?status=open' \
  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIs...' \
  | jq

What to Look For

API Patterns

Pattern Example

REST paths

/api/v1/users/123

GraphQL

POST /graphql with query body

Query params

?page=1&limit=20&sort=created

Path params

/tickets/{id}/comments

Authentication

Type Header

Bearer Token

Authorization: Bearer eyJ…​

API Key

X-API-Key: abc123 or query param ?api_key=abc123

Session Cookie

Cookie: session=xyz

Basic Auth

Authorization: Basic base64(user:pass)

Building Your Endpoint Map

As you explore, document:

# endpoints.yml
base_url: https://app.example.com/api/v2
auth: Bearer token from login response

endpoints:
  tickets:
    list: GET /tickets
    get: GET /tickets/{id}
    create: POST /tickets
    update: PATCH /tickets/{id}
    delete: DELETE /tickets/{id}

  users:
    me: GET /users/me
    list: GET /users
    get: GET /users/{id}

Finding Hidden APIs

Check JavaScript

# Search JS files for API endpoints
curl -s https://app.example.com/main.js | grep -oP 'api/v\d+/\w+'

Common Paths to Try

/api
/api/v1
/api/v2
/graphql
/rest
/_api
/backend

Look for Swagger/OpenAPI

/swagger.json
/openapi.json
/api-docs
/swagger-ui
/docs

Practice: GitHub.com

  1. Log into GitHub

  2. Open DevTools → Network → Fetch/XHR

  3. Navigate to a repository

  4. Star/unstar the repo

  5. Find the API call

  6. Copy as cURL

Expected discovery:

# Star a repo
curl -X PUT \
  -H "Authorization: Bearer TOKEN" \
  https://api.github.com/user/starred/owner/repo

# Unstar
curl -X DELETE \
  -H "Authorization: Bearer TOKEN" \
  https://api.github.com/user/starred/owner/repo

Exercises

  1. Capture the login flow of any web app - what endpoint does it hit?

  2. Find the search API on a site you use daily

  3. Discover pagination parameters (page, limit, offset, cursor)

  4. Find an undocumented endpoint by watching Network tab