这是一个个人学习分支 ChromeDevTools/chrome开发工具mcp. 它添加了一个简单的英语教程和一个真实世界的演示，引导您从零开始使用该工具——不需要预先了解Chrome、DevTools、MCP或CLI。 新来的？从...开始 demo-health-check/ ↓

______________________________________________________________________

✦ 在此分叉中添加：两个端到端演示

如果条款如下 *MCP服务器*, *Chrome 开发者工具协议*, *性能跟踪*，或 *灯塔* 感到陌生——你并不孤单，而且你来对地方了。

这个分支添加了两个自包含的演示，它们一起涵盖了 第26页，共29页 chrome开发工具mcp工具。

演示1-- `demo-health-check/` --网站健康审计（CNN.com）

文件	它是什么	如果…，请从这里开始
`demo-health-check/quickstart.md`	一个实践项目：使用29个工具中的7个工具制作一份真正的网站健康报告，并给出6个复制粘贴提示	你想边做边学
`demo-health-check/cnn-case-study/report.md`	CNN.com的完整健康报告——Core Web Vitals、52家第三方供应商、3906ms的布局抖动、缓存问题、控制台错误	你想看看输出是什么样子
`demo-health-check/cnn-case-study/walkthrough.md`	一步一步带注释的演练：使用的每个工具、每个输入/输出、每个障碍——报告背后的完整故事	您想了解的怎么它奏效了
`demo-health-check/reference.md`	所有29个工具、体系结构、连接模式、守护进程/CLI和配置的完整参考	您想要了解全貌

演示2-- `demo-shopping/` --代理购物流程（sucedemo.com）

AI代理自主运行完整的电子商务购买流程：登录→ 浏览→ 多标签比较→ cart → 移动仿真→ 结账→ 订单确认。涵盖了演示1中未使用的18个交互工具。

文件	它是什么
`demo-shopping/report.md`	发现：遥测中断，React事件怪癖，堆内存基线，140.34美元订单
`demo-shopping/walkthrough.md`	所有18个工具的完整注释演练，包括输入、输出和障碍
`demo-shopping/order-confirmation.png`	屏幕截图“谢谢您的订单！”
`demo-shopping/memory-before-checkout.heapsnapshot`	6.7 MB V8堆转储--在Chrome DevTools中打开→ 记忆

你还能用它构建什么？ → `use-cases.md`

50多个代理工作流程，涵盖质量保证、性能、搜索引擎优化、电子商务、研究、安全和个人生产力，每个人都使用特定的工具，以及为什么CDP优于替代品。

______________________________________________________________________

这个工具的实际功能是什么

chrome-devtools-mcp 使您的AI助手（Claude、Gemini、Cursor、Copilot……）能够 控制和检查真实的Chrome浏览器。您的AI不仅可以读写文本文件，还可以：

打开网页并截图
像屏幕阅读器一样阅读页面的结构
收集实时控制台错误和网络请求
运行Lighthouse审计（可访问性、SEO、最佳实践）
记录性能跟踪并测量核心网络生命值（LCP、CLS、INP）

你通过简单的英语与它互动-- *“检查此页面的性能”* --人工智能会找出29个工具中的哪一个可以调用。

无需经验

该演示是为从未打开Chrome DevTools、从未使用过MCP服务器、刚刚开始使用AI编码助手的人设计的。每一个概念在使用之前都是从第一性原理解释的。

______________________________________________________________________

