Webtools MCP Server

Name: Webtools MCP Server
Author: misterboe

本地服务

github.com/misterboe开发工具061 周前更新

代码仓库

关于 Webtools MCP Server

Webtools MCP Server 为 MCP 客户端提供网页提取、截图、调试与性能分析能力，适合需要检查网站内容和质量的开发者。工具可按预设或名称筛选，以控制加载范围。

主要功能

01提取 HTML 并转换为 Markdown
02网页全页及元素截图
03采集控制台、网络与错误信息
04Lighthouse 性能、无障碍和 SEO 审计
05分析 Web Vitals、覆盖率与网络
06按预设筛选可用工具

适用场景

01提取网页正文供 Agent 阅读
02检查页面布局并保存截图
03定位控制台或网络请求错误
04比较设备与网络条件下的性能

MCP 相关

作为 MCP 服务，它向客户端暴露网页读取、截图、调试、审计和性能分析工具，也提供用于网站分析、内容提取及截图的提示词。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置

{
  "mcpServers": {
    "webtools": {
      "command": "npx",
      "args": [
        "-y",
        "@bschauer/webtools-mcp-server"
      ]
    }
  }
}

启动命令npx -y @bschauer/webtools-mcp-server

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包

npm@bschauer/webtools-mcp-serverstdio

工具

收录的工具列表 · 更新于 3 周前

参数	类型	必填	说明
url	string	是	要获取的网页 URL
useJavaScript	boolean	否	是否执行 JavaScript（需要 Puppeteer）
useProxy	boolean	否	是否为此请求使用代理
ignoreSSLErrors	boolean	否	是否忽略 SSL 证书错误（默认为 true，便于开发）

详细介绍

Webtools MCP Server

⚠️ 重要免责声明：本软件是在 AI 技术的辅助下开发的。本软件按「现状」提供，未经全面测试和验证，切勿用于生产环境。代码可能包含错误、安全漏洞或意外行为。仅可将本软件用于研究、学习或开发，并自行承担风险。

一个 Model Context Protocol 服务，提供全面的网页分析工具，包括 HTML 提取、Markdown 转换、截图、调试控制台、高级性能分析，以及由 Lighthouse 驱动的网页审计，涵盖性能、无障碍访问、SEO 等方面。

前置条件

Node.js：版本 14 或更高
Chrome/Chromium：由 Puppeteer 自动提供
- 服务将使用 Puppeteer 附带的 Chrome
- 无需单独安装 Chrome

功能

核心工具

webtool_gethtml：提取原始 HTML 内容
- 支持 JavaScript 渲染
- 支持代理
- 自动重试
webtool_readpage：转换为 Markdown
- 提取干净的内容
- 保留链接
- 处理图像
- 支持自定义选择器
webtool_screenshot：截取屏幕截图
- 整页截图
- 指定元素截图
- 设备模拟
- 自定义视口设置
webtool_debug：调试控制台
- 捕获控制台输出
- 监控网络请求
- 跟踪错误
- 性能指标
- 检测布局抖动
webtool_lighthouse：全面的网页审计
- 性能分析
- 无障碍访问测试
- SEO 评估
- 最佳实践审查
- 渐进式 Web 应用评估
- 支持设备模拟

性能分析工具

webtool_performance_trace：高级性能分析
- 检测布局抖动
- 分析 CSS 变量的影响
- JavaScript 执行时间线及布局关联分析
- 长任务细分与归因
- 分析内存和 DOM 大小
- 优化资源加载
webtool_network_monitor：网络活动分析
- 详细分析请求和响应
- 资源计时信息
- 瀑布图可视化数据
- 优化建议
- 第三方请求分析
- 缓存分析
webtool_coverage_analysis：代码覆盖率分析
- 分析 JavaScript 和 CSS 覆盖率
- 识别未使用的代码
- 代码拆分建议
- 第三方代码分析
webtool_web_vitals：核心网页指标分析
- LCP（最大内容绘制）分析
- CLS（累积布局偏移）分析
- FID/INP（首次输入延迟/交互到下一次绘制）分析
- TTFB（首字节时间）分析
- 针对特定元素的分析
webtool_performance_test：跨设备和网络测试
- 多设备测试
- 模拟网络条件
- 比较分析
- 基线比较
- 设备专属建议

MCP 提示词

