今日开源[第30期]Chrome DevTools MCP

Chrome DevTools MCP 项目分析报告

分析日期：2026-07-06

一、项目介绍

1.1 项目概述

Chrome DevTools MCP（chrome-devtools-mcp）是 Google Chrome DevTools 团队官方推出的 Model Context Protocol (MCP) 服务器。它让 AI 编程助手（如 Claude Code、Cursor、GitHub Copilot、Gemini CLI 等）能够直接控制和检查实时运行的 Chrome 浏览器，将 Chrome DevTools 的全部能力——性能追踪、网络请求分析、控制台调试、内存快照、Lighthouse 审计、浏览器扩展管理等——以 MCP 工具的形式暴露给 AI Agent [1]。

这不是一个社区维护的 MCP 适配层，而是 Google 官方把整个 Chrome DevTools 的能力拆解为 44+ 个 MCP 工具，直接喂给所有 AI Agent [2]。项目从 2025 年 9 月首次发布至 2026 年 7 月，仅用 10 个月就达到 45,000+ Stars，成为史上增长最快的 MCP 项目之一。

1.2 项目信息

项目	详情
项目名称	Chrome DevTools MCP
项目地址	https://github.com/ChromeDevTools/chrome-devtools-mcp
NPM 包	https://www.npmjs.com/package/chrome-devtools-mcp
项目官网	NPM 页面作为主页
作者/组织	Google LLC / ChromeDevTools 组织
Stars	45,700+（截至 2026 年 7 月）
当前版本	v1.5.0（2026 年 7 月 3 日发布）
开源协议	Apache-2.0
主要语言	TypeScript 100%
仓库创建	2025 年 9 月 11 日
提交数	903 次 commits
NPM 版本数	57 个版本

1.3 项目示意图

项目 README 展示了以下关键能力场景：

性能分析闭环：Agent 调用 performance_start_trace 录制页面加载 → performance_stop_trace 停止 → performance_analyze_insight 获取语义化洞察（如 "LCP 为 3.2s"、"最大的阻塞资源是 main.js，耗时 1.8s"）
调试闭环：Agent 自动化操作页面后，如遇异常，可依次调用 list_console_messages（查看 JS 错误）、get_console_message（获取 source-mapped 堆栈）、list_network_requests（查看网络请求状态）、get_network_request（展开响应详情），在一次对话中完成完整诊断 [2]
多客户端支持：支持 20+ 种 MCP 客户端，包括 Claude Code、Cursor、VS Code/Copilot、Gemini CLI、JetBrains AI Assistant、Windsurf、Warp 等

二、项目亮点

2.1 官方 DevTools 深度集成

底层调用 Chrome DevTools 的原生 trace engine、accessibility tree、CDP（Chrome DevTools Protocol），而非简单的 DOM 操作封装。Performance 工具录制的是完整的 DevTools Performance 面板追踪数据——Main thread task breakdown、Layout、Recalculate Style、Composite Layers、JS 执行时间线、网络瀑布图等全部数据 [2]。

2.2 Token-Optimized 设计原则

不把原始数据（如 5 万行 JSON trace）直接扔给 Agent，而是先提炼成语义化摘要。例如 performance_analyze_insight 返回 "LCP 是 3.2 秒" 而非原始 trace 数据 [2]。

2.3 CrUX 真实用户数据集成

Performance 工具默认将 trace URL 发送到 Google CrUX API，获取真实用户的现场性能数据（field data），与 lab data 做对比。Agent 可以看到 "全球用户的 75 分位 LCP 是 4.5s，你的页面比 60% 的同类页面慢" 这样的洞察 [2]。这是第三方浏览器自动化工具无法做到的，因为 CrUX API 是 Google 独有的。

2.4 Agent 感知-决策-执行闭环

take_snapshot 基于 accessibility tree 返回紧凑的结构化文本快照，可交互元素带 ref ID，Agent 可直接用 click 工具点击。形成 "看一眼页面 → 判断状态 → 决定操作 → 执行 → 再看结果" 的完整闭环 [2]。

