### Install and Build Project

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/CONTRIBUTING.md

Clone the repository, navigate to the directory, and install dependencies, then build the project.

```bash
git clone https://github.com/ChromeDevTools/chrome-devtools-mcp.git
cd chrome-devtools-mcp
npm ci
npm run build
```

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

### Install Extension

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Installs a Chrome extension from a specified path or ID. Requires extension details.

```text
install_extension
```

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

### Start Screencast

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Starts a real-time video stream of the browser viewport. Use `screencast_stop` to end.

```text
screencast_start
```

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

### Install Chrome DevTools MCP Server using Qoder CLI (Project Wide)

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Installs the Chrome DevTools MCP server for the current project using the Qoder CLI.

```bash
qodercli mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
```

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

### Install Chrome DevTools MCP Server using Qoder CLI (Globally)

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Installs the Chrome DevTools MCP server globally for all projects using the Qoder CLI.

```bash
qodercli mcp add -s user chrome-devtools -- npx chrome-devtools-mcp@latest
```

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

### Install Chrome DevTools MCP Server for Visual Studio

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Provides a link to install the Chrome DevTools MCP server directly into Visual Studio.

```html
<img src="https://img.shields.io/badge/Visual_Studio-Install-C16FDE?logo=visualstudio&logoColor=white" alt="Install in Visual Studio">

```

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

### screencast_start

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/docs/tool-reference.md

Starts recording a screencast (video) of the selected page in specified format. (requires flag: --experimentalScreencast=true)

```APIDOC
## `screencast_start`

### Description
Starts recording a screencast (video) of the selected page in specified format. (requires flag: --experimentalScreencast=true)

### Parameters:

- **filePath** (string) _(optional)_: Output file path (.webm,.mp4 are supported). Uses mkdtemp to generate a unique path if not provided.
```

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

### Start Performance Tracing

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Begins recording a performance trace in the browser. Use `performance_stop_trace` to end recording.

```text
performance_start_trace
```

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

### Take Snapshot Help and Basic Usage

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/skills/chrome-devtools-cli/SKILL.md

Shows how to get help for the take_snapshot command and how to take a basic text snapshot of the page to obtain element UIDs.

```bash
chrome-devtools take_snapshot --help
```

```bash
chrome-devtools take_snapshot
```

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

### install_extension

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/docs/tool-reference.md

Installs a Chrome extension from the given path. This tool requires the --categoryExtensions=true flag.

```APIDOC
## install_extension

### Description
Installs a Chrome extension from the given path. (requires flag: --categoryExtensions=true)

### Method
Not specified (assumed to be a tool invocation)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **path** (string) - Required - Absolute path to the unpacked extension folder.

### Request Example
```json
{
  "tool": "install_extension",
  "path": "/path/to/unpacked/extension"
}
```

### Response
#### Success Response
- **success** (boolean) - Indicates if the installation was successful.

#### Response Example
```json
{
  "success": true
}
```
```

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

### Install Chrome DevTools MCP via Command Code CLI

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Use the Command Code CLI to add the Chrome DevTools MCP server. Refer to the MCP guide for detailed instructions.

```bash
cmd mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
```

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

### Install MCP Server via CLI

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md

Install the chrome-devtools-mcp server directly using the command line interface. This method bypasses repository cloning and uses npm/npx to fetch the package.

```sh
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
```

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

### New Page and Navigation Examples

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/docs/cli.md

Open a new page with a specified URL and navigate the current page to a different URL.

```sh
chrome-devtools new_page "https://example.com"
chrome-devtools navigate_page "https://web.dev" --type url
```

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

### Start Performance Trace Recording

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/skills/chrome-devtools-cli/SKILL.md

Initiates a performance trace recording. Can be configured to save the trace to a file.

```bash
chrome-devtools performance_start_trace true false
```

```bash
chrome-devtools performance_start_trace true true --filePath t.gz
```

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

