# Website DevTools Inspector (/docs/experiments/website-devtools-inspector)



Inspect any website with a comprehensive analysis similar to browser DevTools. Get HTTP headers, cookies, response time, metadata, and all loaded resources including scripts, stylesheets, images, and links.

## API Reference [#api-reference]

### GET /devtools [#get-devtools]

Perform a comprehensive inspection of a webpage by providing its URL.

<TypeTable
  type="{
  url: {
    description: &#x22;The URL of the webpage to inspect. Must be a valid HTTP or HTTPS URL.&#x22;,
    type: &#x22;string&#x22;,
    required: true,
  },
}"
/>

#### Example Request [#example-request]

```bash
curl "https://your-worker.workers.dev/devtools?url=https://www.cloudflare.com"
```

#### Response Structure [#response-structure]

**`success`** `boolean`

Indicates if the request was successful

**`data`** `object`

The comprehensive inspection results

**`data.url`** `string`

The requested URL

**`data.statusCode`** `number`

HTTP response status code (e.g., 200, 404, 500)

**`data.responseTimeMs`** `number`

Response time in milliseconds (rounded)

**`data.headers`** `object`

HTTP response headers as key-value pairs. All header names are lowercase.

**`data.cookies`** `string[]`

Array of Set-Cookie header values

**`data.metadata`** `object`

Page metadata

**`data.metadata.title`** `string | null`

Page title from `<title>` tag

**`data.metadata.description`** `string | null`

Meta description

**`data.metadata.canonical`** `string | null`

Canonical URL if specified

**`data.scripts`** `string[]`

Array of unique absolute URLs of JavaScript files loaded via `<script src="...">`

**`data.stylesheets`** `string[]`

Array of unique absolute URLs of CSS files loaded via `<link rel="stylesheet">`

**`data.images`** `string[]`

Array of unique absolute URLs of images from `<img src="...">`

**`data.links`** `string[]`

Array of unique absolute URLs from `<a href="...">`. Excludes anchor links (#) and javascript: links.

#### Example Response [#example-response]

```json
{
  "success": true,
  "data": {
    "url": "https://www.cloudflare.com",
    "statusCode": 200,
    "responseTimeMs": 245,
    "headers": {
      "content-type": "text/html; charset=utf-8",
      "server": "cloudflare",
      "cf-ray": "8a1b2c3d4e5f6g7h-SJC",
      "cache-control": "max-age=3600",
      "content-encoding": "gzip",
      "vary": "Accept-Encoding"
    },
    "cookies": ["__cflb=0123456789abcdef; Path=/; HttpOnly; Secure; SameSite=Lax"],
    "metadata": {
      "title": "Cloudflare - The Web Performance & Security Company",
      "description": "Here at Cloudflare, we make the Internet work the way it should.",
      "canonical": "https://www.cloudflare.com/"
    },
    "scripts": [
      "https://www.cloudflare.com/js/main.js",
      "https://ajax.cloudflare.com/cdn-cgi/scripts/analytics.js"
    ],
    "stylesheets": [
      "https://www.cloudflare.com/css/main.css",
      "https://www.cloudflare.com/css/responsive.css"
    ],
    "images": [
      "https://www.cloudflare.com/img/logo.svg",
      "https://www.cloudflare.com/img/hero-image.png"
    ],
    "links": [
      "https://www.cloudflare.com/products/",
      "https://www.cloudflare.com/plans/",
      "https://developers.cloudflare.com/"
    ]
  }
}
```

## Error Responses [#error-responses]

### Invalid URL [#invalid-url]

```json
{
  "success": false,
  "error": "Missing or invalid query parameter: url",
  "code": "INVALID_URL"
}
```

### Fetch Error [#fetch-error]

```json
{
  "success": false,
  "error": "HTTP 404",
  "code": "FETCH_ERROR"
}
```

## Technical Details [#technical-details]

* Built with [Hono](https://hono.dev/) framework
* Runs on Cloudflare Workers
* Custom User-Agent: `Cloudflare-Experiments-DevtoolsInspector/1.0`
* Configurable fetch timeout
* Maximum HTML size limit to prevent memory issues
* All relative URLs resolved to absolute URLs
* Response time measured from request start to completion

## Inspection Details [#inspection-details]

### Headers [#headers]

* All response headers are captured
* Header names are normalized to lowercase
* Includes Cloudflare-specific headers (cf-ray, cf-cache-status, etc.)

### Cookies [#cookies]

* Extracted from Set-Cookie response headers
* Preserves all cookie attributes (Path, HttpOnly, Secure, SameSite)
* Multiple cookies are returned as separate array entries

### Resources [#resources]

* Scripts: Extracted from `<script src="...">`
* Stylesheets: Extracted from `<link rel="stylesheet" href="...">`
* Images: Extracted from `<img src="...">`
* Links: Extracted from `<a href="...">`
* All URLs are deduplicated and resolved to absolute URLs

### Response Time [#response-time]

* Measured in milliseconds from request initiation to response completion
* Includes network latency and initial content download
* Rounded to the nearest millisecond

## Use Cases [#use-cases]

* **Performance Monitoring**: Track response times and identify slow-loading resources
* **Security Audits**: Analyze headers, cookies, and security configurations
* **Asset Analysis**: Discover all external dependencies and third-party scripts
* **SEO Audits**: Inspect metadata and canonical URLs
* **Debugging**: Investigate website structure and loaded resources
* **Competitive Analysis**: Understand technology stack and external services used
* **Compliance Checks**: Verify cookie policies and header configurations

## Limitations [#limitations]

* Static HTML fetch for most fields; not a live browser DevTools session
* HTML body is capped at 1MB before parsing
* Cannot inspect authenticated or paywalled pages
* No runtime network waterfall, console, or step-through debugging

## Deployment [#deployment]

<Steps>
  <Step>
    ### Click the deploy button [#click-the-deploy-button]

    [![Deploy to Cloudflare Workers](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/shrinathsnayak/cloudflare-experiments/tree/main/apps/experiments/website-devtools-inspector)
  </Step>

  <Step>
    ### Deploy [#deploy]

    No additional configuration required.
  </Step>

  <Step>
    ### Test your deployment [#test-your-deployment]

    ```bash
    curl "https://your-worker.workers.dev/devtools?url=https://example.com"
    ```
  </Step>
</Steps>

## Local Development [#local-development]

```bash
cd apps/experiments/website-devtools-inspector
npm install
npm run dev
```

Test locally:

```bash
curl "http://localhost:8787/devtools?url=https://example.com"
```

## Cloudflare Features Used [#cloudflare-features-used]

* **[Workers](https://developers.cloudflare.com/workers/)** - Edge compute runtime
* **[Fetch API](https://developers.cloudflare.com/workers/runtime-apis/fetch/)** - HTTP requests for headers, HTML, and timing data