2.5 渐进复杂度（Progressive Complexity）

工具默认简单（高层操作），但提供高级可选参数。同时提供 --slim 模式（仅 3 个工具：navigate_page、evaluate_script、take_screenshot）用于轻量场景 [2]。

2.6 多 Agent 并行支持

通过 pageId 路由机制支持并行多 Agent 工作流（v0.19.0 引入），不同的 Agent 可以同时操作不同的页面。支持 isolatedContext 参数，不同上下文完全隔离 cookies 和 storage [3]。

2.7 7 条设计原则

原则	说明
Agent-Agnostic API	使用 MCP 标准协议，不锁定单一 LLM
Token-Optimized	返回语义摘要，"LCP 为 3.2s" 优于 5 万行 JSON
Small, Deterministic Blocks	给 Agent 可组合的工具（Click, Screenshot），而非魔法按钮
Self-Healing Errors	返回包含上下文和潜在修复方案的可操作错误
Human-Agent Collaboration	输出同时可被机器（结构化）和人类（摘要）阅读
Progressive Complexity	默认简单，为高级用户提供可选参数
Reference over Value	对于重资产（截图、trace、视频），返回文件路径或资源 URI

2.8 与同类项目的差异化优势

维度	chrome-devtools-mcp	Playwright MCP	browser-use
开发者	Google Chrome 官方	Microsoft	社区
控制方式	CDP + Puppeteer + DevTools 前端	Playwright	Playwright + Python
跨浏览器	仅 Chrome/Chromium	Chromium, Firefox, WebKit	主要 Chromium
快照方式	Accessibility tree 文本快照	Accessibility tree 快照	视觉 + 截图辅助
性能分析	DevTools 原生 trace engine + CrUX	无深度集成	无
内存分析	堆快照、类节点、retaining paths、对比	无	无
Lighthouse	内置集成	无	无
扩展管理	安装/卸载/重载/触发扩展	无	无
Stars	~45,700	~20,000	~70,000
设计目标	为 AI Agent 设计的调试+自动化	通用浏览器自动化	Agent 驱动的自然语言浏览

核心差异化：chrome-devtools-mcp 不是给开发者写的，是给 Agent 写的。传统工具（Selenium、Puppeteer、Playwright）的 API 为"确定性脚本"设计，而 chrome-devtools-mcp 的目标是：Agent 自己决定做什么，工具帮它看懂浏览器状态，执行指令，再帮它看懂结果 [2]。

三、项目运行环境

3.1 硬件要求

无特殊硬件要求，标准开发机器即可
需足够磁盘空间供 Chrome 浏览器及其用户数据目录

3.2 操作系统支持

平台	支持状态	备注
Windows	完整支持	含 Windows 11 特殊配置
macOS	完整支持	—
Linux	完整支持	支持 X Server 显示检测，支持 WSL
无头模式	支持	`--headless` 可在无 GUI 的服务器/CI 环境运行

3.3 软件依赖

依赖	版本要求
Node.js	`^20.19.0` 或 `^22.12.0` 或 `>=23`（LTS 版本）
Chrome	当前稳定版或更新（仅支持 Google Chrome 和 Chrome for Testing）
npm	随 Node.js 附带
Puppeteer	25.2.1（项目依赖）
Lighthouse	13.4.0（项目依赖）
chrome-devtools-frontend	1.0.1652307（项目依赖）
@modelcontextprotocol/sdk	1.29.0（项目依赖）

3.4 安装步骤

通用安装（适用于所有 MCP 客户端）：

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

Slim 模式（轻量级，仅 3 个工具）：加 --slim --headless 参数。

各客户端快速安装：

客户端	安装命令
Claude Code	`claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest`
VS Code/Copilot	命令面板 → `Chat: Install Plugin From Source` → 输入 `ChromeDevTools/chrome-devtools-mcp`
Gemini CLI	`gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest`
Cursor	Settings → MCP → New MCP Server → 使用标准配置
Codex CLI	`codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest`