### List Installed Extensions

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Returns a list of all currently installed Chrome extensions.

```text
list_extensions
```

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

### Install Chrome DevTools MCP as Gemini Extension

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Installs the Chrome DevTools MCP server as a Gemini extension, enabling MCP and Skills.

```bash
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
```

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

### Start Screencast Recording

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/docs/tool-reference.md

Begin recording a video of the selected page. Supported formats include WebM and MP4. A file path can be specified, otherwise a temporary path is generated. Requires the --experimentalScreencast flag.

```javascript
{
  "filePath": "/path/to/save/screencast.webm"
}
```

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

### Run MCP Help Command

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/skills/troubleshooting/SKILL.md

Verify the installation and Node.js environment by running the help command for the chrome-devtools-mcp package.

```bash
npx chrome-devtools-mcp@latest --help
```

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

### Experimental Screencast

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/skills/chrome-devtools-cli/SKILL.md

Starts or stops a screencast recording. Requires --experimentalScreencast=true and ffmpeg.

```bash
chrome-devtools screencast_start
```

```bash
chrome-devtools screencast_stop
```

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

### Example Tool Discovery and Registration

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/docs/third-party-developer-tools.md

This JavaScript code demonstrates how to listen for the 'devtoolstooldiscovery' event and register a custom tool group with a simple 'add' function.

```javascript
window.addEventListener(
  'devtoolstooldiscovery',
  (event: DevtoolsToolDiscoveryEvent) => {
    event.respondWith({
      name: 'Page-specific DevTools',
      description: "Provide runtime info directly from the page's JavaScript",
      tools: [
        {
          name: 'add',
          description: 'Calculates the sum of two numbers.',
          inputSchema: {
            type: 'object',
            properties: {
              a: {type: 'number'},
              b: {type: 'number'},
            },
            required: ['a', 'b'],
          },
          execute: async (input: {a: number; b: number}) => {
            return input.a + input.b;
          },
        },
      ],
    });
  },
);
```

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

### Install Chrome DevTools CLI Globally

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/skills/chrome-devtools-cli/references/installation.md

Install the package globally to make the `chrome-devtools` command available. This is typically done only once.

```sh
npm i chrome-devtools-mcp@latest -g
chrome-devtools status # check if install worked.
```

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

### Install Chrome DevTools MCP via Codex CLI

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Add the Chrome DevTools MCP server using the Codex CLI. Follow the official guide for MCP configuration.

```bash
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
```

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

### Start Chrome DevTools MCP Server with Proxy for Katalon Studio

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Starts the Chrome DevTools MCP server with an MCP proxy for use with Katalon StudioAssist. Ensure port 8080 is available or choose another.

```bash
mcp-proxy --transport streamablehttp --port 8080 -- npx -y chrome-devtools-mcp@latest
```

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

### Analysis Example: Lighthouse Audit

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/docs/cli.md

Run a Lighthouse audit. By default, it operates in snapshot mode.

```sh
# Run a Lighthouse audit (defaults to navigation mode)
chrome-devtools lighthouse_audit --mode snapshot
```

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

### Start Chrome DevTools MCP with Browser URL in WSL

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md

Configure chrome-devtools-mcp to connect to a Chrome instance started on the Windows side using Mirrored networking. This bypasses WSL-specific Chrome launch issues.

```bash
npx chrome-devtools-mcp --browser-url http://127.0.0.1:9222
```

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

### Test Setup with a Prompt

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/docs/debugging-android.md

After setting up port forwarding and configuring the MCP server, test your connection by running a prompt in your coding agent. This verifies that the MCP server can control Chrome on your Android device.

```none
Check the performance of developers.chrome.com
```

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

### Install Chrome DevTools MCP Plugin via Copilot / VS Code

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Install the chrome-devtools-mcp plugin from source in VS Code using the Command Palette. This bundles the MCP server and skills for your agent.