Chrome开发工具MCP

](https://npmjs.org/package/chrome-devtools-mcp)

chrome-devtools-mcp 让你的编码代理（如Gemini、Claude、Cursor或Copilot）控制和检查实时Chrome浏览器。它充当模型上下文协议（MCP）服务器，让您的AI编码助手能够充分利用 Chrome DevTools可实现可靠的自动化、深度调试和性能分析。

工具参考 | 更新日志 | 贡献 | 故障排除 | 设计原则

主要特点

获取性能见解：用途 [铬

开发者工具](https://github.com/ChromeDevTools/devtools-frontend) 记录跟踪并提取可操作的性能见解。

高级浏览器调试：分析网络请求，截图和

检查浏览器控制台消息（带有源映射堆栈跟踪）。

可靠的自动化.用途

操纵者使中的操作自动化 Chrome浏览器会自动等待操作结果。

免责声明

chrome-devtools-mcp 向MCP客户端公开浏览器实例的内容允许他们检查、调试和修改浏览器或DevTools中的任何数据。避免共享您不想共享的敏感或个人信息 MCP客户端。

chrome-devtools-mcp 正式支持谷歌Chrome浏览器测试用Chrome 只有。其他基于Chromium的浏览器可能会工作，但这并不能保证，您可能会遇到意外行为。请自行决定使用。我们致力于为最新版本的扩展稳定Chrome.

性能工具可能会将跟踪URL发送到Google CrUX API以获取真实用户经验数据。这有助于通过以下方式提供整体性能图将现场数据与实验室数据一起呈现。这些数据由铬用户体验报告（CrUX）。要禁用这个，和 --no-performance-crux 旗帜。

使用统计

谷歌收集使用统计数据（如工具调用成功率、延迟和环境信息），以提高Chrome DevTools MCP的可靠性和性能。

数据收集是 默认启用。您可以通过传递 --no-usage-statistics 启动服务器时标记：

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

Google根据谷歌隐私政策.

谷歌收集的Chrome DevTools MCP使用统计数据独立于Chrome浏览器的使用统计数据。选择退出Chrome指标不会自动选择退出此工具，反之亦然。

如果设置了CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS或CI环境变量，则禁用收集。

需求

v20.19或更新版本最新维护LTS 版本。
铬当前稳定版本或更新版本。

入门

将以下配置添加到MCP客户端：

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

\[！注意\]\ 使用 chrome-devtools-mcp@latest 确保您的MCP客户端始终使用最新版本的Chrome DevTools MCP服务器。

如果您只对执行基本的浏览器任务感兴趣，请使用 --slim 模式：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
    }
  }
}

看薄型工具参考.

MCP客户端配置

Amp Follow https://ampcode.com/manual#mcp and use the config provided above. You can also install the Chrome DevTools MCP server using the CLI:

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

Antigravity

要使用Chrome DevTools MCP服务器，请按照以下说明操作反重力文献安装自定义MCP服务器。将以下配置添加到MCP服务器配置中：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222",
        "-y"
      ]
    }
  }
}

这将使Chrome DevTools MCP服务器自动连接到Antigravity正在使用的浏览器。如果您没有使用端口9222，请确保进行相应调整。

Chrome DevTools MCP不会使用这种方法自动启动浏览器实例，因为Chrome DevTools MCP服务器连接到Antigravity的内置浏览器。如果浏览器尚未运行，您必须首先单击右上角的Chrome图标来启动它。

Claude Code

通过CLI安装（仅限MCP）

使用Claude Code CLI添加Chrome DevTools MCP服务器(引导):

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

作为插件安装（MCP+技能）

\[！注意\]\ 如果您之前已经为Claude Code安装了Chrome DevTools MCP，请确保先将其从安装和配置文件中删除。

要使用技能安装Chrome DevTools MCP，请在Claude Code中添加市场注册表：

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

然后，安装插件：

/plugin install chrome-devtools-mcp

重新启动Claude Code以加载MCP服务器和技能（请与 /skills).

\[！提示\] 如果插件安装失败 Failed to clone repository 错误（例如，公司防火墙后的HTTPS连接问题），请参阅故障排除指南如需解决方法，请使用上述CLI安装方法。

Cline Follow https://docs.cline.bot/mcp/configuring-mcp-servers and use the config provided above.

Codex Follow the configure MCP guide using the standard config from above. You can also install the Chrome DevTools MCP server using the Codex CLI:

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