analyze-website：全面的网站分析
- 分析性能、无障碍访问、SEO 和用户体验
- 选择设备类型（移动设备/桌面设备）
- 提供针对设备类型的详细建议
- 提供包含可执行见解的完整分析报告
get-website-content：提取内容
- 从任意网页提取主要内容
- 转换为干净的 Markdown
- 移除导航、广告和非必要元素
- 保留重要的格式和结构
screenshot-website：截取屏幕截图
- 以视觉形式呈现网页
- 整页截图
- 基于 URL 的简易界面
technical-performance-analysis：技术性能分析
- 详细分析性能瓶颈
- 提供代码示例和优化建议
- 选择关注领域（JavaScript、渲染、资源、网络）
- 提供带严重程度评估的性能指标
- 提供可执行的代码级建议

安装

你可以全局安装此软件包：

npm install -g @bschauer/webtools-mcp-server

也可以使用 npx 直接运行：

npx @bschauer/webtools-mcp-server

快速开始

Claude Desktop 用户

{
  "mcpServers": {
    "webtools": {
      "command": "npx",
      "args": ["-y", "@bschauer/webtools-mcp-server@latest"],
      "env": {
        "ENABLED_TOOLS": "BASIC"
      }
    }
  }
}

此配置仅使用基本工具，可减少 89% 的令牌用量。

Claude Code 用户

# Install with token optimization
claude mcp add webtools-basic --env ENABLED_TOOLS=BASIC -- npx -y @bschauer/webtools-mcp-server@latest

测试安装

配置完成后，你可以向 Claude 提出以下请求：

“请从 https://example.com 提取主要内容”
“截取 https://google.com 的屏幕截图”
“分析 https://news.ycombinator.com 的性能”

优化令牌用量

默认情况下会加载所有工具（约 10.3k 个令牌）。你可以只启用所需工具，以减少令牌用量：

配置选项

环境变量：ENABLED_TOOLS=<preset|tools>
CLI 参数：--tools=<preset|tools>

可用预设

预设	包含的工具	令牌用量	减少比例	使用场景
`ALL`	全部 10 个工具	~10.3k 个令牌	0%	完整功能（默认）
`BASIC`	`gethtml`, `readpage`	~1k 个令牌	89%	仅提取内容
`WEB`	`gethtml`, `readpage`, `screenshot`	~1.5k 个令牌	85%	网页内容 + 视觉内容
`DEBUG`	`gethtml`, `readpage`, `screenshot`, `debug`	~2.5k 个令牌	76%	内容 + 调试
`PERFORMANCE`	所有性能分析工具	~6k 个令牌	42%	仅进行性能测试
`FULL_ANALYSIS`	除性能测试框架外的所有工具	~9k 个令牌	13%	完整分析套件

可用的单项工具：

webtool_gethtml - 提取原始 HTML
webtool_readpage - 转换为 Markdown
webtool_screenshot - 截取屏幕截图
webtool_debug - 调试控制台 + 网络监控
webtool_lighthouse - Lighthouse 审核
webtool_performance_trace - 性能跟踪
webtool_coverage_analysis - 代码覆盖率分析
webtool_web_vitals - Core Web Vitals 指标
webtool_network_monitor - 网络活动分析
webtool_performance_test - 跨设备性能测试

示例

# Use only basic tools (90% token reduction)
ENABLED_TOOLS=BASIC npx @bschauer/webtools-mcp-server

# Use performance tools only
npx @bschauer/webtools-mcp-server --tools=PERFORMANCE

# Use web + debugging tools
ENABLED_TOOLS=DEBUG npx @bschauer/webtools-mcp-server

# Use specific individual tools
npx @bschauer/webtools-mcp-server --tools=webtool_gethtml,webtool_readpage,webtool_screenshot

# Show all available options
npx @bschauer/webtools-mcp-server --help

# Use environment variable with any command
export ENABLED_TOOLS=WEB
npx @bschauer/webtools-mcp-server

Claude Desktop 集成

基本配置（全部工具）

{
  "mcpServers": {
    "webtools": {
      "command": "npx",
      "args": ["-y", "@bschauer/webtools-mcp-server@latest"]
    }
  }
}

令牌优化配置

仅使用基本工具（减少 89% 令牌用量）

{
  "mcpServers": {
    "webtools-basic": {
      "command": "npx",
      "args": ["-y", "@bschauer/webtools-mcp-server@latest"],
      "env": {
        "ENABLED_TOOLS": "BASIC"
      }
    }
  }
}

网页内容 + 屏幕截图

{
  "mcpServers": {
    "webtools-web": {
      "command": "npx",
      "args": ["-y", "@bschauer/webtools-mcp-server@latest"],
      "env": {
        "ENABLED_TOOLS": "WEB"
      }
    }
  }
}

仅进行性能分析