```bash
Chat: Install Plugin From Source
```

```bash
ChromeDevTools/chrome-devtools-mcp
```

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

### Add Chrome DevTools MCP Server using Factory CLI

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Installs the Chrome DevTools MCP server using the Factory CLI. Ensure you have the Factory CLI installed and configured.

```bash
droid mcp add chrome-devtools "npx -y chrome-devtools-mcp@latest"
```

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

### TypeScript Evaluation Scenario Example

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/CONTRIBUTING.md

An example of a TypeScript scenario for evaluating Gemini's use of MCP server tools. It defines a prompt, maximum turns, and an expectations function to verify tool calls and their arguments.

```typescript
import {TestScenario} from '../eval_gemini.js';

export const scenario: TestScenario = {
  prompt: 'Navigate to example.com',
  maxTurns: 2,
  expectations: calls => {
    // Check that at least one call was 'browse_page'
    const navigation = calls.find(c => c.name === 'browse_page');
    if (!navigation) throw new Error('Model did not browse the page');
    // Verify essential args
    if (navigation.args.url !== 'http://example.com') {
      throw new Error(`Wrong URL: ${navigation.args.url}`);
    }
  },
};
```

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

### Start Chrome on Windows for WSL Mirrored Networking

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md

Start Chrome on the Windows side with remote debugging enabled and a specified user data directory. This is used in conjunction with Mirrored networking for WSL.

```powershell
chrome.exe --remote-debugging-port=9222 --user-data-dir=C:\path\to\dir
```

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

### Interaction Examples: Click and Fill

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/docs/cli.md

Interact with web elements by clicking an element using its UID and filling a form field with provided text.

```sh
# Click an element by its UID from a snapshot
chrome-devtools click "element-uid-123"

# Fill a form field
chrome-devtools fill "input-uid-456" "search query"
```

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

### performance_start_trace

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/docs/tool-reference.md

Starts a performance trace on the selected webpage to identify frontend performance issues and Core Web Vitals.

```APIDOC
## performance_start_trace

### Description
Start a performance trace on the selected webpage. Use to find frontend performance issues, Core Web Vitals (LCP, INP, CLS), and improve page load speed.

### Parameters
#### Optional Parameters
- **autoStop** (boolean) - Optional - Determines if the trace recording should be automatically stopped.
- **filePath** (string) - Optional - The absolute file path, or a file path relative to the current working directory, to save the raw trace data. For example, trace.json.gz (compressed) or trace.json (uncompressed).
- **reload** (boolean) - Optional - Determines if, once tracing has started, the current selected page should be automatically reloaded. Navigate the page to the right URL using the [`navigate_page`](#navigate_page) tool BEFORE starting the trace if reload or autoStop is set to true.
```

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

### Manage Chrome Extensions

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/skills/chrome-devtools-cli/SKILL.md

Commands to list, install, uninstall, reload, and trigger actions for Chrome extensions.

```bash
chrome-devtools list_extensions
```

```bash
chrome-devtools install_extension "/path/to/extension"
```

```bash
chrome-devtools uninstall_extension "extension_id"
```

```bash
chrome-devtools reload_extension "extension_id"
```

```bash
chrome-devtools trigger_extension_action "extension_id"
```

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

### Add Chrome DevTools MCP Server (Globally)

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Installs the Chrome DevTools MCP server globally for use with Gemini.

```bash
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
```

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

### Install Chrome DevTools MCP via Amp CLI

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Use the Amp CLI to add the Chrome DevTools MCP server. Ensure you follow the specified manual configuration.

```bash
amp mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
```

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

### Enable Debugging and Logging for MCP Server

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md

Start the MCP server with debugging enabled for all modules and specify a log file for detailed output. This is useful for diagnosing server-side issues.

```bash
DEBUG=* npx chrome-devtools-mcp@latest --log-file=/path/to/chrome-devtools-mcp.log
```

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