在Windows 11上

配置Chrome安装位置，并通过更新来增加启动超时时间 .codex/config.toml 并添加以下内容 env 和 startup_timeout_ms 参数：

[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

Copilot CLI

启动Copilot CLI：

copilot

通过运行以下命令启动对话框以添加新的MCP服务器：

/mcp add

配置以下字段，然后按 CTRL+S 要保存配置，请执行以下操作：

服务器名称： chrome-devtools
服务器类型： [1] Local
命令： npx -y chrome-devtools-mcp@latest

Copilot / VS Code

单击按钮安装：

或手动安装：

遵循MCP安装引导, 使用上面的标准配置。您还可以使用VS Code CLI安装Chrome DevTools MCP服务器：

对于macOS和Linux：

code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}'

对于Windows（PowerShell）：

code --add-mcp '{"""name""":"""io.github.ChromeDevTools/chrome-devtools-mcp""","""command""":"""npx""","""args""":["""-y""","""chrome-devtools-mcp"""]}'

Cursor

单击按钮安装：

[](https://cursor.com/en/install-mcp?name=chrome-devtools&config=eyJjb21tYW5kIjoibnB4IC15IGNocm9tZS1kZXZ0b29scy1tY3BAbGF0ZXN0In0%3D)

或手动安装：

首选 Cursor Settings -> MCP -> New MCP Server.使用上面提供的配置。

Factory CLI Use the Factory CLI to add the Chrome DevTools MCP server (guide):

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

Gemini CLI Install the Chrome DevTools MCP server using the Gemini CLI.

项目范围：

# Either MCP only:
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
# Or as a Gemini extension (MCP+Skills):
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp

全球地：

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

或者，遵循 MCP指南并使用上面的标准配置。

Gemini Code Assist Follow the configure MCP guide using the standard config from above.

JetBrains AI Assistant & Junie

Kiro

在 Kiro设置首选 Configure MCP > Open Workspace or User MCP Config >使用上面提供的配置代码段。

或者，从IDE 活动栏 > Kiro > MCP Servers > Click Open MCP Config。使用上面提供的配置代码段。

Katalon Studio

Chrome DevTools MCP服务器可以与 Katalon StudioAssist 通过MCP代理。

第一步： 按照以下步骤安装MCP代理 MCP代理设置指南.

第二步： 使用代理启动Chrome DevTools MCP服务器：

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

注：如果8080已在使用中，您可能需要选择另一个端口。

步骤3： 在Katalon Studio中，使用以下设置将服务器添加到StudioAssist：

连接URL: http://127.0.0.1:8080/mcp
运输类型： HTTP

连接后，Chrome DevTools MCP工具将在StudioAssist中可用。

OpenCode

将以下配置添加到您的 opencode.json 文件。如果你没有，请在 ~/.config/opencode/opencode.json (引导):

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "chrome-devtools": {
      "type": "local",
      "command": ["npx", "-y", "chrome-devtools-mcp@latest"]
    }
  }
}

Qoder

在 Qoder设置首选 MCP Server > + Add >使用上面提供的配置代码段。

或者，遵循 MCP指南并使用上面的标准配置。

Qoder CLI

使用Qoder CLI安装Chrome DevTools MCP服务器(引导):

项目范围：

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

全球地：

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

Visual Studio

单击按钮安装：

Warp

首选 Settings | AI | Manage MCP Servers -> + Add 到添加MCP服务器.使用上面提供的配置。

Windsurf Follow the configure MCP guide using the standard config from above.

您的第一个提示

在MCP客户端中输入以下提示，检查是否一切正常：

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

您的MCP客户端应打开浏览器并记录性能跟踪。

\[！注意\]\ 一旦MCP客户端使用需要运行浏览器实例的工具，MCP服务器将自动启动浏览器。单独连接到Chrome DevTools MCP服务器不会自动启动浏览器。

工具

如果您遇到任何问题，请查看我们的故障排除指南.