{
  "mcpServers": {
    "webtools-perf": {
      "command": "npx",
      "args": ["-y", "@bschauer/webtools-mcp-server@latest"],
      "env": {
        "ENABLED_TOOLS": "PERFORMANCE"
      }
    }
  }
}

自定义工具选择

{
  "mcpServers": {
    "webtools-custom": {
      "command": "npx",
      "args": ["-y", "@bschauer/webtools-mcp-server@latest"],
      "env": {
        "ENABLED_TOOLS": "webtool_gethtml,webtool_readpage,webtool_screenshot,webtool_debug"
      }
    }
  }
}

使用 CLI 参数（替代方式）

{
  "mcpServers": {
    "webtools": {
      "command": "npx",
      "args": ["-y", "@bschauer/webtools-mcp-server@latest", "--tools=BASIC"]
    }
  }
}

Claude Code 集成

Claude Code 提供了简化的命令行界面，用于添加 MCP 服务：

基本安装（全部工具）

# Install with all tools (default)
claude mcp add webtools -- npx -y @bschauer/webtools-mcp-server@latest

令牌优化安装

# Basic tools only (89% token reduction)
claude mcp add webtools-basic --env ENABLED_TOOLS=BASIC -- npx -y @bschauer/webtools-mcp-server@latest

# Web content + screenshots
claude mcp add webtools-web --env ENABLED_TOOLS=WEB -- npx -y @bschauer/webtools-mcp-server@latest

# Performance analysis only
claude mcp add webtools-perf --env ENABLED_TOOLS=PERFORMANCE -- npx -y @bschauer/webtools-mcp-server@latest

# Debug tools
claude mcp add webtools-debug --env ENABLED_TOOLS=DEBUG -- npx -y @bschauer/webtools-mcp-server@latest

# Custom tool selection
claude mcp add webtools-custom --env ENABLED_TOOLS=webtool_gethtml,webtool_readpage,webtool_screenshot -- npx -y @bschauer/webtools-mcp-server@latest

使用 CLI 参数（替代方式）

# Using --tools parameter instead of environment variable
claude mcp add webtools-basic -- npx -y @bschauer/webtools-mcp-server@latest --tools=BASIC
claude mcp add webtools-perf -- npx -y @bschauer/webtools-mcp-server@latest --tools=PERFORMANCE

管理安装

# List all MCP servers
claude mcp list

# Get details about the webtools server
claude mcp get webtools-basic

# Remove a server
claude mcp remove webtools-basic

# Check server status in Claude Code
/mcp

项目范围的安装（团队共享）

# Install for the entire project team
claude mcp add webtools-basic --scope project --env ENABLED_TOOLS=BASIC -- npx -y @bschauer/webtools-mcp-server@latest

# This creates a .mcp.json file in your project root that can be committed to version control

配置

在 ~/.mcp/webtools-mcp-server.config.json 创建配置文件：

{
  "proxy": {
    "enabled": false,
    "url": "http://your-proxy-server:port",
    "timeout": 10000
  },
  "browser": {
    "ignoreSSLErrors": false,
    "defaultViewport": {
      "width": 1920,
      "height": 1080
    }
  },
  "devices": {
    "mobile": {
      "width": 375,
      "height": 812,
      "deviceScaleFactor": 3,
      "isMobile": true,
      "hasTouch": true,
      "isLandscape": false,
      "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1"
    },
    "tablet": {
      "width": 768,
      "height": 1024,
      "deviceScaleFactor": 2,
      "isMobile": true,
      "hasTouch": true,
      "isLandscape": false,
      "userAgent": "Mozilla/5.0 (iPad; CPU OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1"
    },
    "desktop": {
      "width": 1920,
      "height": 1080,
      "deviceScaleFactor": 1,
      "isMobile": false,
      "hasTouch": false,
      "isLandscape": true,
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36"
    }
  },
  "networkConditions": {
    "Slow 3G": {
      "downloadThroughput": 500000,
      "uploadThroughput": 300000,
      "latency": 400
    },
    "Fast 3G": {
      "downloadThroughput": 1500000,
      "uploadThroughput": 750000,
      "latency": 300
    },
    "4G": {
      "downloadThroughput": 4000000,
      "uploadThroughput": 2000000,
      "latency": 100
    },
    "WiFi": {
      "downloadThroughput": 10000000,
      "uploadThroughput": 5000000,
      "latency": 20
    },
    "Fiber": {
      "downloadThroughput": 100000000,
      "uploadThroughput": 50000000,
      "latency": 5
    }
  }
}

环境变量

你也可以使用环境变量配置服务：