### Start Chrome with Remote Debugging on Windows

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Launch Google Chrome on Windows with the remote debugging port enabled and a custom user data directory for security. Ensure no other Chrome instances are running.

```bash
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="%TEMP%\chrome-profile-stable"
```

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

### Get Heap Snapshot Summary

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Provides a summary of a heap snapshot, including total memory and object counts.

```text
get_heapsnapshot_summary
```

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

### Example JSON Configuration for Chrome DevTools MCP

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

This JSON snippet demonstrates how to configure the `mcpServers` for Chrome DevTools, including specifying the command, channel, headless mode, and isolated execution.

```json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=canary",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}
```

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

### Manage DevTools Service

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/skills/chrome-devtools-cli/SKILL.md

Commands to start, check the status of, or stop the chrome-devtools-mcp service.

```bash
chrome-devtools start
```

```bash
chrome-devtools status
```

```bash
chrome-devtools stop
```

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

### Start Chrome with Remote Debugging on Linux

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Launch Google Chrome on Linux with the remote debugging port enabled and a custom user data directory for security. Ensure no other Chrome instances are running.

```bash
/usr/bin/google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable
```

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

### Get Heap Snapshot Details

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Fetches detailed information about specific nodes within a heap snapshot.

```text
get_heapsnapshot_details
```

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

### Configure Chrome DevTools MCP for Codex on Windows

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

On Windows 11, configure the Chrome install location and increase the startup timeout by updating the .codex/config.toml file with the provided environment variables and startup timeout.

```toml
[mcp_servers.chrome-devtools]
command = "cmd"
args = [
    "/c",
    "npx",
    "-y",
    "chrome-devtools-mcp@latest",
]
env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000
```

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

### Setup Port Forwarding with ADB

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/docs/debugging-android.md

Use this ADB command to forward the debugging port from your development machine to your Android device. Ensure USB debugging is enabled on your device.

```shell
adb forward tcp:9222 localabstract:chrome_devtools_remote
```

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

### list_extensions

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/docs/tool-reference.md

Lists all the Chrome extensions installed in the browser, including their name, ID, version, and enabled status. This tool requires the --categoryExtensions=true flag.

```APIDOC
## list_extensions

### Description
Lists all the Chrome extensions installed in the browser. This includes their name, ID, version, and enabled status. (requires flag: --categoryExtensions=true)

### Method
Not specified (assumed to be a tool invocation)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```json
{
  "tool": "list_extensions"
}
```

### Response
#### Success Response
- **extensions** (array) - A list of installed extensions.

#### Response Example
```json
{
  "extensions": [
    {
      "name": "My Extension",
      "id": "abcdef123456",
      "version": "1.0.0",
      "enabled": true
    }
  ]
}
```
```

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

### get_console_message

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/docs/tool-reference.md

Gets a console message by its ID. You can get all messages by calling `list_console_messages`.

```APIDOC
## `get_console_message`

### Description
Gets a console message by its ID. You can get all messages by calling [`list_console_messages`](#list_console_messages).

### Parameters:

- **msgid** (number) **(required)**: The msgid of a console message on the page from the listed console messages
```

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

### Start Chrome with Remote Debugging on macOS

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Launch Google Chrome on macOS with the remote debugging port enabled and a custom user data directory for security. Ensure no other Chrome instances are running.

```bash
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable
```

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

### Install Chrome DevTools MCP Plugin via Claude Code

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Install the Chrome DevTools MCP plugin and its skills within Claude Code by adding the marketplace registry and then installing the plugin. Restart Claude Code for changes to take effect.

```bash
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
```

```bash
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
```

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

### Install Google Chrome in WSL

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md

Install Google Chrome directly within the WSL environment to ensure compatibility. This is a workaround for issues launching Windows Chrome from WSL.

```sh
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo dpkg -i google-chrome-stable_current_amd64.deb
```

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