验证安装：

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

四、项目代码介绍

4.1 代码架构图

chrome-devtools-mcp/
├── src/                          # 核心源代码
│   ├── bin/                      # CLI 入口 (chrome-devtools-mcp, chrome-devtools)
│   ├── index.ts                  # 主入口 (createMcpServer)
│   ├── browser.ts                # 浏览器启动与连接管理
│   ├── McpContext.ts             # MCP 核心上下文 (~31KB)
│   ├── McpPage.ts                # 页面封装 (~12KB)
│   ├── McpResponse.ts            # 响应处理 (~47KB)
│   ├── SlimMcpResponse.ts        # Slim 模式响应
│   ├── ToolHandler.ts            # 工具处理器 (~9KB)
│   ├── TextSnapshot.ts           # 文本快照 (~10KB)
│   ├── PageCollector.ts          # 页面数据收集器 (~11KB)
│   ├── HeapSnapshotManager.ts    # 堆快照管理器 (~11KB)
│   ├── WaitForHelper.ts          # 等待辅助 (~6KB)
│   ├── tools/                    # 所有 MCP 工具定义
│   │   ├── ToolDefinition.ts     # 工具定义接口
│   │   ├── categories.ts         # 工具分类（11 个类别）
│   │   ├── tools.ts              # 工具创建工厂
│   │   ├── pages.ts              # 页面操作工具
│   │   ├── input.ts              # 输入自动化工具
│   │   ├── performance.ts        # 性能分析工具
│   │   ├── network.ts            # 网络调试工具
│   │   ├── console.ts            # 控制台工具
│   │   ├── emulation.ts          # 模拟工具
│   │   ├── screenshot.ts         # 截图工具
│   │   ├── script.ts             # 脚本执行工具
│   │   ├── memory.ts             # 内存分析工具
│   │   └── extensions.ts         # 扩展管理工具
│   ├── devtools/                 # DevTools 前端集成
│   ├── trace-processing/         # 性能追踪处理
│   ├── formatters/               # 输出格式化器
│   ├── telemetry/                # 遥测/使用统计
│   ├── third_party/              # 第三方依赖封装
│   └── utils/                    # 工具函数
├── docs/                         # 文档
│   ├── tool-reference.md         # 工具参考
│   ├── design-principles.md      # 设计原则
│   ├── troubleshooting.md        # 故障排除
│   └── cli.md                    # CLI 文档
├── skills/                       # Agent Skills（指导 Agent 使用工具）
├── scripts/                      # 构建/测试脚本
├── tests/                        # 测试
├── .claude-plugin/               # Claude Code 插件配置
├── .cursor-plugin/               # Cursor 插件配置
├── .gemini/                      # Gemini 扩展配置
└── package.json                  # 项目配置

4.2 核心模块介绍

模块	职责	大小
`index.ts`	主入口，`createMcpServer()` 函数：创建 MCP Server、注册工具、管理浏览器生命周期	—
`McpContext.ts`	核心上下文，管理浏览器实例、页面列表、DevTools 集成、路径验证、roots 管理	~31KB
`McpPage.ts`	页面封装，提供对话框处理、事件等待、action 结果等待等页面级操作	~12KB
`McpResponse.ts`	响应构建器，将工具执行结果格式化为 MCP 兼容的文本/结构化响应	~47KB
`ToolHandler.ts`	工具处理器，负责工具注册、参数验证、mutex 锁、遥测记录、错误处理	~9KB
`TextSnapshot.ts`	基于 accessibility tree 的页面文本快照生成	~10KB
`HeapSnapshotManager.ts`	堆快照管理，支持内存分析、类节点查询、retaining paths 等	~11KB
`PageCollector.ts`	页面数据收集，包括网络请求、控制台消息、性能问题等	~11KB
`browser.ts`	浏览器启动/连接逻辑，支持无头模式、channel 选择、CDP 连接等	—

