### GET /json or /json/list

Source: https://github.com/chromedevtools/debugger-protocol-viewer/blob/master/pages/index.md

Lists all available WebSocket targets for debugging.

```APIDOC
## GET /json or /json/list

### Description
A list of all available websocket targets.

### Method
GET

### Endpoint
/json or /json/list

### Response
#### Success Response (200)
- **description** (string) - Description of the target.
- **devtoolsFrontendUrl** (string) - URL to the DevTools frontend for this target.
- **id** (string) - Unique identifier for the target.

### Response Example
```json
[ {
  "description": "",
  "devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9222/devtools/page/DAB7FB6187B554E10B0BD18821265734",
  "id": "DAB7FB6187B554E10B0BD18821265734",
```
```

--------------------------------

### Build Project Dependencies and Assets

Source: https://github.com/chromedevtools/debugger-protocol-viewer/blob/master/readme.md

Install project dependencies, regenerate protocol files, build the project, and serve it locally.

```sh
# install dependencies
npm i

# regenerate the protocol files
npm run prep

# build it
npm run build

# serve it locally
npm run serve
```

--------------------------------

### Send CDP Command with JSON Parameters

Source: https://context7.com/chromedevtools/debugger-protocol-viewer/llms.txt

Example of sending a Chrome DevTools Protocol command with JSON-formatted arguments.

```json
{"cmd":"Page.captureScreenshot","args":{"format":"jpeg","quality":90}}
```

--------------------------------

### Build and Serve Viewer Locally

Source: https://context7.com/chromedevtools/debugger-protocol-viewer/llms.txt

Install dependencies, regenerate protocol data, build the static site, and serve it locally. Assumes the devtools-protocol repo is available locally.

```sh
# Install dependencies
npm install

# Regenerate protocol JSON data from the devtools-protocol repo
# (expects ../devtools-protocol to exist locally, or uses CI path)
npm run prep

# Build the static site (outputs to devtools-protocol/)
npm run build

# Serve locally on port 8696
npm run serve
# Open: http://localhost:8696/devtools-protocol/
```

--------------------------------

### GET /json/version

Source: https://github.com/chromedevtools/debugger-protocol-viewer/blob/master/pages/index.md

Retrieves browser version metadata and the WebSocket URL for debugging.

```APIDOC
## GET /json/version

### Description
Browser version metadata and the WebSocket URL for debugging.

### Method
GET

### Endpoint
/json/version

### Response
#### Success Response (200)
- **Browser** (string) - The browser version.
- **Protocol-Version** (string) - The protocol version.
- **User-Agent** (string) - The user agent string.
- **V8-Version** (string) - The V8 JavaScript engine version.
- **WebKit-Version** (string) - The WebKit version.
- **webSocketDebuggerUrl** (string) - The WebSocket URL for establishing a debugging connection.

### Response Example
```json
{
    "Browser": "Chrome/72.0.3601.0",
    "Protocol-Version": "1.3",
    "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3601.0 Safari/537.36",
    "V8-Version": "7.2.233",
    "WebKit-Version": "537.36 (@cfede9db1d154de0468cb0538479f34c0755a0f4)",
    "webSocketDebuggerUrl": "ws://localhost:9222/devtools/browser/b0b8a4fb-bb17-4359-9533-a8d9f3908bd8"
}
```
```

--------------------------------

### Add New Protocol Version Example (Shell)

Source: https://context7.com/chromedevtools/debugger-protocol-viewer/llms.txt

Demonstrates the command-line steps to add a new stable protocol version, including updating the versions JSON and creating necessary files. Requires running `npm run build` afterwards.

```sh
# Example: adding a hypothetical "1-4" stable version
echo '[{"slug":"tot",...},{"slug":"1-4","name":"stable (1.4)"}]' > pages/_data/versions.json
# Then create pages/_data/1-4.json, pages/1-4.md, pages/1-4.11ty.js
npm run build
```

--------------------------------

### Send CDP Command with No Parameters

Source: https://context7.com/chromedevtools/debugger-protocol-viewer/llms.txt

Example of sending a Chrome DevTools Protocol command without any arguments directly from the prompt.

```bash
Page.captureScreenshot
```

--------------------------------

### GET /json/activate/{targetId}

Source: https://github.com/chromedevtools/debugger-protocol-viewer/blob/master/pages/index.md

Brings a specific browser target (tab) into the foreground. This action activates the tab, making it the active one.

```APIDOC
## GET /json/activate/{targetId}

### Description
Brings a page into the foreground (activate a tab).

### Method
GET

### Endpoint
/json/activate/{targetId}

### Parameters
#### Path Parameters
- **targetId** (string) - Required - The unique identifier of the target tab to activate.

### Response
#### Success Response (200)
- **message** (string) - "Target activated"

#### Error Response (404)
- **message** (string) - "No such target id: {targetId}"
```

--------------------------------

### GET /json/protocol/

Source: https://github.com/chromedevtools/debugger-protocol-viewer/blob/master/pages/index.md

Retrieves the current DevTools protocol definition as a JSON object. This is useful for understanding the available domains and commands.

```APIDOC
## GET /json/protocol/

### Description
Retrieves the current DevTools protocol definition as a JSON object.

### Method
GET

### Endpoint
/json/protocol/
```

--------------------------------

### GET /devtools/inspector.html

Source: https://github.com/chromedevtools/debugger-protocol-viewer/blob/master/pages/index.md

Provides access to a local copy of the DevTools frontend, allowing for debugging and inspection of browser targets.

```APIDOC
## GET /devtools/inspector.html

### Description
A copy of the DevTools frontend that ships with Chrome. This can be used to inspect and debug browser targets.

### Method
GET

### Endpoint
/devtools/inspector.html
```

--------------------------------

### GET /json/close/{targetId}

Source: https://github.com/chromedevtools/debugger-protocol-viewer/blob/master/pages/index.md

Closes the specified browser target (tab). This action terminates the tab and its associated processes.

```APIDOC
## GET /json/close/{targetId}

### Description
Closes the target page identified by targetId.

### Method
GET

### Endpoint
/json/close/{targetId}

### Parameters
#### Path Parameters
- **targetId** (string) - Required - The unique identifier of the target tab to close.

### Response
#### Success Response (200)
- **message** (string) - "Target is closing"

#### Error Response (404)
- **message** (string) - "No such target id: {targetId}"
```

--------------------------------

### Get Browser Version Metadata

Source: https://github.com/chromedevtools/debugger-protocol-viewer/blob/master/pages/index.md

This endpoint provides metadata about the Chrome browser version and the protocol version it supports. It also includes the WebSocket URL for debugging.

```json
{
    "Browser": "Chrome/72.0.3601.0",
    "Protocol-Version": "1.3",
    "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3601.0 Safari/537.36",
    "V8-Version": "7.2.233",
    "WebKit-Version": "537.36 (@cfede9db1d154de0468cb0538479f34c0755a0f4)",
    "webSocketDebuggerUrl": "ws://localhost:9222/devtools/browser/b0b8a4fb-bb17-4359-9533-a8d9f3908bd8"
}
```

--------------------------------

### Get DevTools Protocol Definition

Source: https://github.com/chromedevtools/debugger-protocol-viewer/blob/master/pages/index.md

Retrieve the JSON definition of the DevTools Protocol. This schema describes all available domains, commands, events, and types.

```json
{
  "domains": [
      {
          "domain": "Accessibility",
          "experimental": true,
          "dependencies": [
              "DOM"
          ],
          "types": [
              {
                  "id": "AXValueType",
                  "description": "Enum of possible property types.",
                  "type": "string",
                  "enum": [
                      "boolean",
                      "tristate",
// ...
```

--------------------------------

### HTTP Endpoints for Chrome Remote Debugging

Source: https://context7.com/chromedevtools/debugger-protocol-viewer/llms.txt

Exposes HTTP endpoints for discovering targets and obtaining WebSocket URLs when Chrome is started with the --remote-debugging-port flag.

```bash
# Get browser version and WebSocket debugger URL
curl http://localhost:9222/json/version
# {
#   "Browser": "Chrome/120.0.0.0",
#   "Protocol-Version": "1.3",
#   "webSocketDebuggerUrl": "ws://localhost:9222/devtools/browser/b0b8a4fb-..."
# }
```

```bash
# List all open page targets
curl http://localhost:9222/json/list
# [{ "id": "DAB7FB...", "title": "My Page", "type": "page",
#    "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/DAB7FB..." }]
```

```bash
# Open a new tab and get its target info
curl -X PUT "http://localhost:9222/json/new?https://example.com"
```

```bash
# Bring a tab to the foreground
curl http://localhost:9222/json/activate/DAB7FB6187B554E10B0BD18821265734
```

```bash
# Close a tab
curl http://localhost:9222/json/close/DAB7FB6187B554E10B0BD18821265734
```

```bash
# Fetch the full protocol definition as JSON
curl http://localhost:9222/json/protocol | jq '.domains[].domain'
```

--------------------------------

### HTTP Endpoints for Target Discovery

Source: https://context7.com/chromedevtools/debugger-protocol-viewer/llms.txt

Chrome exposes HTTP endpoints when started with `--remote-debugging-port`. These are used to discover browser targets and obtain WebSocket URLs for CDP communication.

```APIDOC
## HTTP Endpoints Exposed by Chrome (Remote Debugging)

When Chrome is started with `--remote-debugging-port=9222`, it exposes these HTTP endpoints that clients use to discover targets and obtain the WebSocket URL for CDP communication.

### Get browser version and WebSocket debugger URL
```sh
curl http://localhost:9222/json/version
```
Response Example:
```json
{
  "Browser": "Chrome/120.0.0.0",
  "Protocol-Version": "1.3",
  "webSocketDebuggerUrl": "ws://localhost:9222/devtools/browser/b0b8a4fb-..."
}
```

### List all open page targets
```sh
curl http://localhost:9222/json/list
```
Response Example:
```json
[
  { "id": "DAB7FB...", "title": "My Page", "type": "page",
    "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/DAB7FB..." }
]
```

### Open a new tab
```sh
curl -X PUT "http://localhost:9222/json/new?https://example.com"
```

### Activate a tab
```sh
curl http://localhost:9222/json/activate/DAB7FB6187B554E10B0BD18821265734
```

### Close a tab
```sh
curl http://localhost:9222/json/close/DAB7FB6187B554E10B0BD18821265734
```

### Fetch the full protocol definition as JSON
```sh
curl http://localhost:9222/json/protocol
```
```

--------------------------------

### Add New Domains

Source: https://github.com/chromedevtools/debugger-protocol-viewer/blob/master/readme.md

Add new domains to the viewer by running a preparation script and updating the sidenav HTML.

```sh
Run `npm run prep` then `node generate-sidenav-html.cjs` and add into `<div id="domains">` in `pages/_includes/shell.hbs`.
```

--------------------------------

### Versions Configuration (pages/_data/versions.json)

Source: https://context7.com/chromedevtools/debugger-protocol-viewer/llms.txt

Defines the protocol versions rendered by the site, each with a slug for URLs and a display name. Add new versions by editing this file and creating corresponding protocol data and markdown files.

```json
[
  { "slug": "tot",  "name": "latest (tip-of-tree)" },
  { "slug": "1-2",  "name": "stable (1.2)" },
  { "slug": "1-3",  "name": "stable RC (1.3)" },
  { "slug": "v8",   "name": "v8-inspector (node)" }
]
```

--------------------------------

### Generate Search Index (create-search-index.cjs)

Source: https://context7.com/chromedevtools/debugger-protocol-viewer/llms.txt

Reads protocol JSON files to create a keyword-keyed JSON index for searching. The index maps keywords to page references including domain, type, description, and href.

```javascript
// create-search-index.cjs - run via: node create-search-index.cjs
// Reads pages/_data/versions.json to enumerate versions

// Output file: search_index/tot.json
// Structure example:
{
  "network.enable": {
    "keyword": "Network.enable",
    "pageReferences": [{
      "domain": "Network",
      "type": "4",           // "4" = Method/Command
      "description": "Enables network tracking...",
      "domainHref": "tot/Network/",
      "href": "#method-enable"
    }]
  },
  "network.requestwillbesent": {
    "keyword": "Network.requestWillBeSent",
    "pageReferences": [{
      "domain": "Network",
      "type": "1",           // "1" = Event
      "description": "Fired when page is about to send HTTP request.",
      "domainHref": "tot/Network/",
      "href": "#event-requestWillBeSent"
    }]
  }
}
```

--------------------------------

### Eleventy Build Configuration

Source: https://context7.com/chromedevtools/debugger-protocol-viewer/llms.txt

Configures Eleventy to use the Handlebars plugin, set static asset passthrough paths, and define site directories. This configuration is used for building the static reference site.

```javascript
// .eleventy.js
import handlebarsPlugin from '@11ty/eleventy-plugin-handlebars';

export default (eleventyConfig) => {
  eleventyConfig.addPlugin(handlebarsPlugin);

  // Static assets copied as-is to output
  eleventyConfig.addPassthroughCopy('pages/styles/protocol.css');
  eleventyConfig.addPassthroughCopy('pages/images/');
  eleventyConfig.addPassthroughCopy('search_index/');
  eleventyConfig.addPassthroughCopy('.nojekyll');
  eleventyConfig.addPassthroughCopy('pages/service-worker.js');

  return {
    pathPrefix: '/devtools-protocol/', // GitHub Pages subpath
    dir: {
      input: 'pages',               // Source templates
      output: 'devtools-protocol',  // Built site
      data: '_data',                // Protocol JSON data
    },
  };
};
```

--------------------------------

### PUT /json/new?{url}

Source: https://github.com/chromedevtools/debugger-protocol-viewer/blob/master/pages/index.md

Opens a new browser tab with the specified URL. The response includes the WebSocket target data for the newly created tab.

```APIDOC
## PUT /json/new?{url}

### Description
Opens a new tab with the specified URL. Responds with the websocket target data for the new tab.

### Method
PUT

### Endpoint
/json/new?{url}

### Parameters
#### Query Parameters
- **url** (string) - Required - The URL to open in the new tab.
```

--------------------------------

### Execute CDP Commands from DevTools Console

Source: https://github.com/chromedevtools/debugger-protocol-viewer/blob/master/pages/index.md

Demonstrates how to send commands to the Chrome DevTools Protocol from the browser's developer console. Requires opening 'devtools-on-devtools' first. Use `Main.MainImpl.sendOverProtocol()` to send commands with or without parameters.

```javascript
let Main = await import('./devtools-frontend/front_end/entrypoints/main/main.js'); // or './entrypoints/main/main.js' or './main/main.js' depending on the browser version
await Main.MainImpl.sendOverProtocol('Emulation.setDeviceMetricsOverride', {
  mobile: true,
  width: 412,
  height: 732,
  deviceScaleFactor: 2.625,
});

const data = await Main.MainImpl.sendOverProtocol("Page.captureScreenshot");
```

--------------------------------

### List Debugging Targets

Source: https://github.com/chromedevtools/debugger-protocol-viewer/blob/master/pages/index.md

Use the /json/list endpoint to retrieve a list of all available debugging targets (e.g., browser tabs). This is often the first step before connecting to a specific target.

```json
[
  {
    "description": "",
    "devtoolsFrontendUrl": "/devtools/inspector.html?ws=",
    "id": "DAB7FB6187B554E10B0BD18821265734",
    "title": "Yahoo",
    "type": "page",
    "url": "https://www.yahoo.com/",
    "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/DAB7FB6187B554E10B0BD18821265734"
  }
]
```

--------------------------------

### List Available WebSocket Targets

Source: https://github.com/chromedevtools/debugger-protocol-viewer/blob/master/pages/index.md

This endpoint returns a list of all available WebSocket targets, such as browser pages or workers, that can be debugged. Each target includes a description, frontend URL, and a unique ID.

```json
[
  {
  "description": "",
  "devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9222/devtools/page/DAB7FB6187B554E10B0BD18821265734",
  "id": "DAB7FB6187B554E10B0BD18821265734",

```

--------------------------------

### Protocol Data Preparation Script

Source: https://context7.com/chromedevtools/debugger-protocol-viewer/llms.txt

Shell script to fetch and merge protocol definition files from the devtools-protocol repository. It generates versioned data files and search indices.

```sh
#!/bin/bash
# Assumes devtools-protocol repo is at ../devtools-protocol
# In CI it is automatically found via the workflow layout

# What the script does internally:
# 1. Copies js_protocol.json -> pages/_data/v8.json
# 2. Merges browser_protocol.json + js_protocol.json -> pages/_data/tot.json
# 3. Filters tot.json to produce stable pages/_data/1-3.json
# 4. Generates search_index/*.json for all versions
# 5. Stamps latest commit dates into pages/tot.md

npm run prep
# Equivalent to: bash prep-tot-protocol-files.sh
```

--------------------------------

### WebSocket /devtools/page/{targetId}

Source: https://github.com/chromedevtools/debugger-protocol-viewer/blob/master/pages/index.md

Establishes a WebSocket connection for real-time communication with a specific browser target using the DevTools Protocol.

```APIDOC
## WebSocket /devtools/page/{targetId}

### Description
The WebSocket endpoint for the protocol. Use this to establish a connection for sending and receiving DevTools Protocol messages.

### Endpoint
/devtools/page/{targetId}

### Parameters
#### Path Parameters
- **targetId** (string) - Required - The unique identifier of the target tab to connect to.
```

--------------------------------

### Generate Sidenav HTML (generate-sidenav-html.cjs)

Source: https://context7.com/chromedevtools/debugger-protocol-viewer/llms.txt

Scans version protocol files to output alphabetically sorted anchor tags for the sidebar domain navigation. CSS classes are added to allow filtering by version and experimental/deprecated status.

```sh
# Run to regenerate the <nav> links for shell.hbs
node generate-sidenav-html.cjs

# Sample output (paste into <div id="domains"> in pages/_includes/shell.hbs):
#   <a href="{{{ url '/' }}}{{{ version }}}/Debugger" class="tot 1-2 1-3 v8">Debugger</a>
#   <a href="{{{ url '/' }}}{{{ version }}}/Network"  class="tot 1-2 1-3">Network</a>
#   <a href="{{{ url '/' }}}{{{ version }}}/Overlay"  class="tot experimental">Overlay</a>
```

--------------------------------

### Add New Protocol Version

Source: https://github.com/chromedevtools/debugger-protocol-viewer/blob/master/readme.md

Steps to add a new protocol version to the viewer. This involves modifying JSON data files and HTML templates.

```sh
1. Modify `pages/_data/versions.json`
2. Create `pages/_data/VERSION_SLUG.json`
3. Create `_versions/VERSION_SLUG.html` file with protocol version description
4. Update the `<div id="versions">` tag in `pages/_includes/shell.hbs`.
5. Build project
```

--------------------------------

### Using CDP over WebSocket

Source: https://context7.com/chromedevtools/debugger-protocol-viewer/llms.txt

Connect to a `webSocketDebuggerUrl` to send JSON-RPC style commands to Chrome. Each message requires an `id`, `method`, and optional `params`.

```APIDOC
## Using CDP over WebSocket

Once a `webSocketDebuggerUrl` is obtained, tools connect and send JSON-RPC style commands. Each message has an `id`, `method` (in `Domain.methodName` format), and optional `params`.

```js
// Node.js example: connect to a page and capture a screenshot
import WebSocket from 'ws';

const ws = new WebSocket('ws://localhost:9222/devtools/page/DAB7FB6187B554E10B0BD18821265734');
let cmdId = 1;

ws.on('open', async () => {
  // Enable the Page domain
  ws.send(JSON.stringify({ id: cmdId++, method: 'Page.enable' }));

  // Navigate to a URL
  ws.send(JSON.stringify({ id: cmdId++, method: 'Page.navigate', params: { url: 'https://example.com' } }));

  // Capture screenshot
  ws.send(JSON.stringify({
    id: cmdId++,
    method: 'Page.captureScreenshot',
    params: { format: 'jpeg', quality: 80 }
  }));
});

ws.on('message', (raw) => {
  const msg = JSON.parse(raw);
  if (msg.result?.data) {
    // base64-encoded image
    require('fs').writeFileSync('screenshot.jpg', Buffer.from(msg.result.data, 'base64'));
    ws.close();
  }
  // Events arrive without an `id`:
  // { method: 'Page.loadEventFired', params: { timestamp: 1234.56 } }
});
```
```

--------------------------------

### Using CDP over WebSocket in Node.js

Source: https://context7.com/chromedevtools/debugger-protocol-viewer/llms.txt

Connects to a page via WebSocket to send CDP commands like navigation and screenshot capture. Requires the 'ws' package.

```javascript
import WebSocket from 'ws';

const ws = new WebSocket('ws://localhost:9222/devtools/page/DAB7FB6187B554E10B0BD18821265734');
let cmdId = 1;

ws.on('open', async () => {
  // Enable the Page domain
  ws.send(JSON.stringify({ id: cmdId++, method: 'Page.enable' }));

  // Navigate to a URL
  ws.send(JSON.stringify({ id: cmdId++, method: 'Page.navigate', params: { url: 'https://example.com' } }));

  // Capture screenshot
  ws.send(JSON.stringify({
    id: cmdId++,
    method: 'Page.captureScreenshot',
    params: { format: 'jpeg', quality: 80 }
  }));
});

ws.on('message', (raw) => {
  const msg = JSON.parse(raw);
  if (msg.result?.data) {
    // base64-encoded image
    require('fs').writeFileSync('screenshot.jpg', Buffer.from(msg.result.data, 'base64'));
    ws.close();
  }
  // Events arrive without an `id`:
  // { method: 'Page.loadEventFired', params: { timestamp: 1234.56 } }
});
```

--------------------------------

### Client-Side Search with KeywordsModel

Source: https://context7.com/chromedevtools/debugger-protocol-viewer/llms.txt

Uses KeywordsModel to perform prioritized searches within a loaded search index. Supports prefix and substring matches.

```html
<cr-search-control
  base-url="/devtools-protocol/"
  protocol-search-index="/search_index/tot.json">
</cr-search-control>
```

```javascript
const model = new KeywordsModel(searchIndexJson);

// Returns array of keyword records, prefix matches before substring matches:
model.getMatches('Network.re');
// => [
//   { keyword: 'Network.requestWillBeSent', pageReferences: [{ type:'1', href:'#event-requestWillBeSent', ... }] },
//   { keyword: 'Network.responseReceived',  pageReferences: [{ type:'1', href:'#event-responseReceived',  ... }] },
// ]
```

--------------------------------

### Eleventy Domain Page Generation (pages/domainGenerator.js)

Source: https://context7.com/chromedevtools/debugger-protocol-viewer/llms.txt

An Eleventy pagination template that generates HTML pages for each protocol domain per version. It renders commands, events, and types with their details.

```javascript
// pages/tot.11ty.js — generates /devtools-protocol/tot/<Domain>/index.html for each domain
import { DomainGenerator } from './domainGenerator.js';

export default class extends DomainGenerator {
  constructor() {
    super('tot'); // version slug
  }
}

// DomainGenerator.data() configures Eleventy pagination:
// {
//   pagination: { data: 'tot.domains', size: 1, alias: 'domain' },
//   permalink: (data) => `tot/${data.domain.domain}/index.html`
// }

// DomainGenerator.render(data) calls domainTemplate() which produces HTML like:
// <div class="domain-section">
//   <h2>Network Domain</h2>
//   <h3>Methods</h3>  <!-- commands -->
//   <h3>Events</h3>
//   <h3>Types</h3>
//   <div class="details">
//     <h4 id="method-enable">Network.enable</h4>
//     <h5>parameters</h5>
//     <dl>
//       <dt class="param-name optional">maxTotalBufferSize</dt>
//       <dd><span class="param-type">integer</span> ...</dd>
//     </dl>
//   </div>
// </div>
```

--------------------------------

### Activate a Target

Source: https://github.com/chromedevtools/debugger-protocol-viewer/blob/master/pages/index.md

Brings a specific tab (target) into the foreground. Requires the target's unique ID.

```http
GET /json/activate/{targetId}
```

--------------------------------

### Open DevTools Frontend

Source: https://github.com/chromedevtools/debugger-protocol-viewer/blob/master/pages/index.md

Access a local copy of the Chrome DevTools frontend. This can be used to inspect and debug web pages.

```http
GET /devtools/inspector.html
```

--------------------------------

### Connect to Target WebSocket

Source: https://github.com/chromedevtools/debugger-protocol-viewer/blob/master/pages/index.md

The WebSocket endpoint used for sending commands and receiving events for a specific debugging target. The URL is provided in the /json/list response.

```websocket
ws://localhost:9222/devtools/page/{targetId}
```

--------------------------------

### Generate Stable Protocol from TOT

Source: https://context7.com/chromedevtools/debugger-protocol-viewer/llms.txt

Node.js script to filter the full tot.json, creating a stable 1-3.json by excluding experimental and deprecated items. It processes domains, types, commands, and events.

```javascript
// make-stable-protocol.cjs - run via: node make-stable-protocol.cjs
const fs = require('fs');
const tot = JSON.parse(fs.readFileSync('./pages/_data/tot.json', 'utf8'));

const isNotExperimentalOrDeprecated = item => !item.experimental && !item.deprecated;

tot.domains = tot.domains.filter(isNotExperimentalOrDeprecated);
tot.domains.forEach(domain => {
  if (domain.types)    domain.types    = domain.types.filter(isNotExperimentalOrDeprecated);
  if (domain.commands) domain.commands = domain.commands.filter(isNotExperimentalOrDeprecated);
  if (domain.events)   domain.events   = domain.events.filter(isNotExperimentalOrDeprecated);
});

fs.writeFileSync('./pages/_data/1-3.json', JSON.stringify(tot, null, 2));
// Produces a stable protocol with only non-experimental, non-deprecated items

```

--------------------------------

### Using CDP via Chrome Extension API

Source: https://context7.com/chromedevtools/debugger-protocol-viewer/llms.txt

Interacts with CDP using the chrome.debugger API, abstracting raw WebSocket communication. Requires 'debugger' permission in manifest.json.

```javascript
// manifest.json: "permissions": ["debugger"]

const tabId = 123; // from chrome.tabs API
const PROTOCOL_VERSION = '1.3';

// Attach debugger to tab
chrome.debugger.attach({ tabId }, PROTOCOL_VERSION, () => {
  if (chrome.runtime.lastError) {
    console.error(chrome.runtime.lastError.message);
    return;
  }

  // Send a command: enable Network domain
  chrome.debugger.sendCommand({ tabId }, 'Network.enable', {}, (result) => {
    console.log('Network domain enabled', result);
  });

  // Send a command with parameters
  chrome.debugger.sendCommand({ tabId }, 'Emulation.setDeviceMetricsOverride', {
    mobile: true,
    width: 390,
    height: 844,
    deviceScaleFactor: 3
  }, () => console.log('Device emulation set'));
});

// Listen for CDP events
chrome.debugger.onEvent.addListener((source, method, params) => {
  if (method === 'Network.requestWillBeSent') {
    console.log('Request:', params.request.url);
  }
});

// Detach when done
chrome.debugger.detach({ tabId });
```

--------------------------------

### Merge CDP Protocol JSON Files

Source: https://context7.com/chromedevtools/debugger-protocol-viewer/llms.txt

Node.js utility to concatenate domain arrays from two CDP JSON protocol files. Used to create tot.json by merging browser_protocol.json and js_protocol.json.

```javascript
# CLI usage: node merge-protocol-files.cjs <protocol1.json> <protocol2.json>
node merge-protocol-files.cjs \
  ../devtools-protocol/json/browser_protocol.json \
  ../devtools-protocol/json/js_protocol.json \
  > pages/_data/tot.json

# Output structure:
# {
#   "domains": [
#     { "domain": "Accessibility", "commands": [...], "events": [...], "types": [...] },
#     { "domain": "Debugger", ... },
#     // all domains from both files concatenated
#   ]
# }
```

--------------------------------

### Using CDP via Chrome Extension API

Source: https://context7.com/chromedevtools/debugger-protocol-viewer/llms.txt

Chrome extensions can use the `chrome.debugger` API to interact with CDP without raw WebSockets. Requires the `debugger` permission in `manifest.json`.

```APIDOC
## Using CDP via Chrome Extension (`chrome.debugger` API)

Chrome extensions can interact with the protocol through the `chrome.debugger` extension API, which wraps CDP without requiring a raw WebSocket.

```js
// manifest.json: "permissions": ["debugger"]

const tabId = 123; // from chrome.tabs API
const PROTOCOL_VERSION = '1.3';

// Attach debugger to tab
chrome.debugger.attach({ tabId }, PROTOCOL_VERSION, () => {
  if (chrome.runtime.lastError) {
    console.error(chrome.runtime.lastError.message);
    return;
  }

  // Send a command: enable Network domain
  chrome.debugger.sendCommand({ tabId }, 'Network.enable', {}, (result) => {
    console.log('Network domain enabled', result);
  });

  // Send a command with parameters
  chrome.debugger.sendCommand({ tabId }, 'Emulation.setDeviceMetricsOverride', {
    mobile: true,
    width: 390,
    height: 844,
    deviceScaleFactor: 3
  }, () => console.log('Device emulation set'));
});

// Listen for CDP events
chrome.debugger.onEvent.addListener((source, method, params) => {
  if (method === 'Network.requestWillBeSent') {
    console.log('Request:', params.request.url);
  }
});

// Detach when done
chrome.debugger.detach({ tabId });
```
```

--------------------------------

### Close a Target

Source: https://github.com/chromedevtools/debugger-protocol-viewer/blob/master/pages/index.md

Closes the specified tab (target). Requires the target's unique ID.

```http
GET /json/close/{targetId}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.