### Experimental WebMCP Tools

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/skills/chrome-devtools-cli/SKILL.md

Lists all WebMCP tools. Requires --categoryExperimentalWebmcp=true.

```bash
chrome-devtools list_webmcp_tools
```

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

### Check Website Performance

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Use this prompt to initiate a performance trace of a given website. The MCP client will automatically open the browser and record the trace.

```text
Check the performance of https://developers.chrome.com
```

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

### Build Project

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/AGENTS.md

Run this command to compile TypeScript code and build the project.

```bash
npm run build
```

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

### Run All Tests

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/AGENTS.md

Builds the project and runs all tests to verify correctness.

```bash
npm run test
```

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

### Get Network Request Details

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/skills/debug-optimize-lcp/SKILL.md

Get full details for a specific network request using its request ID. Useful for inspecting the LCP resource's load duration and server response time.

```javascript
await chrome.network.get_network_request(requestId);
```

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

### List WebMCP Tools

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Lists all available WebMCP tools that can be executed.

```text
list_webmcp_tools
```

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

### Run Single Test File

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/AGENTS.md

Builds the project and runs a specific test file. Replace 'path-to-test.ts' with the actual file path.

```bash
npm run test tests/McpContext.test.ts
```

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

### list_pages

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/docs/tool-reference.md

Get a list of pages open in the browser.

```APIDOC
## list_pages

### Description
Get a list of pages open in the browser.

### Parameters
None
```

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

### Get Console Message

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/skills/chrome-devtools-cli/SKILL.md

Retrieves a specific console message by its ID.

```bash
chrome-devtools get_console_message 1
```

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

### navigate_page

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/docs/tool-reference.md

Go to a URL, or back, forward, or reload. Use project URL if not specified otherwise.

```APIDOC
## navigate_page

### Description
Go to a URL, or back, forward, or reload. Use project URL if not specified otherwise.

### Parameters
#### Query Parameters
- **handleBeforeUnload** (enum: "accept", "decline") - Optional - Whether to auto accept or beforeunload dialogs triggered by this navigation. Default is accept.
- **ignoreCache** (boolean) - Optional - Whether to ignore cache on reload.
- **initScript** (string) - Optional - A JavaScript script to be executed on each new document before any other scripts for the next navigation.
- **timeout** (integer) - Optional - Maximum wait time in milliseconds. If set to 0, the default timeout will be used.
- **type** (enum: "url", "back", "forward", "reload") - Optional - Navigate the page by URL, back or forward in history, or reload.
- **url** (string) - Optional - Target URL (only type=url)
```

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

### Create New Page

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/skills/chrome-devtools-cli/SKILL.md

Opens a new browser page, optionally in the background, with a specified URL. Supports setting timeouts and isolated contexts.

```bash
chrome-devtools new_page "https://example.com"
```

```bash
chrome-devtools new_page "https://example.com" --background true --timeout 5000
```

```bash
chrome-devtools new_page "https://example.com" --isolatedContext "ctx"
```

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

### Get Network Request

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Retrieves details of a specific network request based on its URL or identifier.

```text
get_network_request
```

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

### List Third-Party Developer Tools

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Lists all available third-party developer tools that can be executed.

```text
list_3p_developer_tools
```

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

### Take Snapshot

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/skills/chrome-devtools-cli/SKILL.md

Creates a text snapshot of the page from the accessibility tree. Can be verbose and saved to a file.

```bash
chrome-devtools take_snapshot
```

```bash
chrome-devtools take_snapshot --verbose true --filePath "s.txt"
```

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

### navigate

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/docs/slim-tool-reference.md

Loads a URL using the navigate tool.

```APIDOC
## navigate

### Description
Loads a URL.

### Parameters
#### Query Parameters
- **url** (string) - Required - URL to navigate to
```

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

### new_page

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/docs/tool-reference.md