输入自动化 （9个工具）

- click - drag - fill - fill_form - handle_dialog - hover - press_key - type_text - upload_file

导航自动化 （6个工具）

- close_page - list_pages - navigate_page - new_page - select_page - wait_for

仿真（2个工具）

- emulate - resize_page

演出（4个工具）

- performance_analyze_insight - performance_start_trace - performance_stop_trace - take_memory_snapshot

网络（2个工具）

- get_network_request - list_network_requests

调试（6个工具）

- evaluate_script - get_console_message - lighthouse_audit - list_console_messages - take_screenshot - take_snapshot

配置

Chrome DevTools MCP服务器支持以下配置选项：

--autoConnect/ --auto-connect

如果指定，则会自动从通道参数标识的用户数据目录连接到本地运行的浏览器（Chrome 144+）（默认通道是稳定的）。需要通过以下方式在Chrome实例中启动远程调试服务器chrome://inspect/#remote-调试。

- 类型： 布尔 - 违约： false

--browserUrl/ --browser-url, -u

连接到正在运行、可调试的Chrome实例（例如。 http://127.0.0.1:9222).有关更多详细信息，请参阅：https://github.com/ChromeDevTools/chrome-devtools-mcp#connecting-以运行chrome为例。

- 类型： 字符串

--wsEndpoint/ --ws-endpoint, -w

连接到正在运行的Chrome实例的WebSocket端点（例如ws://127.0.0.1:9222/devtools/browser/).替代--browserUrl。

- 类型： 字符串

--wsHeaders/ --ws-headers

JSON格式的WebSocket连接的自定义标头（例如，“{“Authorization”：“Bearer token”}'）。仅适用于--wsEndpoint。

- 类型： 字符串

--headless

是否在无头（无UI）模式下运行。

- 类型： 布尔 - 违约： false

--executablePath/ --executable-path, -e

自定义Chrome可执行文件的路径。

- 类型： 字符串

--isolated

如果指定，将创建一个临时用户数据目录，该目录将在浏览器关闭后自动清理。默认为false。

- 类型： 布尔

--userDataDir/ --user-data-dir

Chrome用户数据目录的路径。默认值为$HOME/.cache/chrome开发工具mcp/chrome配置文件$CHANNEL_SUFFIX_IF_NON_STABLE

- 类型： 字符串

--channel

指定应使用的其他Chrome频道。默认是稳定频道版本。

- 类型： 字符串 - 选择： stable, canary, beta, dev

--logFile/ --log-file

用于写入调试日志的文件的路径。设置env变量 DEBUG 到 * 启用详细日志。可用于提交错误报告。

- 类型： 字符串

--viewport

服务器启动的Chrome实例的初始视口大小。例如， 1280x720。在无头模式下，最大大小为3840x2160px。

- 类型： 字符串

--proxyServer/ --proxy-server

启动浏览器时，Chrome的代理服务器配置作为--Proxy服务器传递。看https://www.chromium.org/developers/design-documents/network-settings/了解详情。

- 类型： 字符串

--acceptInsecureCerts/ --accept-insecure-certs

如果启用，则忽略与自签名和过期证书相关的错误。小心使用。

- 类型： 布尔

--experimentalScreencast/ --experimental-screencast

展示实验性的屏幕录制工具（需要ffmpeg）。安装ffmpeghttps://www.ffmpeg.org/download.html并确保它在MCP服务器PATH中可用。

- 类型： 布尔

--chromeArg/ --chrome-arg

Chrome的其他论点。仅适用于Chrome由Chrome devtools mcp启动时。

- 类型： 数组

--ignoreDefaultChromeArg/ --ignore-default-chrome-arg

明确禁用Chrome的默认参数。仅适用于Chrome由Chrome devtools mcp启动时。

- 类型： 数组

--categoryEmulation/ --category-emulation

设置为false可排除与仿真相关的工具。

- 类型： 布尔 - 违约： true

