金大哥 - playwright-lighthouse-mcp MCP 详情

article

README

🚀 Playwright-Lighthouse MCP Server

这是一个使用Playwright和Lighthouse分析网站性能的MCP服务器。通过模型上下文协议（MCP），大语言模型（LLMs）可以进行网站性能分析。

🚀 快速开始

✨ 主要特性

使用Lighthouse进行性能分析
截图捕获

📦 安装指南

前置条件

Node.js 18 或更高版本
npm

安装步骤

# 克隆仓库
git clone https://github.com/kbyk004/playwright-lighthouse-mcp.git
cd playwright-lighthouse-mcp

# 安装依赖
npm install
npx playwright install

# 构建项目
npm run build

💻 使用示例

调试MCP服务器

npm run inspector

与MCP客户端集成

此服务器设计用于与支持模型上下文协议（MCP）的客户端配合使用。例如，它可以与Claude for Desktop集成。

Claude for Desktop的配置示例

在Claude for Desktop配置文件（~/Library/Application Support/Claude/claude_desktop_config.json）中添加以下内容：

{
  "mcpServers": {
    "playwright-lighthouse": {
      "command": "node",
      "args": [
        "/path-to/playwright-lighthouse-mcp/build/index.js"
      ]
    }
  }
}

📚 详细文档

可用工具

1. run-lighthouse

对当前打开的页面运行Lighthouse性能分析。

参数：
- url：要分析的网站URL
- categories：要分析的类别数组（默认：["performance"]）
  - 可用类别："performance"（性能）、"accessibility"（可访问性）、"best-practices"（最佳实践）、"seo"（搜索引擎优化）、"pwa"（渐进式Web应用）
- maxItems：每个类别要显示的最大改进项数量（默认：3，最大：5）

2. take-screenshot

对当前打开的页面进行截图。

参数：
- url：要捕获的网站URL
- fullPage：如果为true，则捕获整个页面的截图（默认：false）

输出格式

分析结果包括：

每个选定类别的总体得分及颜色指示
按类别分组的关键改进领域
保存的报告文件路径

📄 许可证

本项目采用MIT许可证，详情请参阅 LICENSE。

playwright-lighthouse-mcp