测试项目集合
这个目录包含了用于测试 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 路由架构
使用指南
快速开始
-
选择一个测试项目
cd test-projects/html-project # 或选择其他项目 -
安装依赖（如果有 package.json）
npm install -
启动项目
npm run dev # 或 npm run serve # 或 python3 -m http.server 3002 -
使用 dev-inject 注入监控脚本
# 在项目根目录运行 node ../bin/index.js install --remote http://localhost:9001/scripts/dev-monitor.js -
测试功能
- 打开浏览器访问项目
- 点击页面上的按钮触发各种错误
- 在浏览器控制台运行 DevMonitor 命令查看监控信息
测试命令
所有测试项目都支持以下 DevMonitor 命令：
// 显示监控面板
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 应用 |
注意事项
- 端口冲突: 确保各个项目使用不同的端口
- 依赖安装: 每个项目需要单独安装依赖
- 测试服务器: 确保 dev-inject 的监控服务器 (localhost:9001) 正在运行
- 框架检测: dev-inject 会自动检测项目类型并应用相应的注入策略
问题排查
如果遇到问题：
- 检查端口是否被占用
- 确认所有依赖已正确安装
- 查看浏览器控制台是否有错误
- 确认监控服务器是否正在运行
- 检查注入的脚本是否正确加载
贡献
欢迎添加更多测试项目或改进现有项目！