--categoryPerformance/ --category-performance

设置为false可排除与性能相关的工具。

- 类型： 布尔 - 违约： true

--categoryNetwork/ --category-network

设置为false可排除与网络相关的工具。

- 类型： 布尔 - 违约： true

--performanceCrux/ --performance-crux

设置为false可禁用将URL从性能跟踪发送到CrUX API以获取字段性能数据。

- 类型： 布尔 - 违约： true

--usageStatistics/ --usage-statistics

设置为false可选择退出使用统计信息收集。谷歌收集使用数据以改进该工具，根据谷歌隐私政策处理(https://policies.google.com/privacy).这与Chrome浏览器指标无关。如果设置了CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS或CI环境变量，则禁用。

- 类型： 布尔 - 违约： true

--slim

显示一组“精简”的3个工具，仅涵盖导航、脚本执行和屏幕截图。适用于基本的浏览器任务。

- 类型： 布尔

通过 args JSON配置中的属性。例如：

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

使用自定义标头通过WebSocket连接

您可以直接连接到Chrome WebSocket端点并包含自定义标头（例如，用于身份验证）：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--wsEndpoint=ws://127.0.0.1:9222/devtools/browser/",
        "--wsHeaders={\"Authorization\":\"Bearer YOUR_TOKEN\"}"
      ]
    }
  }
}

要从正在运行的Chrome实例获取WebSocket端点，请访问 http://127.0.0.1:9222/json/version 并寻找 webSocketDebuggerUrl 现场。

你也可以跑步 npx chrome-devtools-mcp@latest --help 查看所有可用的配置选项。

概念

用户数据目录

chrome-devtools-mcp 使用以下用户启动Chrome的稳定频道实例数据目录：

Linux/macOS： $HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL
窗户： %HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

用户数据目录在运行之间不会被清除，也不会在多个运行之间共享所有实例 chrome-devtools-mcp.设置 isolated 选择权 true 使用临时用户数据目录，该目录将在以下情况下自动清除浏览器已关闭。

连接到正在运行的Chrome实例

默认情况下，Chrome DevTools MCP服务器将启动一个具有专用配置文件的新Chrome实例。这可能并非在所有情况下都是理想的：

如果您想在手动站点测试和代理驱动测试之间交替时保持相同的应用程序状态。
当MCP需要登录网站时。当浏览器通过WebDriver（Chrome DevTools MCP服务器的默认启动机制）控制时，某些帐户可能会阻止登录。
如果您在沙盒环境中运行LLM，但希望连接到在沙盒外运行的Chrome实例。

在这些情况下，请先启动Chrome并让Chrome DevTools MCP服务器连接到它。有两种方法：

自动连接（在Chrome 144中可用）：最适合在手动和代理驱动测试之间共享状态。
通过远程调试端口手动连接：最好在沙盒环境中运行。

自动连接到正在运行的Chrome实例

第一步： 在Chrome中设置远程调试

在Chrome（>=M144）中，执行以下操作以设置远程调试：

引导到 chrome://inspect/#remote-debugging 以启用远程调试。
按照对话框UI允许或不允许传入调试连接。

第二步： 配置Chrome DevTools MCP服务器以自动连接到正在运行的Chrome实例

要连接 chrome-devtools-mcp 将服务器连接到正在运行的Chrome实例，使用 --autoConnect MCP服务器的命令行参数。

以下代码片段是gemini-cli的示例配置：

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

步骤3： 测试您的设置

确保您的浏览器正在运行。打开gemini cli并运行以下提示：

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

\[！注意\]\ 这自动连接选项要求用户启动Chrome。如果用户有多个活动配置文件，MCP服务器将连接到默认配置文件（由Chrome确定）。MCP服务器可以访问所选配置文件的所有打开窗口。

Chrome DevTools MCP服务器将尝试连接到正在运行的Chrome 例子它显示了一个请求用户权限的对话框。