4.3 工具分类（44+ 个工具，11 个类别）

类别	工具示例	用途
页面导航	`navigate_page`、`new_page`、`close_page`、`list_pages`	管理浏览器标签页
输入自动化	`click`、`fill`、`press_key`、`drag`、`hover`	模拟用户交互
可访问性快照	`take_snapshot`、`wait_for`	获取页面结构供 Agent 理解
性能分析	`performance_start_trace`、`performance_stop_trace`、`performance_analyze_insight`	录制并分析 Core Web Vitals
网络调试	`list_network_requests`、`get_network_request`	查看网络请求/响应详情
控制台调试	`list_console_messages`、`get_console_message`	获取 JS 错误和日志
内存分析	`take_heap_snapshot`、`query_heap_snapshot_nodes`、`compare_heap_snapshots`	堆快照、类节点查询、差异对比
模拟	`emulate`、`set_geolocation`、`set_device_metrics_override`	设备/网络/地理模拟
截图	`take_screenshot`、`take_screenshot_of_element`	页面和元素截图
脚本执行	`evaluate_script`	在页面中执行 JavaScript
扩展管理	`install_extension`、`uninstall_extension`、`reload_extension`	Chrome 扩展生命周期管理

4.4 核心代码解析

4.4.1 MCP Server 创建与工具注册（`src/index.ts`）

export async function createMcpServer(
  serverArgs: ReturnType<typeof parseArguments>,
  options: { logFile?: fs.WriteStream },
) {
  // 初始化 MCP Server
  const server = new McpServer(
    {
      name: 'chrome_devtools',
      title: 'Chrome DevTools MCP server',
      version: VERSION,
    },
    { capabilities: { logging: {} } },
  );

  // 浏览器连接/启动逻辑
  async function getContext(): Promise<McpContext> {
    const browser = serverArgs.browserUrl || serverArgs.wsEndpoint || serverArgs.autoConnect
      ? await ensureBrowserConnected({ /* 连接已有浏览器 */ })
      : await ensureBrowserLaunched({   /* 启动新浏览器 */
          headless: serverArgs.headless,
          executablePath: serverArgs.executablePath,
          channel: serverArgs.channel as Channel,
          isolated: serverArgs.isolated ?? false,
        });
    if (context?.browser !== browser) {
      context = await McpContext.from(browser, logger, { /* ... */ });
    }
    return context;
  }

  // 工具注册
  function registerTool(tool: ToolDefinition | DefinedPageTool): void {
    const toolHandler = new ToolHandler(tool, serverArgs, getContext, toolMutex);
    if (!toolHandler.shouldRegister) return;
    server.registerTool(
      tool.name,
      {
        description: tool.description,
        inputSchema: toolHandler.registeredInputSchema,
        annotations: tool.annotations,
      },
      async (params): Promise<CallToolResult> => {
        return await toolHandler.handle(params);
      },
    );
  }

  // 批量注册所有工具
  const tools = createTools(serverArgs);
  for (const tool of tools) {
    registerTool(tool);
  }
  return { server };
}

关键设计：支持两种浏览器模式——连接已有浏览器（--browserUrl/--wsEndpoint）或自动启动新浏览器。通过 createTools(serverArgs) 工厂函数根据参数（如 --slim、--categoryExtensions 等）动态生成工具列表。每个工具注册时通过 ToolHandler 统一管理参数验证、mutex 锁、遥测记录 [6]。

4.4.2 ToolHandler 工具处理核心（`src/ToolHandler.ts`）

export class ToolHandler {
  readonly inputSchema: zod.ZodRawShape;
  readonly registeredInputSchema: zod.ZodTypeAny;
  readonly shouldRegister: boolean;
  private readonly disabledReason?: string;

