# @browser-echo/vite 中文文档

规范地址：https://npmcn.com/package/%40browser-echo/vite/

版本：1\.1\.1
npm 元数据更新时间：2026-05-12T11:32:55.471Z
中文译文更新时间：2026-11-08T16:10:56.536Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40browser-echo/vite
原文对照：https://npmcn.com/package/%40browser-echo/vite/?lang=original
项目主页：https://github.com/instructa/browser-echo#readme
源码仓库：https://github.com/instructa/browser-echo

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：22.7 kB，6 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：vite \>=4\.0\.0
- 首次发布：2025-08-11T22:40:23.197Z
- 最新版本发布：2026-05-12T11:32:55.347Z
- 近 30 天下载量：65327（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：13（近 12 个月 1 个）

## 中文简介

用于将浏览器控制台日志流到您的 Dev 终端的 Vite 插件, 上面有颜色、 堆栈痕迹和可选的文件记录 .

## 安装

```sh
npm install @browser-echo/vite
```

也可以使用：`pnpm add @browser-echo/vite`、`yarn add @browser-echo/vite`、`bun add @browser-echo/vite`

## README

# @ 浏览器- echo/ vite

用于将浏览器控制台日志流到您的 Dev 终端的 Vite 插件, 上面有颜色、 堆栈痕迹和可选的文件记录 .

这个软件包提供了一个Vite插件,包括dev中件和一个虚拟模块,在开发过程中将浏览器控制台日志转发到您的终端. 与React,Vue,TanStack Start合作,以及任何基于Vite的项目.

## 目录

