Chrome MCP Demo
这是一个使用 Vite + React + TypeScript 构建的演示项目，展示了 Quicklink、Guess.js 性能优化技术，以及一个用于 MCP 调试的路由问题场景。
功能特点
1. 性能优化
Quicklink 预加载（自定义实现）
- 自动预加载视口中可见的链接
- 在浏览器空闲时间进行预加载
- 提升页面导航速度
- 使用 IntersectionObserver 和 requestIdleCallback API
Guess.js 预测性预取（概念演示）
- 基于用户行为预测下一步可能访问的页面
- 智能预加载最可能访问的资源
- 提供更流畅的用户体验
2. MCP 调试场景
项目中故意设置了一个路由配置错误：
- 问题描述：导航链接指向
/brokenroute，但路由配置为/broken-route-wrong-path - 预期结果：点击 "Broken Page" 链接会出现 404 错误
- 调试目的：演示如何使用 Chrome DevTools MCP 工具排查路由问题
技术栈
- Vite - 快速的前端构建工具
- React 18 - UI 框架
- TypeScript - 类型安全的 JavaScript 超集
- React Router v6 - 客户端路由
- 自定义 Quicklink - 智能链接预加载（完全自研，兼容 React 18）
- Guess.js 概念 - 预测性预取框架（概念演示）
快速开始
安装依赖
npm install启动开发服务器
npm run dev构建生产版本
npm run build预览生产构建
npm run preview项目结构
chrome-mcp-demo/
├── src/
│ ├── pages/ # 页面组件
│ │ ├── Home.tsx # 首页（包含 Quicklink 实现）
│ │ ├── About.tsx # 关于页面
│ │ ├── Products.tsx # 产品页面
│ │ └── BrokenRoute.tsx # 问题路由页面
│ ├── utils/ # 工具函数
│ │ └── quicklink.ts # 自定义 Quicklink 实现
│ ├── App.tsx # 主应用组件（包含路由配置）
│ ├── App.css # 应用样式
│ ├── main.tsx # 应用入口
│ └── index.css # 全局样式
├── index.html # HTML 模板
├── package.json # 项目依赖
├── tsconfig.json # TypeScript 配置
└── vite.config.ts # Vite 配置使用 MCP 调试
- 启动开发服务器：
npm run dev - 打开浏览器访问应用
- 点击导航栏的 "Broken Page" 链接
- 观察页面显示空白或 404
- 使用 Chrome DevTools MCP 工具：
- 检查 Network 标签中的请求 - 查看 Console 中的错误信息 - 对比 src/App.tsx 中的路由配置和导航链接 - 找出路径不匹配的问题：/brokenroute vs /broken-route-wrong-path
性能优化说明
自定义 Quicklink 实现原理
由于官方 quicklink 库不兼容 React 18，本项目实现了一个自定义版本，核心特性包括：
- 智能检测：使用 IntersectionObserver API 监听视口中的链接
- 空闲预加载：利用 requestIdleCallback 在浏览器空闲时预加载资源
- 避免重复：追踪已预加载的链接，避免重复加载
- 降级方案：在不支持新 API 的浏览器中使用 setTimeout 降级
- 灵活配置：支持自定义优先级、origins、忽略规则等
技术实现：
- 使用 `
` 标签进行资源预加载
- IntersectionObserver 监听链接的可见性
- requestIdleCallback 确保在浏览器空闲时执行
- TypeScript 类型安全
Guess.js 概念
虽然完整的 Guess.js 需要 Google Analytics 数据和 webpack 插件支持，本项目通过 console.log 演示了预测性预取的概念：
- 基于用户当前页面预测下一步导航
- 提前加载最可能访问的资源
- 减少用户等待时间
验证 Quicklink 功能
打开浏览器开发者工具的 Network 标签：
- 访问首页
- 查看 Network 标签，筛选类型为 "prefetch"
- 你会看到导航栏中的链接被自动预加载
- 点击任意导航链接，页面会更快地加载
注意事项
- 自定义 Quicklink 实现与官方版本功能相似，但更轻量且完全兼容 React 18
- Guess.js 在本项目中仅作概念演示，完整实现需要额外的分析数据和配置
- 路由错误是故意设计的，用于 MCP 调试演示
License
MIT