  constructor(
    private readonly tool: ToolDefinition | DefinedPageTool,
    private readonly serverArgs: ReturnType<typeof parseArguments>,
    private readonly getContext: () => Promise<McpContext>,
    private readonly toolMutex: Mutex,
  ) {
    const { disabled, reason } = getToolStatusInfo(tool, serverArgs);
    this.disabledReason = reason;
    this.shouldRegister = !(disabled && !serverArgs.viaCli);
    // pageId 路由：为 page-scoped 工具自动注入 pageId 参数
    this.inputSchema = 'pageScoped' in tool && tool.pageScoped &&
      serverArgs.experimentalPageIdRouting && !serverArgs.slim
        ? { ...pageIdSchema, ...tool.schema }
        : tool.schema;
    this.registeredInputSchema = zod.object(this.inputSchema).passthrough();
  }

  async handle(params: Record<string, unknown>): Promise<CallToolResult> {
    // 1. 检查工具是否被禁用
    if (this.disabledReason) { /* 返回错误 */ }

    // 2. 检查未知参数
    const unknownArgumentNames = this.unknownArgumentNames(params);
    if (unknownArgumentNames.length) { /* 返回友好错误提示 */ }

    // 3. 获取互斥锁（保证工具串行执行）
    const guard = await this.toolMutex.acquire();

    try {
      const context = await this.getContext();
      await context.detectOpenDevToolsWindows();

      // 4. 选择响应模式（Slim vs Full）
      const response = this.serverArgs.slim
        ? new SlimMcpResponse(this.serverArgs)
        : new McpResponse(this.serverArgs);

      // 5. 执行工具逻辑
      if (isPageScopedTool(this.tool)) {
        const page = /* 根据 pageId 选择页面 */;
        response.setPage(page);
        if (this.tool.blockedByDialog) {
          page.throwIfDialogOpen();  // 对话框打开时主动拒绝操作
        }
        await this.tool.handler({ params, page }, response, context);
      } else {
        await this.tool.handler({ params }, response, context);
      }

      // 6. 构建响应
      const { content, structuredContent } = await response.handle(/* ... */);
      return { content, isError: !!response.error };
    } finally {
      // 7. 记录遥测
      ClearcutLogger.get()?.logToolInvocation({ /* ... */ });
      guard.dispose();
    }
  }
}

关键设计 [7]：

Mutex 互斥锁：确保同一时间只有一个工具在执行，避免竞态条件
pageId 路由：通过 experimentalPageIdRouting 支持多 Agent 并行操作不同页面
对话框检测：blockedByDialog 标记的工具在对话框打开时主动拒绝，返回友好错误
未知参数检测：当 Agent 传入不存在的参数时，返回精确的错误提示（列出已知参数）
遥测：每次工具调用后记录工具名、参数、成功/失败、延迟等指标

4.4.3 浏览器启动与连接管理（`src/browser.ts`）

// 两种浏览器模式：

// 模式 1：连接已有浏览器实例
async function ensureBrowserConnected(options: {
  browserUrl?: string;
  wsEndpoint?: string;
  wsHeaders?: Record<string, string>;
}): Promise<Browser> {
  if (options.browserUrl) {
    // 通过 HTTP 获取 WebSocket 端点
    const { webSocketDebuggerUrl } = await fetch(
      `${options.browserUrl}/json/version`
    ).then(r => r.json());
    return puppeteer.connect({
      browserWSEndpoint: webSocketDebuggerUrl,
      headers: options.wsHeaders,
    });
  }
  return puppeteer.connect({
    browserWSEndpoint: options.wsEndpoint,
    headers: options.wsHeaders,
  });
}

// 模式 2：自动启动新浏览器
async function ensureBrowserLaunched(options: {
  headless: boolean;
  executablePath?: string;
  channel?: Channel;
  isolated: boolean;
  // ...
}): Promise<Browser> {
  return puppeteer.launch({
    headless: options.headless,
    executablePath: options.executablePath,
    channel: options.channel,
    args: [
      ...(options.isolated ? [`--user-data-dir=${tmpDir}`] : []),
      '--remote-debugging-port=0',  // 随机端口避免冲突
      // ...
    ],
  });
}