-   [Vue + 维特](https://npmcn.com/package/%40browser-echo/vite/#readme-vue--vite)
-   [反应 + Vite](https://npmcn.com/package/%40browser-echo/vite/#readme-react--vite)
-   [TanStack 启动](https://npmcn.com/package/%40browser-echo/vite/#readme-tanstack-start)
-   [配置选项](https://npmcn.com/package/%40browser-echo/vite/#readme-configuration-options)
-   [安装 MCP 服务器](https://npmcn.com/package/%40browser-echo/vite/#readme-install-mcp-server)

## 特征

-   带有内置 dev 中间软件的 Vite 插件
-   自动客户端初始化虚拟模块
-   可选文件记录( 与 Vite 提供者独有)
-   彩色终端输出
-   多个模式的完整堆栈跟踪支持
-   与 `index.html` 或服务器端提供的应用程序
-   可选网络抓取( opt- in): 抓取, XMLHttp Request, WebSocket
-   可选请求/应答机身片段(可选入),安全截取

## 安装

```bash
npm install -D @browser-echo/vite
# or
pnpm add -D @browser-echo/vite
```

## 用法实例

### Vue + 维特

```bash
npm install -D @browser-echo/vite
# or
pnpm add -D @browser-echo/vite
```

```ts
// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import browserEcho from '@browser-echo/vite';

export default defineConfig({
  plugins: [
    vue(),
    browserEcho({
      // Optional configuration
      stackMode: 'condensed',
      colors: true,
    }),
  ],
});
```

就这样! 您的 Vue app 将在开发期间将控制台日志流到您的终端 .

### 反应 + Vite

```bash
npm install -D @browser-echo/vite
# or
pnpm add -D @browser-echo/vite
```

```ts
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import browserEcho from '@browser-echo/vite';

export default defineConfig({
  plugins: [
    react(),
    browserEcho({
      // Optional configuration
      stackMode: 'condensed',
      colors: true,
    }),
  ],
});
```

您的回放应用程序将在开发期间将控制台日志流到您的终端 .

### TanStack 启动

```ts
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import browserEcho from '@browser-echo/vite';

export default defineConfig({
  plugins: [
    react(),
    browserEcho({
      injectHtml: false, // Important: TanStack Start doesn't use index.html
      stackMode: 'condensed',
      fileLog: { enabled: true },
    }),
  ],
});
```

**对 TanStack 启动很重要**: 自从TanStack以来 开始制作,没有 `index.html`,需要设置 `injectHtml: false` 并手动在路由器中导入虚拟模块 :

```ts
// src/router.tsx
if (import.meta.env.DEV && typeof window !== 'undefined') {
  void import('virtual:browser-echo');
}
```

## 配置选项

```ts
interface BrowserEchoViteOptions {
  enabled?: boolean;                 // default: true (dev only)
  route?: `/${string}`;              // default: '/__client-logs'
  include?: BrowserLogLevel[];       // default: ['log','info','warn','error','debug']
  preserveConsole?: boolean;         // default: true
  tag?: string;                      // default: '[browser]'
  colors?: boolean;                  // default: true
  injectHtml?: boolean;              // default: true
  stackMode?: 'none' | 'condensed' | 'full'; // default: 'condensed'
  showSource?: boolean;              // default: true
  batch?: { size?: number; interval?: number }; // default: 20 / 300ms
  truncate?: number;                 // default: 10_000 chars
  fileLog?: { enabled?: boolean; dir?: string; split?: boolean }; // default: disabled
  mcp?: { 
    url?: string;                    // MCP server base URL (auto-discovered if not set)
    routeLogs?: `/${string}`;        // MCP logs route (default: '/__client-logs')
    suppressTerminal?: boolean;      // Suppress terminal output when forwarding (default: auto)
    headers?: Record<string,string>; // Custom headers for MCP requests
  };
  discoverMcp?: boolean;             // Enable MCP auto-discovery (default: true)
  discoveryRefreshMs?: number;       // Discovery refresh interval (default: 30000)
  networkLogs?: {
    enabled?: boolean;
    captureFull?: boolean;
    bodies?: {
      request?: boolean;
      response?: boolean;
      maxBytes?: number;                       // default 2048 bytes
      allowContentTypes?: string[];            // default ['application/json','text/','application/x-www-form-urlencoded']
      prettyJson?: boolean;                    // default true
    };
  }; // default disabled
}
```

## 安装 MCP 服务器

Vite插件自动发现并转发日志到MCP服务器. 多数情况下不需要配置!

**📖 [首先,设置 MCP 服务器](https://npmcn.com/package/%40browser-echo/mcp/README.md#installation) ,然后配置下面的框架选项.**

### 自动发现( 默认)

```ts
browserEcho({
  // MCP auto-discovery enabled by default
  // Logs forward to MCP when detected, terminal output suppressed
})
```

### 手动配置

```ts
browserEcho({
  mcp: {
    url: 'http://127.0.0.1:5179',           // Explicit MCP base URL
    suppressTerminal: false,                 // Keep terminal output even when forwarding
    headers: { 'Authorization': 'Bearer ...' } // Custom headers if needed
  }
})
```

### 网络正文片断( opt- in)

```ts
browserEcho({
  networkLogs: {
    enabled: true,
    bodies: {
      request: true,
      response: true,
      maxBytes: 2048,
      allowContentTypes: ['application/json','text/','application/x-www-form-urlencoded'],
      prettyJson: true
    }
  }
})
```

输出示例 :

```
[NETWORK] [POST] [/api/users] [200] [18ms]
    req: {"name":"Ada"}
    res: { "id": 1, "name": "Ada" }
```

### 禁用 MCP

```ts
browserEcho({
  discoverMcp: false,  // Disable auto-discovery
  mcp: { url: '' }     // Disable explicit MCP
})
```

### 环境变量

-   `BROWSER_ECHO_MCP_URL=http://127.0.0.1:5179/mcp` 设置 MCP 服务器 URL
-   `BROWSER_ECHO_SUPPRESS_TERMINAL=1` - 强制压制终端输出
-   `BROWSER_ECHO_SUPPRESS_TERMINAL=0` — 部队显示终端输出
-   `BROWSER_ECHO_FILE_LOG=true` ——启用 MCP- side 文件记录( 最小服务器)
-   `BROWSER_ECHO_SPLIT_LOGS=true` ——将日志分解为日志/前端对齐

#### 发现行为

发现顺序 : `BROWSER_ECHO_MCP_URL` 港口 5179(dev) 当地项目 `.browser-echo-mcp.json`。 。 。 .

## 文件日志( 只有图像特性)

启用可选文件记录将浏览器日志写入磁盘 :

```ts
browserEcho({
  fileLog: { 
    enabled: true, 
    dir: 'logs/frontend' // default: 'logs/frontend'
  }
})
```

### 按标签分割文件日志

将单独的文件写入每个标签子目录(例如. `logs/network/dev-*.log`:

```ts
browserEcho({
  fileLog: {
    enabled: true,
    dir: 'logs',
    split: true
  },
  networkLogs: { enabled: true }
})
```

例如,这产生了:

-   `logs/browser/dev-YYYY-MM-DDTHH-MM-SS.log`
-   `logs/network/dev-YYYY-MM-DDTHH-MM-SS.log`
-   `logs/worker/dev-YYYY-MM-DDTHH-MM-SS.log`

## 如何运作

插件 :

1.  添加 dev 中间软件处理 POST 请求 `/__client-logs`
2.  提供虚拟模块 `virtual:browser-echo` 初始化客户端
3.  可选地将虚拟模块导入到您的 `index.html`
4.  用颜色和堆放痕迹打印格式化日志到终端

## 依赖关系

此软件包取决于 [@ 浏览器- echo/ 核心](https://github.com/instructa/browser-echo/tree/main/packages/core) 用于客户端功能.

## 解决问题

-   **没有日志**: 确保添加插件并同时添加其中之一 `index.html` 已存在或您手动导入虚拟模块
-   **太大声了**: 限制 `include: ['warn','error']` 和使用情况 `stackMode: 'condensed'`
-   **浏览器中的复制日志**设置 `preserveConsole: false`

## 作者

[凯文克恩](https://github.com/regenrek)

## 许可证

麻省理工学院

## 链接

-   [主仓库](https://github.com/instructa/browser-echo)
-   [文档](https://github.com/instructa/browser-echo#readme)
-   [核心软件包](https://github.com/instructa/browser-echo/tree/main/packages/core)

## 常见问题

### @browser-echo/vite 是什么？

用于将浏览器控制台日志流到您的 Dev 终端的 Vite 插件, 上面有颜色、 堆栈痕迹和可选的文件记录 \.

### 如何安装 @browser-echo/vite？

在项目目录运行 npm install @browser-echo/vite，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vite（\>=4\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @browser-echo/vite 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @browser-echo/vite 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @browser-echo/vite 可以商用吗？

@browser-echo/vite 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @browser-echo/vite 的下载量有多少？

根据 npm 官方下载统计，@browser-echo/vite 在 2026/10/09 – 2026/11/07 这 30 天内被下载 65,327 次，日均约 2,178 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @browser-echo/vite 还在维护吗？

最新版本 1\.1\.1 发布于 2026/05/12（5 个月前）；至今共发布 13 个版本，其中过去 12 个月发布了 1 个；首次发布于 2025/08/12。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。