Chrome DevTools MCP 测试应用
一个用于测试Chrome DevTools MCP（模型上下文协议）功能的简单Express.js网络应用程序。
特点/特性
- 交互式按钮 - 大型、带样式的按钮，带有点击事件记录功能
- 姓名表格 - 收集名字和姓氏，并实时显示结果
- 移动友好型设计 - 优化为移动设备的响应式布局（已在iPhone 12视口中测试）
- 性能优化 - 核心网页性能指标得分优异（LCP：278毫秒，CLS：0.00）
入门指南
先决条件
- Node.js（v14或更高版本）
- npm（Node Package Manager，节点包管理器）
安装
- 克隆仓库：
git clone https://github.com/itamarAtStampli/chrome-devtools-mcp-test.git
cd chrome-devtools-mcp-test- 安装依赖项：
npm install- 启动服务器：
npm start- 打开您的浏览器并导航至
http://localhost:3000
使用
测试 Chrome DevTools MCP
这款应用是专为测试Chrome DevTools MCP功能而设计的：
- 性能追踪 - 使用该应用程序记录性能轨迹并分析核心网页指标
- 表单交互 - 测试表单填写和提交自动化
- 移动设备模拟 - 在不同视口尺寸上测试响应式设计
- 事件生成 - 按钮点击和表单提交会生成控制台日志以供测试
功能概览
- 点击我按钮 - 点击时生成控制台日志并发出警报
- 姓名表格 - 输入名字和姓氏以查看动态结果展示
- 响应式设计 - 自动适应不同屏幕尺寸
技术细节
- 框架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做出贡献
- 克隆（或“分叉”）该仓库
- 创建一个特性分支
- 做出你的更改
- 彻底测试
- 提交一个拉取请求
许可证
MIT 许可证 - 欢迎随意将此代码用于您的项目。
作者
伊塔马尔·莱夫 -