AI导哈

Chrome DevTools测试应用

一个简单的Express.js Web应用程序，用于测试Chrome DevTools MCP（模型上下文协议）功能。

  • by itamarAtStampli
  • HTML
  • 本地部署
  • 更新于
在 GitHub 查看 itamarAtStampli/chrome-devtools-mcp-test

使用说明

Chrome DevTools MCP 测试应用

一个用于测试Chrome DevTools MCP（模型上下文协议）功能的简单Express.js网络应用程序。

特点/特性

  • 交互式按钮 - 大型、带样式的按钮，带有点击事件记录功能
  • 姓名表格 - 收集名字和姓氏，并实时显示结果
  • 移动友好型设计 - 优化为移动设备的响应式布局（已在iPhone 12视口中测试）
  • 性能优化 - 核心网页性能指标得分优异（LCP：278毫秒，CLS：0.00）

入门指南

先决条件

  • Node.js（v14或更高版本）
  • npm（Node Package Manager，节点包管理器）

安装

  1. 克隆仓库：
git clone https://github.com/itamarAtStampli/chrome-devtools-mcp-test.git
cd chrome-devtools-mcp-test
  1. 安装依赖项：
npm install
  1. 启动服务器：
npm start
  1. 打开您的浏览器并导航至 http://localhost:3000

使用

测试 Chrome DevTools MCP

这款应用是专为测试Chrome DevTools MCP功能而设计的：

  • 性能追踪 - 使用该应用程序记录性能轨迹并分析核心网页指标
  • 表单交互 - 测试表单填写和提交自动化
  • 移动设备模拟 - 在不同视口尺寸上测试响应式设计
  • 事件生成 - 按钮点击和表单提交会生成控制台日志以供测试

功能概览

  1. 点击我按钮 - 点击时生成控制台日志并发出警报
  2. 姓名表格 - 输入名字和姓氏以查看动态结果展示
  3. 响应式设计 - 自动适应不同屏幕尺寸

技术细节

  • 框架Express.js
  • 前端纯HTML、CSS、JavaScript
  • 造型设计带有悬停效果和过渡效果的现代CSS
  • 演出优化以实现快速加载（LCP低于300毫秒）

性能指标

最近的性能测试结果：

  • **最大内容绘制（Largest Contentful Paint，简称LCP）**278毫秒 ✅
  • **累积布局偏移（CLS）**0.00 ✅
  • **首次字节时间（TTFB）**3毫秒 ✅

发展

应用程序结构：

├── index.js              # Express server
├── package.json          # Dependencies and scripts
├── public/
│   └── index.html        # Main HTML file with embedded CSS/JS
└── README.md            # This file

做出贡献

  1. 克隆（或“分叉”）该仓库
  2. 创建一个特性分支
  3. 做出你的更改
  4. 彻底测试
  5. 提交一个拉取请求

许可证

MIT 许可证 - 欢迎随意将此代码用于您的项目。

作者

伊塔马尔·莱夫 - GitHub个人资料

相关 MCP