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 许可证 - 欢迎随意将此代码用于您的项目。

作者

伊塔马尔·莱夫 -