Open a new tab and load a URL. Use project URL if not specified otherwise.

```APIDOC
## new_page

### Description
Open a new tab and load a URL. Use project URL if not specified otherwise.

### Parameters
#### Query Parameters
- **url** (string) - Required - URL to load in a new page.
- **background** (boolean) - Optional - Whether to open the page in the background without bringing it to the front. Default is false (foreground).
- **isolatedContext** (string) - Optional - If specified, the page is created in an isolated browser context with the given name. Pages in the same browser context share cookies and storage. Pages in different browser contexts are fully isolated.
- **timeout** (integer) - Optional - Maximum wait time in milliseconds. If set to 0, the default timeout will be used.
```

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

### Configure MCP Server Command on Windows using cmd

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md

On Windows, use 'cmd /c' to correctly execute npx commands from within another process. This ensures the Node.js package is launched properly.

```json
"mcpServers": {
    "chrome-devtools": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "chrome-devtools-mcp@latest"]
    }
  }
```

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

### Get Console Message

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Retrieves a specific console message based on its identifier. Useful for targeted log inspection.

```text
get_console_message
```

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

### Disable Usage Statistics

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Opt-out of usage statistics collection by passing the --no-usage-statistics flag when starting the server.

```json
{
  "args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]
}
```

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

### Get Heap Snapshot Retainers

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Finds the retainers for specific nodes in a heap snapshot, helping to identify memory ownership.

```text
get_heapsnapshot_retainers
```

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

### Test with @modelcontextprotocol/inspector

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/CONTRIBUTING.md

Run the inspector tool with the built project to test its functionality.

```bash
npx @modelcontextprotocol/inspector node /build/src/bin/chrome-devtools-mcp.js
```

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

### Get Network Request

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/skills/chrome-devtools-cli/SKILL.md

Retrieves the currently selected network request or a specific request by its ID. Can save the request or response to a file.

```bash
chrome-devtools get_network_request
```

```bash
chrome-devtools get_network_request --reqid 1 --requestFilePath req.md
```

```bash
chrome-devtools get_network_request --responseFilePath res.md
```

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

### Open New Page

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Opens a new browser tab and navigates to a specified URL. If no URL is provided, it opens a blank page.

```text
new_page
```

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

### Get Heap Snapshot Class Nodes

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Retrieves nodes from a heap snapshot filtered by class name. Useful for analyzing memory allocation.

```text
get_heapsnapshot_class_nodes
```

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

### lighthouse_audit

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/docs/tool-reference.md

Get Lighthouse score and reports for accessibility, SEO, best practices, and agentic browsing. This excludes performance. For performance audits, run `performance_start_trace`.

```APIDOC
## `lighthouse_audit`

### Description
Get Lighthouse score and reports for accessibility, SEO, best practices, and agentic browsing. This excludes performance. For performance audits, run [`performance_start_trace`](#performance_start_trace)

### Parameters:

- **device** (enum: "desktop", "mobile") _(optional)_: Device to [`emulate`](#emulate).
- **mode** (enum: "navigation", "snapshot") _(optional)_: "navigation" reloads & audits. "snapshot" analyzes current state.
- **outputDirPath** (string) _(optional)_: Directory for reports. If omitted, uses temporary files.
```

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

### Basic Chrome DevTools CLI Commands

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/docs/cli.md

Check daemon status, navigate the current page to a URL, take a screenshot, and stop the background daemon.

```sh
# Check if the daemon is running
chrome-devtools status

# Navigate the current page to a URL
chrome-devtools navigate_page "https://google.com"

# Take a screenshot and save it to a file
chrome-devtools take_screenshot --filePath screenshot.png

# Stop the background daemon when finished
chrome-devtools stop
```

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

### Get Console Message by ID

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/docs/tool-reference.md

Retrieve a specific console message using its unique ID. All available messages can be listed using the `list_console_messages` tool.

```javascript
{
  "msgid": 123
}
```

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

