qiming/qiming-dev-inject/EXAMPLES.md

使用示例

安装方式

# 静默安装（推荐，自动确认，无需交互）
npx -y @xagi/dev-inject install --framework

# 使用默认脚本地址 (/sdk/dev-monitor.js)
npx @xagi/dev-inject install --framework

# 使用自定义地址
npx @xagi/dev-inject install --remote=http://localhost:9000/dev-monitor.js --framework

# 使用 pnpm dlx
pnpm dlx @xagi/dev-inject install --framework

1. 本地开发环境监控

将监控脚本复制到你的项目静态资源目录：

# 复制监控脚本到你的项目中
cp dev-inject/scripts/dev-monitor.js public/scripts/

然后注入到 HTML：

# 注入本地监控脚本
npx @xagi/dev-inject install --remote=/scripts/dev-monitor.js

# 或者指定特定 HTML 文件
npx @xagi/dev-inject install --remote=/scripts/dev-monitor.js --file=./public/index.html

2. 远程开发服务器监控

如果你的监控脚本运行在开发服务器上：

# 注入远程脚本
npx @xagi/dev-inject install --remote=http://localhost:9000/dev-monitor.js

# 或使用 pnpm
pnpm dlx @xagi/dev-inject install --remote=http://localhost:9000/dev-monitor.js

3. 在 React/Vite/Next.js 项目中使用（框架感知模式）

# Vite 项目 - 使用框架感知注入（推荐）
npx @xagi/dev-inject install --remote=http://localhost:9000/dev-monitor.js --framework

# Next.js App Router 项目
npx @xagi/dev-inject install --remote=http://localhost:9000/dev-monitor.js --framework

# Next.js Pages Router 项目
npx @xagi/dev-inject install --remote=/scripts/dev-monitor.js --framework

# Create React App 项目
npx @xagi/dev-inject install --remote=/scripts/dev-monitor.js --framework

4. 开发完成后清理

# 移除框架注入
npx @xagi/dev-inject uninstall --framework

# 移除传统注入
npx @xagi/dev-inject uninstall

# 只移除特定文件的注入脚本
pnpm dlx @xagi/dev-inject uninstall --file=./index.html

5. 预览模式

在实际注入前，可以先预览将要执行的操作：

npx @xagi/dev-inject install --remote=/scripts/dev-monitor.js --dry-run --verbose

监控面板使用

在浏览器控制台中：

// 显示监控面板
DevMonitor.showPanel()

// 获取监控数据
DevMonitor.getData()

// 导出数据到文件
DevMonitor.exportData()

// 清除监控数据
DevMonitor.clearData()

// 设置日志级别
DevMonitor.setLogLevel('debug')  // debug, info, warn, error

完整工作流示例

# 1. 进入项目目录
cd my-project

# 2. 预览注入操作（框架感知模式）
npx @xagi/dev-inject install --remote=http://localhost:9000/dev-monitor.js --framework --dry-run

# 3. 执行注入（框架感知模式）
# 方式一：静默安装（推荐，一键完成）
npx -y @xagi/dev-inject install --framework

# 方式二：标准安装
npx @xagi/dev-inject install --remote=http://localhost:9000/dev-monitor.js --framework

# 4. 启动开发服务器
npm run dev

# 5. 在浏览器中测试功能，打开控制台使用 DevMonitor API

# 6. 开发完成后清理注入
npx @xagi/dev-inject uninstall --framework

快速启动示例

使用远程监控脚本（推荐）：

# 静默安装（最推荐，一键完成）
npx -y @xagi/dev-inject install --framework

# 框架感知注入（自动检测最佳注入方式）
npx @xagi/dev-inject install --remote=http://localhost:9000/dev-monitor.js --framework

# 或使用 pnpm
pnpm dlx @xagi/dev-inject install --remote=http://localhost:9000/dev-monitor.js --framework

# 卸载
npx @xagi/dev-inject uninstall --framework