Chrome DevTools MCP Server

浏览器调试的下一个突破

MCP (Model Context Protocol) Server 为 Chrome DevTools 带来了前所未有的扩展能力，让开发者工具更加智能和可定制。

MCP

协议标准

智能集成

API

开放接口

核心特性

重新定义浏览器调试体验，让开发更加高效和智能

MCP 协议支持

完全兼容 Model Context Protocol 标准，确保与其他 MCP 工具的无缝集成


                                { "protocol": "mcp", "version": "1.0" }

无缝集成

与现有 Chrome DevTools 工作流程完美融合，无需改变开发习惯

Chrome Extension WebSocket Native Messaging

高度可扩展

支持自定义工具和第三方插件开发，满足特定的调试需求

自定义命令

插件系统

API 扩展

实时协作

支持多人协作调试和知识分享，提升团队开发效率

∞

协作者

0ms

延迟

SSL

加密

技术架构

系统架构图

Chrome DevTools

客户端

• MCP Client Extension

• WebSocket Connection

• UI Components

MCP Server

服务端

• Node.js Runtime

• MCP Protocol Handler

• Plugin System

通信协议

WebSocket JSON-RPC MCP 1.0

技术栈

前端：Chrome Extension API, WebSocket Client
后端：Node.js, Express, WebSocket Server
协议：Model Context Protocol (MCP) 1.0
存储：SQLite, Redis (可选)

安全特性

认证：OAuth 2.0 / JWT Token
加密：WSS / TLS 1.3
权限：Chrome Extension Manifest V3
隔离：Sandbox Execution Environment

示例代码

JavaScript - MCP Server 初始化

const MCPServer = require("@modelcontextprotocol/server");

const server = new MCPServer({
  name: "chrome-devtools-mcp",
  version: "1.0.0",
  capabilities: ["tools", "resources"]
});

// 注册自定义工具
server.registerTool("inspect-element", {
  name: "Inspect Element",
  description: "Inspect DOM element with AI assistance",
  inputSchema: {
    type: "object",
    properties: {
      selector: { type: "string" }
    }
  }
}, async (args) => {
  // 实现元素检查逻辑
  return {
    success: true,
    data: { /* 检查结果 */ }
  };
});

server.start(3000);