关键设计：支持两种部署模式——连接用户正在使用的浏览器（保留登录态、扩展等）或启动全新隔离的浏览器实例（适合 CI/CD 和自动化测试）。隔离模式使用临时 user-data-dir，session 结束后自动清理。

4.4.4 文本快照生成（`src/TextSnapshot.ts`）

// 基于 accessibility tree 的页面文本快照
// 不是原始 DOM，而是结构化文本，每个可交互元素带唯一 ref ID

// 快照示例：
// [1] Heading "Welcome to RomM"
// [2] Button "Login"
// [3] Textbox placeholder="Username"
// [4] Textbox type="password" placeholder="Password"
// [5] Link "Register"

// Agent 调用 click(ref=2) 即可点击 Login 按钮
// 相比传统 CSS selector 或 XPath，这种方式对 LLM 更友好

关键设计：基于 accessibility tree 而非原始 DOM 生成快照，天然过滤了不可见元素和装饰性节点。每个可交互元素带数字 ref ID，Agent 只需返回数字即可精确定位，大幅降低 LLM 生成 selector 的出错概率。

五、项目应用与评价

5.1 应用场景

场景	说明
AI 驱动的 E2E 测试	Agent 自动执行测试流程，遇到失败时自检 console、自检 network、自检 memory，自己给出失败原因，形成闭环诊断 [2]
前端性能优化	Agent 录制性能 trace，获取 LCP/INP/CLS 等 Core Web Vitals 指标，结合 CrUX 真实用户数据，给出优化建议 [2]
Web 调试与故障排查	Agent 自动检查控制台错误（含 source-mapped 堆栈）、分析网络请求（含请求/响应体）、定位 JavaScript 运行时错误 [2]
内存泄漏检测	Agent 拍摄堆快照、按类筛选节点、对比两个快照差异、追踪 retaining paths，定位 Detached DOM 节点和意外闭包引用 [2]
可访问性审计	结合 Lighthouse 审计和 accessibility tree 快照，检测并修复可访问性问题 [3]
Chrome 扩展开发与调试	安装/卸载/重载扩展、触发扩展 Action、查看 Service Worker 日志 [3]
网页内容抓取与分析	Agent 导航页面、获取文本快照、执行 JavaScript 提取数据、截图保存 [2]
CI/CD 流水线集成	无头模式 + 隔离的临时 user data dir，每个 session 结束后自动清理 [2]

5.2 项目优点

官方背书与生态整合：由 Google Chrome 团队维护，与 Chrome DevTools、CrUX、Lighthouse 深度集成，数据权威性无可替代。
Agent 优先设计：工具粒度、Token 优化、错误自愈、渐进复杂度等设计原则，均围绕 Agent 的实际工作方式设计，而非传统开发者视角。
调试+自动化一体化：将传统分离的自动化操作和诊断调试统一在同一个 MCP server 中，Agent 可自主完成诊断闭环。
多客户端支持：支持 20+ 种 MCP 客户端（Claude Code、Cursor、Copilot、Gemini CLI、JetBrains、Windsurf 等），配置方式统一。
Slim 模式：轻量场景下仅暴露 3 个工具（navigate_page、evaluate_script、take_screenshot），避免 token 浪费。
多 Agent 并行：通过 pageId 路由支持多个 Agent 同时操作不同页面，适合复杂并行工作流。
活跃迭代：903 次提交，57 个版本，从 v0.1.0 到 v1.5.0 仅用 10 个月，功能快速丰富。
Apache-2.0 协议：商业友好，无 copyleft 限制。

5.3 项目不足

