一篇文章学会 MCP Server 前端调试

---

一、MCP 是什么？为什么有用？

MCP（Model Context Protocol）= 模型与外部世界的“插件协议”

它本质不是框架、不是 SDK，而是一种协议——让 AI 能像浏览器一样，通过各种 MCP Server 调用外部能力，例如：

🧩 MCP 常用能力 Server 列表

MCP Server	能力说明
FS Server	读写本地文件系统
DevTools MCP	控制 DevTools、抓取 Console / Network
DB Server	操作数据库
API Server	请求外部 API
…	能力持续扩展

---

二、前置环境准备

1. Node 版本：建议使用 Node 22+
2. 安装 MCP Server（这里用 Chrome DevTools MCP）：

npm install -g chrome-devtools-mcp

3. 启动 Chrome（允许远程调试）：

chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome_devtools

注意：--remote-debugging-port=9222 是 MCP 连接 Chrome 的关键参数。

4. 准备 MCP 配置（现在几乎所有的开发编辑器都支持 MCP： vscode，tare 等）：

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

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--target",
        "ws://127.0.0.1:9222/devtools/browser"
      ],
      "env": {
        "NODE_ENV": "production"
      }
    }
  }
}

三、前端最小可运行 Demo

前端可以通过 WebSocket 调用 MCP Server，实现操作 Chrome DevTools 的能力：

import { ModelContextProtocolClient } from "@modelcontextprotocol/sdk/client";

// 连接 MCP Server WebSocket
const socket = new WebSocket("ws://localhost:3334"); // MCP Socket 地址
const client = new ModelContextProtocolClient({
  transport: {
    send: (msg) => socket.send(JSON.stringify(msg)),
    onmessage: (handler) => {
      socket.onmessage = (e) => handler(JSON.parse(e.data));
    }
  }
});

socket.onopen = async () => {
  console.log("✅ MCP Server 已连接");

  // 查看可用工具
  const list = await client.listTools();
  console.log("🔹 可用工具列表:", list);

  // 调用 DevTools MCP 打开网页
  const result = await client.callTool("chrome-devtools.openTab", {
    url: "https://example.com"
  });
  console.log("🔹 打开网页结果:", result);

  // 抓取 console log
  const logs = await client.callTool("chrome-devtools.getConsoleLogs", {});
  console.log("🔹 Console Logs:", logs);
};

说明：

• chrome-devtools.openTab 会在 Chrome 中打开指定 URL
• getConsoleLogs 可以抓取页面的 console 信息
• MCP Server 自动做指令转发，前端无需直接控制 Chrome

---

四、效果展示

执行上面代码后，你会看到：

1. Chrome 自动打开指定页面

2. Console 日志被 MCP Server 抓取并返回前端

3. 可扩展调用 Network、DOM、Performance 等 DevTools 功能

这个 Demo 就是最小可用实践，方便在前端做 自动化调试、抓取日志、分析网页行为。

---

五、适用场景与延展

• 自动化网页调试和测试

• AI 调试工具链，可与模型联动

• 前端运维、性能监控

• 自动抓取日志、网络请求、页面元素信息

你也可以把 MCP Server 替换成 FS Server / DB Server / API Server，让模型或前端拥有更强能力，比如：

• 文件读写
• 数据库查询
• API 自动化调用

---

六、总结

1. MCP = 模型与工具的统一协议，前端 + DevTools MCP 组合即可落地
2. 前端只需 WebSocket + MCP Client，无需直接控制浏览器
3. 配置简单，Demo 可直接复制运行
4. MCP 体系可扩展，未来可以接入多种 Server

---

以编辑器 Tare 举例

---