USE_PROXY：启用代理支持（true/false）
PROXY_URL：代理服务 URL
PROXY_TIMEOUT：代理超时时间（毫秒）
IGNORE_SSL_ERRORS：默认对所有工具忽略 SSL 证书错误（true/false）——适用于 DDEV 等开发环境

工具使用示例

HTML 内容提取

webtool_gethtml({
  url: "https://example.com",
  useJavaScript: true,
  useProxy: false,
  ignoreSSLErrors: false,
});

页面读取（转换为 Markdown）

webtool_readpage({
  url: "https://example.com",
  useJavaScript: true,
  useProxy: false,
  selector: "main",
  ignoreSSLErrors: false,
});

截取屏幕截图

webtool_screenshot({
  url: "https://example.com",
  selector: ".content",
  useProxy: false,
  deviceConfig: {
    width: 1920,
    height: 1080,
    deviceScaleFactor: 1,
    isMobile: false,
  },
});

调试控制台

webtool_debug({
  url: "https://example.com",
  captureConsole: true,
  captureNetwork: true,
  captureErrors: true,
  captureLayoutThrashing: true, // Enable layout thrashing detection
  timeoutMs: 15000,
});

// 重点检测布局抖动

webtool_debug({
  url: "https://example.com",
  captureConsole: false,
  captureNetwork: false,
  captureErrors: true,
  captureLayoutThrashing: true,
  timeoutMs: 15000,
});

Lighthouse 网页审核

webtool_lighthouse({
  url: "https://example.com",
  categories: ["performance", "accessibility", "best-practices", "seo", "pwa"],
  device: "mobile", // or "desktop"
  ignoreSSLErrors: false,
});

// 仅运行指定类别的审核

webtool_lighthouse({
  url: "https://example.com",
  categories: ["performance", "seo"], // Only performance and SEO
  device: "desktop",
});

高级性能分析

webtool_performance_trace({
  url: "https://example.com",
  timeoutMs: 15000,
  captureCPUProfile: true,
  captureNetworkActivity: true,
  captureJSProfile: true,
  captureRenderingPerformance: true,
  captureMemoryProfile: true,
  deviceConfig: {
    width: 1920,
    height: 1080,
    deviceScaleFactor: 1,
    isMobile: false,
  },
});

// 重点分析特定性能方面

webtool_performance_trace({
  url: "https://example.com",
  captureRenderingPerformance: true, // Focus on layout and rendering
  captureMemoryProfile: true, // Include memory analysis
  deviceConfig: {
    width: 375,
    height: 812,
    deviceScaleFactor: 3,
    isMobile: true,
  },
});

网络活动分析

webtool_network_monitor({
  url: "https://example.com",
  timeoutMs: 15000,
  waitAfterLoadMs: 2000,
  includeThirdParty: true,
  disableCache: true,
  captureHeaders: true,
  captureTimings: true,
  deviceName: "mobile", // Use predefined device
  networkConditionName: "4G", // Use predefined network condition
});

代码覆盖率分析

webtool_coverage_analysis({
  url: "https://example.com",
  timeoutMs: 15000,
  waitAfterLoadMs: 2000,
  includeThirdParty: true,
  disableCache: true,
  deviceName: "desktop",
});

Core Web Vitals 分析

webtool_web_vitals({
  url: "https://example.com",
  timeoutMs: 15000,
  waitAfterLoadMs: 3000,
  interactWithPage: true,
  deviceName: "mobile",
  networkConditionName: "4G",
});

跨设备和网络测试

webtool_performance_test({
  url: "https://example.com",
  timeoutMs: 30000,
  devices: ["desktop", "mobile", "tablet"],
  networkConditions: ["WiFi", "4G", "3G"],
  tests: ["web_vitals", "network", "coverage"],
  compareResults: true,
  baselineDevice: "desktop",
  baselineNetwork: "WiFi",
  includeScreenshots: true,
});

响应格式

所有工具均按以下格式返回响应：

{
  "content": [
    {
      "type": "text",
      "text": "..." // Markdown formatted report
    }
  ]
}

屏幕截图的响应：

{
  "content": [
    {
      "type": "image",
      "data": "...", // Base64 encoded PNG
      "mimeType": "image/png"
    }
  ]
}

Lighthouse 审核的响应：

{
  "content": [
    {
      "type": "text",
      "text": "..." // Markdown formatted report with audit results
    }
  ]
}

最佳实践