仅支持 Chrome：不支持 Firefox、Safari/WebKit 等其他浏览器，跨浏览器测试场景受限。
Node.js 技术栈锁定：仅支持 TypeScript/Node.js 环境，Python 等生态的 Agent 需通过子进程调用，增加复杂度。
无头模式功能受限：部分 DevTools 功能（如 screencast 录制）在无头模式下可能受限或不可用。
隐私数据收集：默认开启使用统计（含工具调用成功率、延迟、环境信息），需手动 --no-usage-statistics 关闭。Performance 工具默认向 CrUX API 发送 trace URL [1]。
Token 消耗：全量 44+ 工具注册到 MCP 客户端后，tool list 会占用 Agent 的 context window。Slim 模式可缓解但功能受限。
远程调试配置门槛：连接已有浏览器实例需要手动开启 Chrome 的 remote debugging 端口（--remote-debugging-port=9222），对非技术用户有门槛。
实验性功能稳定性：部分功能标记为 experimental（如 click_at、pageId 路由、TOON 格式、WebMCP 等），API 可能变动。
Chrome 版本依赖：需要当前稳定版或更新的 Chrome，企业环境中受限于 IT 策略的旧版本 Chrome 可能不兼容。

参考来源

posted @ 2026-07-06 23:36 zhang-yd 阅读(46) 评论(0) 收藏举报

刷新页面返回顶部

zhang-yd

专注技术，追求极致

今日开源[第30期]Chrome DevTools MCP

Chrome DevTools MCP 项目分析报告

一、项目介绍

1.1 项目概述

1.2 项目信息

1.3 项目示意图

二、项目亮点

2.1 官方 DevTools 深度集成

2.2 Token-Optimized 设计原则

2.3 CrUX 真实用户数据集成

2.4 Agent 感知-决策-执行闭环

2.5 渐进复杂度（Progressive Complexity）

2.6 多 Agent 并行支持

2.7 7 条设计原则

2.8 与同类项目的差异化优势

三、项目运行环境

3.1 硬件要求

3.2 操作系统支持

3.3 软件依赖

3.4 安装步骤

四、项目代码介绍

4.1 代码架构图

4.2 核心模块介绍

4.3 工具分类（44+ 个工具，11 个类别）

4.4 核心代码解析

4.4.1 MCP Server 创建与工具注册（`src/index.ts`）

4.4.2 ToolHandler 工具处理核心（`src/ToolHandler.ts`）

4.4.3 浏览器启动与连接管理（`src/browser.ts`）

4.4.4 文本快照生成（`src/TextSnapshot.ts`）

五、项目应用与评价

5.1 应用场景

5.2 项目优点

5.3 项目不足

参考来源

公告

zhang-yd

专注技术，追求极致

今日开源[第30期]Chrome DevTools MCP

Chrome DevTools MCP 项目分析报告

一、项目介绍

1.1 项目概述

1.2 项目信息

1.3 项目示意图

二、项目亮点

2.1 官方 DevTools 深度集成

2.2 Token-Optimized 设计原则

2.3 CrUX 真实用户数据集成

2.4 Agent 感知-决策-执行闭环

2.5 渐进复杂度（Progressive Complexity）

2.6 多 Agent 并行支持

2.7 7 条设计原则

2.8 与同类项目的差异化优势

三、项目运行环境

3.1 硬件要求

3.2 操作系统支持

3.3 软件依赖

3.4 安装步骤

四、项目代码介绍

4.1 代码架构图

4.2 核心模块介绍

4.3 工具分类（44+ 个工具，11 个类别）

4.4 核心代码解析

4.4.1 MCP Server 创建与工具注册（src/index.ts）

4.4.2 ToolHandler 工具处理核心（src/ToolHandler.ts）

4.4.3 浏览器启动与连接管理（src/browser.ts）

4.4.4 文本快照生成（src/TextSnapshot.ts）

五、项目应用与评价

5.1 应用场景

5.2 项目优点

5.3 项目不足

参考来源

公告

4.4.1 MCP Server 创建与工具注册（`src/index.ts`）

4.4.2 ToolHandler 工具处理核心（`src/ToolHandler.ts`）

4.4.3 浏览器启动与连接管理（`src/browser.ts`）

4.4.4 文本快照生成（`src/TextSnapshot.ts`）