### Emulate Color Scheme and Viewport

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/skills/chrome-devtools-cli/SKILL.md

Simulates a specific color scheme (e.g., 'dark') and viewport dimensions.

```bash
chrome-devtools emulate --colorScheme "dark" --viewport "1920x1080"
```

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

### Emulate Device/Settings

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Applies emulation settings, such as device presets or network throttling. Useful for testing responsive designs and network conditions.

```text
emulate
```

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

### Add Chrome DevTools MCP Server (Globally for Gemini)

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Adds the Chrome DevTools MCP server globally for Gemini, including skills.

```bash
gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest
```

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

### Emulate User Agent

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/skills/chrome-devtools-cli/SKILL.md

Sets a custom user agent string for the browser.

```bash
chrome-devtools emulate --userAgent "Mozilla/5.0..."
```

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

### Run MCP with Verbose Logging

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/skills/troubleshooting/SKILL.md

Capture detailed debug logs for analysis by running the MCP client with the DEBUG environment variable and a log file. Analyze the output for errors.

```bash
DEBUG=* npx chrome-devtools-mcp@latest --logFile=/tmp/cdm-test.log
```

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

### Run Lighthouse Audit

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/skills/chrome-devtools-cli/SKILL.md

Performs a Lighthouse audit in either navigation or snapshot mode. Can specify device type and output directory.

```bash
chrome-devtools lighthouse_audit --mode "navigation"
```

```bash
chrome-devtools lighthouse_audit --mode "snapshot" --device "mobile"
```

```bash
chrome-devtools lighthouse_audit --outputDirPath ./out
```

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

### Configure MCP Server for Automatic Connection to Running Chrome

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

This configuration allows the Chrome DevTools MCP server to automatically connect to a running Chrome instance. Ensure Chrome is started with remote debugging enabled before using this option. The MCP server will attempt to connect to the default Chrome profile.

```json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest", "--autoConnect"]
    }
  }
}
```

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

### Record Performance Trace

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/skills/debug-optimize-lcp/SKILL.md

Record a performance trace with reload to capture the full page load including LCP. Use `performance_start_trace` with `reload: true` and `autoStop: true`.

```javascript
await chrome.page.navigate_page(url);
await chrome.performance.performance_start_trace({reload: true, autoStop: true});
```

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

### Configure Chrome DevTools MCP for Copilot CLI

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Add the Chrome DevTools MCP server to Copilot CLI by running the '/mcp add' command and configuring the server name, type, and command. Save the configuration with CTRL+S.

```bash
copilot
```

```bash
/mcp add
```

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

### Select Page for Context

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/skills/chrome-devtools-cli/SKILL.md

Sets a specific page as the active context for subsequent tool calls. Can optionally bring the selected page to the front.

```bash
chrome-devtools select_page 1
```

```bash
chrome-devtools select_page 1 --bringToFront true
```

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

### list_webmcp_tools

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/docs/tool-reference.md

Lists all WebMCP tools the page exposes. This tool requires the --categoryExperimentalWebmcp=true flag.

```APIDOC
## list_webmcp_tools

### Description
Lists all WebMCP tools the page exposes. (requires flag: --categoryExperimentalWebmcp=true)

### Method
Not specified (assumed to be a tool invocation)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```json
{
  "tool": "list_webmcp_tools"
}
```

### Response
#### Success Response
- **tools** (array) - A list of available WebMCP tools.

#### Response Example
```json
{
  "tools": ["toolA", "toolB"]
}
```
```

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

### Compare Node.js Heap Snapshots Manually

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/skills/memory-leak-debugging/SKILL.md

Use this Node.js script to compare two heap snapshots and identify growing objects and common leak types when `memlab` is not available. Provide the baseline and target snapshot file paths as arguments.

```bash
node skills/memory-leak-debugging/references/compare_snapshots.js <baseline.heapsnapshot> <target.heapsnapshot>
```

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

