MCP浏览器工具
一种模型上下文协议（MCP）服务器，提供全面的浏览器开发工具功能，包括控制台输出监控、网络活动跟踪、Web核心生命值测量和文件资源跟踪。
特性
🖥️ 控制台监控
- 实时控制台输出捕获（日志、警告、错误、信息、调试）
- JavaScript执行与控制台输出跟踪
- 控制台消息过滤和历史记录
- 使用源位置信息进行跟踪时出错
🌐 网络监控
- HTTP请求/响应跟踪
- 网络性能指标
- 请求/响应标头和时间
- 失败的请求监控
- 缓存命中率分析
📊 Web核心生命跟踪
- 最大容量涂料（LCP）
- 第一输入延迟（FID）
- 累积布局偏移（CLS）
- 首款内容丰富的涂料（FCP）
- 第一字节时间（TTFB）
- Lighthouse集成用于绩效审计
- 持续监控能力
📁 文件资源跟踪
- 资源加载监控（脚本、样式、图像等）
- 文件下载跟踪
- 资源优化建议
- 文件系统变更监控
- 基于文本的资源的内容捕获
安装
npm install
npm run build用法
作为MCP服务器
启动服务器：
npm start服务器在stdio上运行，并提供以下工具类别：
控制台工具
console_start_monitoring-启动监控控制台输出console_get_messages-获取收集的控制台消息console_clear_messages-清除控制台消息历史记录console_execute_script-执行JavaScript并捕获输出console_stop_monitoring-停止控制台监控
网络工具
network_start_monitoring-启动网络活动监控network_get_activity-获取网络请求/响应network_get_performance_metrics-获取详细的性能指标network_navigate-在监视时导航到新URLnetwork_clear_activity-清除网络活动历史记录network_stop_monitoring-停止网络监控
Web核心重要工具
wcv_start_monitoring-启动Web核心生命监控wcv_measure_vitals-测量当前生命体征wcv_run_lighthouse-运行Lighthouse绩效审计wcv_get_vitals_history-获取历史生命体征数据wcv_get_performance_entries-获取浏览器性能条目wcv_simulate_user_interaction-模拟FID的用户交互wcv_stop_monitoring-停止生命体征监测
文件跟踪工具
file_start_tracking-开始跟踪文件资源file_get_resources-获取跟踪的文件资源file_download_resource-下载特定资源file_get_downloads-获取下载历史记录file_analyze_resource-分析资源性能file_watch_filesystem-监视文件系统的更改file_get_filesystem_changes-获取文件系统更改历史记录file_clear_tracking_data-清除所有跟踪数据file_stop_tracking-停止文件跟踪
工具示例
控制台监控
// Start monitoring console output
{
"name": "console_start_monitoring",
"arguments": {
"url": "https://example.com",
"headless": true
}
}
// Execute JavaScript and capture console output
{
"name": "console_execute_script",
"arguments": {
"script": "console.log('Hello World'); console.error('Test error');"
}
}
// Get console messages filtered by type
{
"name": "console_get_messages",
"arguments": {
"type": "error",
"limit": 50
}
}网络监控
// Start network monitoring with request interception
{
"name": "network_start_monitoring",
"arguments": {
"url": "https://example.com",
"interceptRequests": true
}
}
// Get network activity filtered by resource type
{
"name": "network_get_activity",
"arguments": {
"filter": "requests",
"resourceType": "script",
"limit": 100
}
}
// Get performance metrics
{
"name": "network_get_performance_metrics",
"arguments": {}
}Web核心要素
// Start monitoring with continuous measurement
{
"name": "wcv_start_monitoring",
"arguments": {
"url": "https://example.com",
"continuous": true
}
}
// Measure current vitals
{
"name": "wcv_measure_vitals",
"arguments": {
"waitTime": 5
}
}
// Run Lighthouse audit
{
"name": "wcv_run_lighthouse",
"arguments": {
"categories": ["performance", "accessibility"],
"device": "mobile"
}
}文件跟踪
// Start file tracking with content capture
{
"name": "file_start_tracking",
"arguments": {
"url": "https://example.com",
"captureContent": true,
"downloadPath": "/tmp/downloads"
}
}
// Get large image resources
{
"name": "file_get_resources",
"arguments": {
"type": "image",
"minSize": 100000,
"limit": 20
}
}
// Analyze specific resource
{
"name": "file_analyze_resource",
"arguments": {
"url": "https://example.com/script.js"
}
}建筑
服务器由以下组件构建：
- TypeScript 用于类型安全
- 操纵者 用于浏览器自动化
- MCP-SDK 符合协议
- 灯塔 用于绩效审计
刀具结构
每个工具类别都被实现为一个单独的类：
ConsoleMonitor-控制台输出跟踪NetworkMonitor-网络活动监控WebCoreVitalsTracker-绩效指标收集FileTracker-资源和文件监控
发展
运行测试
npm test发展模式
npm run dev建筑
npm run build需求
- Node.js>=18.0.0
- Chrome/Chromium浏览器（适用于Puppeteer）
配置
服务器自动处理浏览器启动和管理。关键配置：
- 无头模式：控制浏览器可见性
- 下载路径：自定义文件下载位置
- 内容捕获：启用/禁用内容捕获以进行分析
- 连续监控：启用自动定期测量
性能注意事项
- 监控停止时，浏览器实例会被正确清理
- 可以禁用内容捕获以减少内存使用
- 下载路径应具有足够的磁盘空间
- 连续监测间隔针对性能进行了优化
故障排除
常见问题
- 浏览器启动失败：确保安装了Chrome/Chromium
- 权限错误：检查下载路径的写入权限
- 网络超时：调整慢速网络的超时设置
- 内存使用：禁用大型网站的内容捕获
调试模式
设置详细日志记录的环境变量：
DEBUG=true npm start贡献
- 分叉存储库
- 创建要素分支
- 添加新功能的测试
- 提交拉取请求
许可证
MIT许可证-有关详细信息，请参阅许可证文件。