Web Inspector

🔧 Web检查器MCP

用于web调试和性能监控的统一MCP服务器，集成后台命令

用一个与Claude Code的后台命令无缝集成的单一、强大和自动化的web检查解决方案取代浏览器工具mcp。

✨ 特性

• 🔄 持续监控 使用Claude Code后台命令
• 🚫 零配置 -开箱即用
• 📊 实时仪表盘 使用WebSocket更新
• 🎯 所有浏览器工具mcp功能 在一个包装中
• 🔧 自动安装 使用交互式CLI
• ⚡ 性能优化 -单流程与多组件

🚀 快速开始

一个命令安装：

npx web-inspector-mcp --install

这将：

• ✅ 创建和配置Chrome扩展程序
• ✅ 将MCP服务器添加到您的Claude Code配置中
• ✅ 在项目中设置自动启动脚本
• ✅ 安装所有依赖项

手动安装：

# Install globally
npm install -g web-inspector-mcp

# Or use npx (recommended)
npx web-inspector-mcp --help

📋 安装选项

# Full installation (recommended)
npx web-inspector-mcp --install

# Install without MCP configuration
npx web-inspector-mcp --install --no-mcp

# Install without Chrome extension
npx web-inspector-mcp --install --no-extension

# Install with auto-start scripts
npx web-inspector-mcp --install --auto-start

🎯 用法

使用克劳德代码（推荐）

在后台模式下开始监控：

# In your project directory
pnpm dev:monitored
# Or if auto-start was configured:
pnpm dev

使用 Ctrl+b 当Claude建议监视命令以进行连续的后台操作时。

独立使用

# Start MCP server
npx web-inspector-mcp

# Start background monitoring
npx web-inspector-mcp monitor

# Open dashboard
npx web-inspector-mcp dashboard

# Check status
npx web-inspector-mcp status

🔧 MCP工具可用

堆芯监测工具

• start_monitoring -开始持续的网络监控
• stop_monitoring -停止监控
• get_console_logs -检索控制台错误/警告/日志
• get_performance_metrics -获取核心Web重要信息和性能数据
• run_accessibility_audit -运行可访问性分析
• capture_network_logs -分析网络请求
• get_dashboard_url -获取实时仪表板URL
• health_check -系统状态和健康状况

克劳德代码示例：

You: Start monitoring my development site
Claude: I'll start web monitoring for you.
[Uses start_monitoring tool with background mode]
🚀 Web monitoring started for: http://localhost:3000
📊 Dashboard: http://localhost:3002
💡 Tip: This is running in background mode for continuous monitoring

📊 仪表盘

访问实时仪表板： http://localhost:3002

特征：

• 📋 实时控制台日志
• ⚡ 性能指标
• ♿ 可访问性问题
• 🌐 网络请求
• 📈 趋势分析

API终点：

• /api/status -系统状态
• /api/console -控制台日志馈送
• /api/performance -性能指标
• /api/accessibility -可访问性审计结果

🔧 配置

环境变量

WEB_INSPECTOR_URL=http://localhost:3000          # Target URL to monitor
WEB_INSPECTOR_PORT=3001                          # MCP server port  
WEB_INSPECTOR_DASHBOARD_PORT=3002                # Dashboard port

MCP配置

安装后，您的 ~/.claude/mcp.json 将包括：

{
  "mcpServers": {
    "web-inspector": {
      "command": "npx",
      "args": ["web-inspector-mcp"],
      "env": {
        "WEB_INSPECTOR_PORT": "3001",
        "WEB_INSPECTOR_DASHBOARD_PORT": "3002"
      }
    }
  }
}

🆚 vs浏览器工具mcp

🐛 故障排除

Chrome扩展程序不工作

# Reinstall extension
npx web-inspector-mcp --install --no-mcp

# Check extension in Chrome
# chrome://extensions/ → Enable "Developer mode" → Load unpacked extension
# Select: ~/.web-inspector-mcp/chrome-extension/

MCP服务器没有响应

# Check status
npx web-inspector-mcp status

# Restart monitoring
npx web-inspector-mcp monitor

# Check Claude Code MCP config
cat ~/.claude/mcp.json

端口冲突

# Use different ports
WEB_INSPECTOR_PORT=3005 WEB_INSPECTOR_DASHBOARD_PORT=3006 npx web-inspector-mcp

后台流程管理

# List running processes
ps aux | grep web-inspector

# Kill specific process
pkill -f web-inspector-mcp

# Or use Claude Code to manage background processes

🔧 发展

项目结构

web-inspector-mcp/
├── src/
│   ├── index.ts              # Main MCP server
│   ├── cli.ts                # Installation CLI
│   ├── monitor.ts            # Web monitoring logic
│   ├── background-monitor.ts # Background monitoring
│   ├── dashboard/
│   │   └── server.ts         # Dashboard server
│   └── types/
│       └── index.ts          # TypeScript types
├── chrome-extension/         # Auto-generated Chrome extension
├── package.json
└── README.md

地方发展

# Clone repository
git clone https://github.com/yourusername/web-inspector-mcp.git
cd web-inspector-mcp

# Install dependencies
npm install

# Build
npm run build

# Development mode
npm run dev

# Test installation
npm run cli -- --install

📝 贡献

1. 分叉存储库
2. 创建特征分支： git checkout -b feature/amazing-feature
3. 提交您的更改： git commit -m 'Add amazing feature'
4. 推到分支： git push origin feature/amazing-feature
5. 打开拉取请求

📄 许可证

MIT许可证-请参阅 许可证 详细信息文件

🙏 致谢

• 灵感来自 浏览器工具mcp
• 专为 克劳德代码 整合
• 由...驱动 模型上下文协议

🔗 链接

• Claude代码文档
• MCP规范
• 后台命令指南

______________________________________________________________________

由以下材料制成❤️ Claude Code社区