提交qiming-dev-inject

qiming-dev-inject/test-projects/README.md

@@ -0,0 +1,124 @@
+# 测试项目集合
+
+这个目录包含了用于测试 dev-inject 在不同框架和项目类型中的注入功能的示例项目。
+
+## 项目列表
+
+### 1. HTML 静态项目 (html-project)
+- **类型**: 纯 HTML + JavaScript
+- **端口**: 3002
+- **启动**: `npm run serve` 或 `python3 -m http.server 3002`
+- **特点**: 基础的 HTML 项目，用于测试最简单场景下的脚本注入
+
+### 2. Vite 项目 (vite-project)
+- **类型**: Vite + React
+- **端口**: 3001
+- **启动**: `npm run dev`
+- **特点**: 现代化的 Vite 构建工具，单页应用
+
+### 3. Next.js App Router (next-app-project)
+- **类型**: Next.js 14 App Router
+- **端口**: 3000
+- **启动**: `npm run dev`
+- **特点**: 最新的 Next.js 应用路由架构，支持 React Server Components
+
+### 4. Next.js Pages Router (next-pages-project)
+- **类型**: Next.js Pages Router
+- **端口**: 3000
+- **启动**: `npm run dev`
+- **特点**: 传统的 Next.js Pages 路由架构
+
+## 使用指南
+
+### 快速开始
+
+1. **选择一个测试项目**
+   ```bash
+   cd test-projects/html-project  # 或选择其他项目
+   ```
+
+2. **安装依赖**（如果有 package.json）
+   ```bash
+   npm install
+   ```
+
+3. **启动项目**
+   ```bash
+   npm run dev
+   # 或
+   npm run serve
+   # 或
+   python3 -m http.server 3002
+   ```
+
+4. **使用 dev-inject 注入监控脚本**
+   ```bash
+   # 在项目根目录运行
+   node ../bin/index.js install --remote http://localhost:9001/scripts/dev-monitor.js
+   ```
+
+5. **测试功能**
+   - 打开浏览器访问项目
+   - 点击页面上的按钮触发各种错误
+   - 在浏览器控制台运行 DevMonitor 命令查看监控信息
+
+### 测试命令
+
+所有测试项目都支持以下 DevMonitor 命令：
+
+```javascript
+// 显示监控面板
+DevMonitor.showPanel()
+
+// 获取统计信息
+DevMonitor.getStats()
+
+// 清除错误记录
+DevMonitor.clearErrors()
+
+// 检查注入状态
+window.__DEV_INJECT__
+```
+
+## 功能特性
+
+每个测试项目都包含以下功能：
+
+- ✅ 触发同步错误
+- ✅ 触发异步错误
+- ✅ 错误记录和显示
+- ✅ 清除错误功能
+- ✅ DevMonitor 控制台命令
+- ✅ 实时错误统计
+- ✅ 美观的 UI 界面
+
+## 项目对比
+
+| 项目类型 | 构建工具 | 路由方式 | 启动速度 | 适用场景 |
+|---------|---------|---------|---------|---------|
+| HTML | 无 | 静态文件 | 最快 | 传统网站 |
+| Vite | Vite | SPA | 快 | 现代 SPA 应用 |
+| Next.js App | Next.js | App Router | 中 | 全栈应用（推荐） |
+| Next.js Pages | Next.js | Pages Router | 中 | 传统 Next.js 应用 |
+
+## 注意事项
+
+1. **端口冲突**: 确保各个项目使用不同的端口
+2. **依赖安装**: 每个项目需要单独安装依赖
+3. **测试服务器**: 确保 dev-inject 的监控服务器 (localhost:9001) 正在运行
+4. **框架检测**: dev-inject 会自动检测项目类型并应用相应的注入策略
+
+## 问题排查
+
+如果遇到问题：
+
+1. 检查端口是否被占用
+2. 确认所有依赖已正确安装
+3. 查看浏览器控制台是否有错误
+4. 确认监控服务器是否正在运行
+5. 检查注入的脚本是否正确加载
+
+## 贡献
+
+欢迎添加更多测试项目或改进现有项目！
+