使用高级分析前，先进行基本的 HTML 获取
仅在必要时使用 JavaScript 渲染（速度较慢，但内容更完整）
为复杂页面设置适当的超时时间
尽可能使用选择器定位特定的页面区域
仅在需要访问受地理位置限制的内容时启用代理支持
对于 Lighthouse 审计，仅指定需要改进性能的类别
仔细检查错误信息——其中通常包含有用的故障排除提示
使用设备模拟时，匹配真实设备规格，以获得准确结果
对于大型网站，重点关注特定页面，而非整个网站
应用修复前，使用调试工具了解 JavaScript 错误
进行性能测试时，从基准设备和网络条件开始
比较不同设备和网络条件下的结果，以识别特定设备的问题
使用性能测试框架，找出特定场景下的优化机会
重点关注 Core Web Vitals 指标，以最大程度改善用户体验
使用代码覆盖率分析找出未使用的代码并优化打包体积

故障排除

常见问题及解决方案：

Chrome 安装

注意：现在会通过 Puppeteer 自动安装 Chrome——无需额外步骤
如果遇到任何与 Chrome 相关的问题，请尝试使用 npm install -g @bschauer/webtools-mcp-server 重新安装软件包

连接问题

问题：无法连接到网站
解决方案：检查 URL 格式和网站是否可用，或尝试启用代理

SSL 证书问题

问题：使用 DDEV 或本地开发网站时出现 SSL 证书错误
解决方案：设置 IGNORE_SSL_ERRORS=true 环境变量，或为单个工具使用 ignoreSSLErrors=true 参数
注意：对于生产网站，应确保正确配置 SSL 证书，而不是绕过 SSL 检查

JavaScript 渲染问题

问题：使用 JavaScript 渲染时页面内容缺失
解决方案：延长超时时间，并检查调试输出中是否有导航错误

截图问题

问题：截图空白或不完整
解决方案：确保选择器正确，增大视口尺寸，并检查调试控制台

Lighthouse 审计超时

问题：Lighthouse 审计超时
解决方案：延长超时时间，减少类别，或尝试使用更快的连接

代理连接失败

问题：无法通过代理连接
解决方案：验证代理 URL，检查代理连接超时时间，并确保代理正常运行

布局抖动检测问题

问题：未检测到布局抖动事件
解决方案：确保将 captureLayoutThrashing 设为 true，增大 timeoutMs，或尝试不同的页面

性能测试框架问题

问题：性能测试框架超时
解决方案：减少设备和网络条件的数量，延长超时时间，或逐项运行测试

网络监控问题

问题：网络监控器显示的数据不完整
解决方案：增大 waitAfterLoadMs，确保将 captureTimings 设为 true，并检查是否存在 CORS 问题

代码覆盖率分析问题

问题：代码覆盖率分析没有显示结果
解决方案：确保页面加载 JavaScript，增大 waitAfterLoadMs，并检查脚本加载错误

安全注意事项

此工具可以访问任意网站，请负责任地使用
代理功能应谨慎使用，并遵守适用法律
除非绝对必要，否则应保持启用 SSL 证书检查
网站所有者可能会检测并阻止自动访问
某些网站的服务条款禁止抓取

贡献

欢迎贡献！请随时提交 Pull Request。

许可证

MIT

作者

bschauer

支持 Markdown

登录后评论

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

阅读入门指南

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。

Webtools MCP Server

关于 Webtools MCP Server

主要功能

适用场景

MCP 相关

配置

工具

详细介绍

Webtools MCP Server

前置条件

功能

核心工具

性能分析工具

MCP 提示词

安装

快速开始

Claude Desktop 用户

Claude Code 用户

测试安装

优化令牌用量

配置选项

可用预设

示例

Claude Desktop 集成

基本配置（全部工具）

令牌优化配置

Claude Code 集成

基本安装（全部工具）

令牌优化安装

使用 CLI 参数（替代方式）

管理安装

项目范围的安装（团队共享）

配置

环境变量

工具使用示例

HTML 内容提取

页面读取（转换为 Markdown）

截取屏幕截图

调试控制台

Lighthouse 网页审核

高级性能分析

网络活动分析

代码覆盖率分析

Core Web Vitals 分析

跨设备和网络测试

响应格式

最佳实践

故障排除

Chrome 安装

连接问题

SSL 证书问题

JavaScript 渲染问题

截图问题

Lighthouse 审计超时

代理连接失败

布局抖动检测问题

性能测试框架问题

网络监控问题

代码覆盖率分析问题

安全注意事项

贡献

许可证

作者

评论

第一次接触 MCP？

MCP（Model Context Protocol）是什么？

MCP 服务和客户端有什么区别？

本地服务与远程服务怎么选？

如何在 Claude、Cursor 等客户端中安装服务？

收录的项目经过审核吗？“认证”标识代表什么？

我维护的项目已被收录，怎样认领？