点击允许导致Chrome DevTools MCP服务器打开 developers.chrome.com 并表演追踪。

使用端口转发进行手动连接

您可以使用以下命令连接到正在运行的Chrome实例 --browser-url 选项。如果您在不允许启动新Chrome实例的沙盒环境中运行MCP服务器，这将非常有用。

以下是如何连接到正在运行的Chrome实例的分步指南：

步骤1：配置MCP客户端

添加 --browser-url MCP客户端配置的选项。此选项的值应该是正在运行的Chrome实例的URL。 http://127.0.0.1:9222 这是一个常见的默认设置。

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

步骤2：启动Chrome浏览器

\[！警告\]\ 启用远程调试端口会在正在运行的浏览器实例上打开一个调试端口。您计算机上的任何应用程序都可以连接到此端口并控制浏览器。确保在调试端口打开时，您没有浏览任何敏感网站。

在启用远程调试端口的情况下启动Chrome浏览器。在启动启用调试端口的新Chrome实例之前，请确保关闭所有正在运行的Chrome实例。您选择的端口号必须与您在 --browser-url MCP客户端配置中的选项。

出于安全原因， Chrome要求您使用非默认用户数据目录启用远程调试端口时。您可以使用 --user-data-dir 旗帜。这可确保您的常规浏览配置文件和数据不会暴露在调试会话中。

macOS

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

一种计算机操作系统

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

视窗

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

步骤3：测试您的设置

配置MCP客户端并启动Chrome浏览器后，您可以通过在MCP客户端中运行一个简单的提示来测试您的设置：

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

您的MCP客户端应连接到正在运行的Chrome实例并收到性能报告。

如果遇到VM到主机端口转发问题，请参阅中的“虚拟机（VM）和主机之间的远程调试失败”部分 docs/troubleshooting.md.

有关远程调试的更多详细信息，请参阅 Chrome DevTools文档.

在Android上调试Chrome

请咨询这些说明.

已知限制

看故障排除.

Chrome DevTools MCP

快速接入

详细介绍

✦ 在此分叉中添加：两个端到端演示

演示1-- `demo-health-check/` --网站健康审计（CNN.com）

演示2-- `demo-shopping/` --代理购物流程（sucedemo.com）

你还能用它构建什么？ → `use-cases.md`

这个工具的实际功能是什么

无需经验

Chrome开发工具MCP

工具参考 | 更新日志 | 贡献 | 故障排除 | 设计原则

主要特点

免责声明

使用统计

需求

入门

MCP客户端配置

您的第一个提示

工具

配置

使用自定义标头通过WebSocket连接

概念

用户数据目录

连接到正在运行的Chrome实例

自动连接到正在运行的Chrome实例

使用端口转发进行手动连接

在Android上调试Chrome

已知限制

目录标签

接入字段

权限和风险

来源信息

继续浏览同类 MCP

Chrome DevTools MCP

快速接入

详细介绍

✦ 在此分叉中添加：两个端到端演示

演示1-- demo-health-check/ --网站健康审计（CNN.com）

演示2-- demo-shopping/ --代理购物流程（sucedemo.com）

你还能用它构建什么？ → use-cases.md

这个工具的实际功能是什么

无需经验

Chrome开发工具MCP

工具参考 | 更新日志 | 贡献 | 故障排除 | 设计原则

主要特点

免责声明

使用统计

需求

入门

MCP客户端配置

您的第一个提示

工具

配置

使用自定义标头通过WebSocket连接

概念

用户数据目录

连接到正在运行的Chrome实例

自动连接到正在运行的Chrome实例

使用端口转发进行手动连接

在Android上调试Chrome

已知限制

目录标签

接入字段

权限和风险

来源信息

继续浏览同类 MCP

演示1-- `demo-health-check/` --网站健康审计（CNN.com）

演示2-- `demo-shopping/` --代理购物流程（sucedemo.com）

你还能用它构建什么？ → `use-cases.md`