Browser Console Analysis

🔍 浏览器控制台分析

一个轻量级的实用程序，用于使用Playwright MCP Server和GitHubCopilot捕获、分析和报告浏览器控制台消息

______________________________________________________________________

📋 目的

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

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

🤖 由...驱动

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

• 剧作家 MCP --增强浏览器自动化的模型上下文协议集成
• GitHub Copilot --人工智能辅助代码开发和优化

______________________________________________________________________

✨ 特性

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

______________________________________________________________________

🛠️ 这有什么作用

1. 启动 剧作家浏览器会话
2. 导航 到目标URL
3. 听着 用于控制台消息和页面错误
4. 等待 使运行时脚本完成执行
5. 生成 详细的降价分析报告

📊 样本输出

该工具生成以下报告：

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

______________________________________________________________________

🚀 快速开始

先决条件

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

安装

# Initialize project
npm init -y

# Install Playwright
npm install -D playwright

# Install browser binaries
npx playwright install

______________________________________________________________________

💻 实施指南

🎯 逐步实施

此项目使用 剧作家MCP服务器 随着 GitHub Copilot 在代理模式下，用于智能浏览器控制台分析和网络监控。

步骤1：启动Playwright MCP服务器

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

# Start the Playwright MCP server
# The server will listen for commands and manage browser automation
playwright-mcp-server start

步骤2：在代理模式下打开GitHub Copilot

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

第三步：问题分析提示

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

在GitHub Copilot聊天中，输入：

Use playwright MCP Server. Perform analysis of error messages found on console for webpage: https://www.flipkart.com and save the results in markdown file under reports.

🌐 示例2：网络请求分析

对于全面的网络监控：

Use playwright MCP Server. Run all network requests for website https://www.agoda.com since loading the webpage. Provide full raw list of network requests by breaking them down by type and size. Advise resolutions on possible causes and fixes. Write in a markdown file and attach under reports folder.

步骤4：自动执行

发出命令后，自动化过程开始：

对于控制台分析：

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

网络分析：

1. 🌐 打开浏览器 并导航到目标URL（例如。，https://www.agoda.com)
2. 📡 捕获所有网络请求 页面加载期间
3. 📊 分解请求 通过：

- 资源类型（img、脚本、css、xhr、fetch等） - 传输大小和字节数

1. 📈 生成统计数据 （请求总数，最大资源）
2. 🔍 分析性能 并确定问题
3. 💡 提供建议 用于优化
4. 💾 保存详细报告 作为带有完整资源定时JSON的markdown

整个过程通过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 = [];

  // Listen for console messages
  page.on('console', msg => {
    const loc = msg.location ? msg.location() : null;
    messages.push({ 
      source: 'console', 
      level: msg.type(), 
      text: msg.text(), 
      location: loc 
    });
  });

  // Listen for page errors
  page.on('pageerror', err => {
    messages.push({ 
      source: 'pageerror', 
      message: err.message, 
      stack: err.stack 
    });
  });

  // Navigate and capture
  await page.goto('https://www.flipkart.com', { waitUntil: 'networkidle' });
  await page.waitForTimeout(6000); // Allow runtime scripts to execute

  // Output results
  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/
    └── (dependencies)

______________________________________________________________________

🔧 高级用法

使用网络跟踪进行捕获

// Enable tracing
await context.tracing.start({ screenshots: true, snapshots: true });

// ... your capture logic ...

// Save trace
await context.tracing.stop({ path: 'trace.zip' });

保存HAR文件

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

______________________________________________________________________

🎯 扩展项目

增强的想法

• 🖥️ CLI包装器 --为URL和选项添加命令行参数
• 📦 HAR出口 --保存故障资源的网络跟踪
• 🔄 多运行聚合 --检测间歇性错误
• 🌍 区域测试 --来自不同地点/用户代理的测试
• 🤖 CI集成 --GitHub定期监控操作
• 📧 告警 --严重错误的电子邮件/Slack通知

CLI扩展示例

// Add argument parsing
const url = process.argv[2] || 'https://www.example.com';
const timeout = parseInt(process.argv[3]) || 6000;

______________________________________________________________________

📊 报告样本

此存储库中包含示例报告：

______________________________________________________________________

📝 后续步骤

• \[\]添加带参数解析的可运行CLI
• \[\]生成用于网络调试的HAR文件
• \[\]添加自动测试
• \[\]创建GitHub操作工作流
• \[\]添加对多个浏览器的支持
• \[\]实施报告比较/差异化

______________________________________________________________________

👨‍💻 作者

萨兰·库马尔

______________________________________________________________________

📄 许可证

麻省理工学院许可证-随意将此项目用于任何目的！

由以下材料制成❤️ 使用剧作家

⭐ 如果你觉得这个repo有用，请将其标记为星号！