### Enable Debug Logging

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/CONTRIBUTING.md

Run the inspector with the --log-file argument to write debug logs to a specified file.

```bash
npx @modelcontextprotocol/inspector node /build/src/bin/chrome-devtools-mcp.js --log-file=/your/desired/path/log.txt
```

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

### Emulate CPU Throttling and Geolocation

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/skills/chrome-devtools-cli/SKILL.md

Simulates CPU throttling by setting a rate and emulates geolocation by providing coordinates.

```bash
chrome-devtools emulate --cpuThrottlingRate 4 --geolocation "0x0"
```

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

### Configure Chrome DevTools MCP Server for Mistral Vibe

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Adds the Chrome DevTools MCP server configuration to Mistral Vibe's config.toml file.

```toml
[[mcp_servers]]
name = "chrome-devtools"
transport = "stdio"
command = "npx"
args = ["chrome-devtools-mcp@latest"]

```

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

### Reload or Navigate Back

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/skills/chrome-devtools-cli/SKILL.md

Reloads the current page, optionally ignoring the cache, or navigates back. Can also run an init script upon navigation.

```bash
chrome-devtools navigate_page --type "reload" --ignoreCache true
```

```bash
chrome-devtools navigate_page --type "back" --initScript "foo()"
```

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

### Emulate Network Conditions

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/skills/chrome-devtools-cli/SKILL.md

Simulates various network conditions, such as 'Offline'.

```bash
chrome-devtools emulate --networkConditions "Offline"
```

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

### click_at

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/docs/tool-reference.md

Clicks at the provided coordinates (requires flag: --experimentalVision=true).

```APIDOC
## click_at

### Description
Clicks at the provided coordinates (requires flag: --experimentalVision=true)

### Parameters
#### Query Parameters
- **x** (number) - Required - The x coordinate
- **y** (number) - Required - The y coordinate
- **dblClick** (boolean) - Optional - Set to true for double clicks. Default is false.
- **includeSnapshot** (boolean) - Optional - Whether to include a snapshot in the response. Default is false.
```

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

### Configure MCP Client Debugging via .mcp.json

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md

Use a .mcp.json file to configure the MCP client, enabling debugging and specifying the log file path. This allows for persistent debugging configurations.

```json
{
  "mcpServers": {
    "chrome-devtools": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--log-file",
        "/path/to/chrome-devtools-mcp.log"
      ],
      "env": {
        "DEBUG": "*"
      }
    }
  }
}
```

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

### List Network Requests

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/skills/chrome-devtools-cli/SKILL.md

Lists all network requests, with options for pagination, filtering by resource type, and including preserved requests.

```bash
chrome-devtools list_network_requests
```

```bash
chrome-devtools list_network_requests --pageSize 50 --pageIdx 0
```

```bash
chrome-devtools list_network_requests --resourceTypes Fetch
```

```bash
chrome-devtools list_network_requests --includePreservedRequests true
```

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

### Upload File

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Simulates a file upload action. Requires a file path as an argument.

```text
upload_file
```

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

### select_page

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/docs/tool-reference.md

Select a page as a context for future tool calls.

```APIDOC
## select_page

### Description
Select a page as a context for future tool calls.

### Parameters
#### Query Parameters
- **pageId** (number) - Required - The ID of the page to select. Call `list_pages` to get available pages.
- **bringToFront** (boolean) - Optional - Whether to focus the page and bring it to the top.
```

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

### Execute WebMCP Tool

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/README.md

Executes a tool provided by the WebMCP framework.

```text
execute_webmcp_tool
```

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

### Troubleshooting: Verbose Logs

Source: https://github.com/chromedevtools/chrome-devtools-mcp/blob/main/docs/cli.md

Enable verbose logging for the CLI by setting the DEBUG environment variable.

```sh
DEBUG=* chrome-devtools list_pages
```