🔍 浏览器控制台分析

使用Playwright MCP Server和GitHub Copilot捕获、分析和报告浏览器控制台消息的轻量级工具。

---

📋 目的

快速捕获网页的控制台输出和运行时错误，用于：

• 🐛 调试 — 识别JavaScript错误和警告
• ✅ 质量保证测试 — 自动化控制台监控
• 📊 性能分析 — 跟踪运行时问题
• 🔔 监控 — 早期检测生产问题

🤖 动力来源

该项目利用现代开发工具：

• Playwright MCP — 通过集成模型上下文协议（Model Context Protocol）增强浏览器自动化
• GitHub Copilot — AI辅助代码开发和优化

---

✨ 特性

• 🚀 快速设置 — 简单的基于Playwright的实现
• 📝 Markdown报告 — 在reports/文件夹中生成可读的人类输出
• 🎯 事件捕获 — 监控console和pageerror事件
• ⏱️ 运行时分析 — 等待动态脚本执行完成
• 🔧 可扩展 — 容易定制和集成

---

🛠️ 功能概述

1. 启动 Playwright浏览器会话
2. 导航 到目标URL
3. 监听 控制台消息和页面错误
4. 等待 运行时脚本执行完毕
5. 生成 详细的Markdown分析报告

📊 样例输出

该工具生成如下报告：

• reports/flipkart_console_report.md
• reports/amazon_console_report.md

---

🚀 快速开始

先决条件

• Node.js（版本16或更高）
• npm 或 yarn

安装

# 初始化项目
npm init -y

# 安装Playwright
npm install -D playwright

# 安装浏览器二进制文件
npx playwright install

---

💻 实现指南

🎯 步骤实施

此项目使用Playwright MCP Server与GitHub Copilot在代理模式下进行智能浏览器控制台分析和网络监控。

第一步：启动Playwright MCP Server

首先确保Playwright MCP服务器正在运行：

# 启动Playwright MCP服务器
# 服务器将监听命令并管理浏览器自动化
playwright-mcp-server start

第二步：打开GitHub Copilot的代理模式

1. 打开VS Code
2. 激活GitHub Copilot
3. 切换到代理模式（在Copilot聊天中使用@命令）

第三步：发出分析提示

🔍 示例1：控制台错误分析

在GitHub Copilot聊天中输入：

使用playwright MCP Server。对网页https://www.flipkart.com上的控制台错误信息进行分析，并将结果保存为markdown文件，位于reports文件夹下。

🌐 示例2：网络请求分析

对于全面的网络监控：

使用playwright MCP Server。运行网站https://www.agoda.com加载网页的所有网络请求。按类型和大小细分提供完整的原始网络请求列表。就可能的原因和修复方案提供建议。写入markdown文件并附在reports文件夹下。

第四步：自动执行

一旦发出命令，自动化过程就开始了：

对于控制台分析：

1. 🌐 Playwright MCP 自动打开浏览器
2. 🔍 导航 到目标URL（例如，https://www.flipkart.com）
3. 👂 监听 控制台消息和页面错误
4. ⏳ 等待 动态内容加载
5. 📊 分析 捕获的错误和警告
6. 💾 保存 结果为markdown文件在reports/文件夹下

对于网络分析：

1. 🌐 打开浏览器 并导航到目标URL（例如，https://www.agoda.com）
2. 📡 捕获所有网络请求 在页面加载期间
3. 📊 细分请求 按照：
   • 资源类型（img, script, css, xhr, fetch等）
   • 传输大小和字节计数
4. 📈 生成统计数据 （总请求数，最大资源）
5. 🔍 分析性能 并识别问题
6. 💡 提供优化建议
7. 💾 保存详细报告 作为markdown文件，包含完整的资源时间JSON

整个过程通过Playwright MCP服务器和GitHub Copilot的代理能力自动化。

---

💻 手动使用（替代方法）

基础捕获脚本

创建capture.js：

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext();
  const page = await context.newPage();
  const messages = [];

  // 监听控制台消息
  page.on('console', msg => {
    const loc = msg.location ? msg.location() : null;
    messages.push({ 
      source: 'console', 
      level: msg.type(), 
      text: msg.text(), 
      location: loc 
    });
  });

  // 监听页面错误
  page.on('pageerror', err => {
    messages.push({ 
      source: 'pageerror', 
      message: err.message, 
      stack: err.stack 
    });
  });

  // 导航并捕获
  await page.goto('https://www.flipkart.com', { waitUntil: 'networkidle' });
  await page.waitForTimeout(6000); // 允许运行时脚本执行

  // 输出结果
  console.log(JSON.stringify(messages, null, 2));
  
  await browser.close();
})();

运行脚本

node capture.js

---

📁 项目结构

BrowserConsoleAnalysis/
├── 📄 README.md
├── 📄 capture.js
├── 📄 package.json
├── 📄 package-lock.json
├── 📂 reports/
│   ├── flipkart_console_report.md
│   ├── amazon_console_report.md
│   ├── agoda_network_requests_report.md
│   └── agoda_resource_timing.json
└── 📂 node_modules/
    └── (依赖项)

---

🔧 高级用法

捕获带网络跟踪

// 启用跟踪
await context.tracing.start({ screenshots: true, snapshots: true });

// ...你的捕获逻辑...

// 保存跟踪
await context.tracing.stop({ path: 'trace.zip' });

保存HAR文件

const context = await browser.newContext({
  recordHar: { path: 'network.har' }
});

---

🎯 扩展项目

增强想法

• 🖥️ CLI包装器 — 添加URL和选项的命令行参数
• 📦 HAR导出 — 保存失败资源的网络跟踪
• 🔄 多轮聚合 — 检测间歇性错误
• 🌍 区域测试 — 从不同位置/用户代理测试
• 🤖 CI集成 — GitHub Actions定期监控
• 📧 警报 — 关键错误的电子邮件/Slack通知

示例CLI扩展

// 添加参数解析
const url = process.argv[2] || 'https://www.example.com';
const timeout = parseInt(process.argv[3]) ||  6000;

---

📊 样例报告

示例报告包含在此仓库中：

网站	类型	报告
Flipkart	控制台错误	reports/flipkart_console_report.md
Amazon	控制台错误	reports/amazon_console_report.md
Agoda	网络分析	reports/agoda_network_requests_report.md
Agoda	资源计时	reports/agoda_resource_timing.json

---

📝 下一步

• 添加具有参数解析的可运行CLI
• 生成HAR文件用于网络调试
• 添加自动化测试
• 创建GitHub Action工作流
• 支持多种浏览器
• 实现报告比较/差异

---

👨‍💻 作者

Saran Kumar

---

📄 许可证

MIT许可证 - 欢迎出于任何目的使用此项目！

---

<div align="center">

使用Playwright制作 ❤️

⭐ 如果您觉得它有用，请给这个仓库点赞！

</div>