项目简介

'Web Developer MCP Server'是一个Model Context Protocol (MCP) 服务器，旨在增强AI编程助手的能力，使其能够直接与Web浏览器进行交互。通过集成Playwright，它允许AI助手实时执行网页导航、检查DOM元素、监控网络请求、捕获控制台输出以及提取HTML内容，从而极大地辅助Web应用的调试、测试和分析。

主要功能点

实时浏览器控制: 借助Playwright，提供一个持久的浏览器会话，让AI助手能够导航和操作网页。
网络请求监控: 捕获并分析HTTP请求和响应，支持按URL和状态码过滤，帮助调试API集成问题。
实时控制台监控: 捕获页面加载和运行时产生的控制台日志、错误和警告，便于排查前端问题。
DOM元素审查: 深入分析网页上的DOM元素，获取样式、位置、可见性和属性等详细信息，辅助UI调试。
HTML内容提取: 提取匹配CSS选择器的元素的原始HTML标记，用于组件测试或渲染分析。

安装步骤

确保您的系统已安装 Bun 运行时（推荐）或 Node.js 环境。

通过npm安装并直接运行服务器（推荐方式）：

npx -y web-developer-mcp

或从源代码安装和启动：

git clone https://github.com/Artmann/web-developer-mcp.git
cd web-developer-mcp
bun install
bun start

服务器配置

您的AI助手（如Claude Code或Cursor）需要配置MCP服务器的启动命令。以下是通用的配置信息示例，您需要将其添加到您的AI助手的MCP配置文件中，或者通过CLI工具添加。

示例配置（JSON格式）:

{
  "web-developer-mcp": {
    "command": "npx",
    "args": [
      "-y",
      "web-developer-mcp"
    ],
    "description": "提供网页开发工具的MCP服务器"
  }
}

'web-developer-mcp': 服务器的唯一名称。
'command': 启动服务器的命令。这里使用'npx'来直接运行npm包，无需全局安装。
'args': 传递给'command'的参数。'-y web-developer-mcp'指示'npx'运行'web-developer-mcp'包。
'description': 服务器的简要描述（可选）。

基本使用方法

一旦服务器配置并启动，您的AI助手就可以调用其提供的工具。以下是一些基本交互示例（您的AI助手会以MCP协议的JSON-RPC格式调用这些工具，无需您手动输入）：

导航到网页: AI助手可以调用 'browser-navigate' 工具，并提供一个 'url' 参数来加载指定网页。例如，导航到本地开发服务器：'{"name": "browser-navigate", "arguments": {"url": "http://localhost:3000"}}'
获取控制台日志: AI助手可以调用 'browser-console' 工具，无需参数，以获取当前页面的所有控制台输出。例如：'{"name": "browser-console", "arguments": {}}'
检查DOM元素: AI助手可以调用 'inspect-elements' 工具，并提供一个CSS 'selector' 参数来获取元素的详细信息。例如，检查带有 '.my-button' 类的按钮：'{"name": "inspect-elements", "arguments": {"selector": ".my-button"}}'
列出网络请求: AI助手可以调用 'network-requests' 工具，可选择传入 'filter' (URL子串) 或 'statusRange' (HTTP状态码范围) 参数来过滤请求。例如，列出所有API请求：'{"name": "network-requests", "arguments": {"filter": "api"}}'

这些工具的输出将作为结构化的JSON-RPC响应返回给您的AI助手，以便其进行后续分析和决策。

关键词

项目简介

主要功能点

安装步骤

服务器配置

基本使用方法

信息