devrq

面向 Vue 3 的开发调试工具：在浏览器里拦截 fetch 与 XMLHttpRequest，把请求/响应摘要记入列表，并提供可拖拽的调试面板查看与筛选。适合本地与联调阶段排查接口问题。

仅建议在开发环境使用。 拦截会包装全局 fetch / XHR。

默认行为（与 Vite 一致）：在 setupDevRequest(app) 里根据 import.meta.env.DEV 决定：开发环境注册真实面板并安装拦截、注入样式；生产环境不装拦截、不注样式，并注册空占位组件（避免模板里仍写 <DevRequestPanel /> 时出现「未解析组件」）。预发需强制打开时用 setupDevRequest(app, { force: true })。

功能概览

| 能力 | 说明 | |------|------| | Fetch 拦截 | 记录方法、URL、请求头与 body 预览、响应状态与 body 预览（JSON 会尝试格式化）、耗时。 | | XHR 拦截 | 在 open / setRequestHeader / send / loadend 上采集同类信息。 | | 静态资源（可选） | 通过 PerformanceObserver 记录 resource 类型条目（图片、脚本、样式等），与 fetch/xhr 分流展示；需显式开启，避免默认噪音。 | | 调试面板 UI | 列表、详情、搜索、按类型筛选（all / fetch / xhr / resource）、明暗主题、面板停靠位置（上下左右），部分状态持久化到 localStorage。 | | 全局组件 | setupDevRequest 会注册 DevRequestPanel、DevSelect、DevPanelPos，可在模板中直接使用。 |

安装

npm install devrq
# 或
yarn add devrq

对等依赖：vue ^3.3（由宿主项目提供）。

npm 包里有什么？

发布到 npm 的包由 package.json 的 files 字段控制（当前为 dist 目录）。安装方得到的是编译后的 index.js 等产物（含 source map 便于调试栈映射），不包含本仓库的 src 源码；他人不能通过 npm install 直接拿到完整源码。

若需阅读或修改源码，请使用 repository 中给出的 Git 地址克隆仓库（见本包在 npm 上的「Repository」链接，或下方 package.json 字段）。

快速接入

1. 入口安装插件

在 setupDevRequest 走开发分支时会注入样式到 document.head。无需再写 import 'devrq/style'。

若你在极特殊场景下需要手动补注入（例如仅动态 import() 了某个子模块），可调用导出的 ensureDevrqStyles()。

import { createApp } from 'vue';
import App from './App.vue';
import { setupDevRequest } from 'devrq';

const app = createApp(App);
setupDevRequest(app);
app.mount('#app');

2. 在布局中挂载面板（示例）

<template>
  <div id="app">
    <router-view />
    <DevRequestPanel />
  </div>
</template>

可选：用 Vite 插件注入（不必在 main 里写 import { setupDevRequest }）

1. vite.config.js：import { devrqVitePlugin } from 'devrq/vite-plugin'，在 plugins 中加入 devrqVitePlugin()。
2. src/main.js 在 createApp 之后、mount（或 app.use(...)）之前加一行占位：/* __devrq_vite__ */

插件会在编译时替换为 setupDevRequest(app) 并注入 import { setupDevRequest } from 'devrq'。

注意：插件须从子路径 devrq/vite-plugin 引入；不要从主入口 import … from 'devrq' 导入插件（主入口只导出 Vue 相关 API）。请使用包含 vite-plugin.js 的 devrq 版本。

setupDevRequest(app, options?)

| 参数 | 类型 | 说明 | |------|------|------| | app | App | Vue 应用实例。 | | options.captureStatic | boolean | true 时开启静态资源（Performance resource）采集；false 明确关闭；不传则保持默认（默认不强调静态，以拦截器内状态为准）。 | | options.force | boolean | true 时在生产构建也启用真实面板与拦截（预发/排障）；默认与 import.meta.env.DEV 一致。 |

开发（或 force: true）：注册真实组件、安装拦截、注入样式。
生产：仅注册空占位（同名 DevRequestPanel / DevSelect / DevPanelPos），不装拦截、不注样式。

库构建在 vite.lib.config.js 中保留 import.meta.env.* 字面量，由宿主打包时替换，与宿主 import.meta.env.DEV 一致。可选导出 isDevrqDevMode 用于自定义逻辑。

按需：仅拦截或仅卸载拦截

若需自行控制组件注册与拦截时机：

import {
  installDevRequestIntercept,
  uninstallDevRequestIntercept,
} from 'devrq';

installDevRequestIntercept({ captureStatic: true });
// …
uninstallDevRequestIntercept();

同样受 import.meta.env.DEV（或 opts.force === true）约束；生产环境默认不安装拦截。

卸载后会恢复原生 fetch 与 XMLHttpRequest 原型方法，并断开 Performance 监听。

导出 API（节选）

除上述方法外，还可从包入口导入与列表、主题、面板位置、表头列相关的状态与方法（用于深度定制或测试）：

• 状态：devrqState（响应式）
• 列表：clearEntries、pushEntry、createEmptyEntry
• 主题 / 布局：toggleDevrqTheme、persistPanelPosition
• 表头扩展列：addHeaderColumn、removeHeaderColumn
• 组件：DevRequestPanel、DevSelect、DevPanelPos（命名导出）
• 样式：ensureDevrqStyles（一般无需手动调用；见上文）
• 环境：isDevrqDevMode（与 import.meta.env.DEV 一致；一般无需手动调用）

类型与行为以包内导出为准；需要对照实现时再克隆仓库查看 src/views/types.js、history.js 等。

克隆本仓库后的本地开发、版本自增与发布流程见 CONTRIBUTING.md（该文件不会打进 npm 包，仅随 Git 仓库提供）。

许可证

ISC