# @browser-echo/core 中文文档

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

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

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

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

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

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

## 中文简介

用于将浏览器控制台日志流到您的 Dev 终端的核心客户端功能.

## 安装

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

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

## README

# @ 浏览器- echo/ 核心

用于将浏览器控制台日志流到您的 Dev 终端的核心客户端功能.

这个软件包提供了 `initBrowserEcho` 补丁的函数 `console.*` 方法和向开发服务器端点转发日志。 它被特定框架提供者用作依赖.

## 目录

-   [安装](https://npmcn.com/package/%40browser-echo/core/#readme-installation)
-   [使用量](https://npmcn.com/package/%40browser-echo/core/#readme-usage)
-   [安装 MCP 服务器](https://npmcn.com/package/%40browser-echo/core/#readme-install-mcp-server)

## 特征

-   覆盖的滴入客户端补丁 `console.log/info/warn/error/debug`
-   批发 HTTP 请求( 使用) `sendBeacon` (如果有的话)
-   来源提示 `(file:line:col)` + 堆栈跟踪
-   可配置日志级别和分批
-   记录对象中的循环参考处理
-   无生产影响(仅指发展)
-   可选网络抓取( opt- in): 抓取, XMLHttp Request, WebSocket

## 安装

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

## 使用量

```ts
import { initBrowserEcho } from '@browser-echo/core';

// Initialize with default options
initBrowserEcho();

// Or customize the behavior
initBrowserEcho({
  route: '/__client-logs',
  include: ['warn', 'error'],
  preserveConsole: true,
  tag: '[browser]',
  batch: { size: 20, interval: 300 },
  stackMode: 'condensed',
  // Opt-in network logging
  networkLogs: {
    enabled: true,
    captureFull: false,
    bodies: {
      request: true,
      response: true,
      maxBytes: 2048,
      allowContentTypes: ['application/json', 'text/', 'application/x-www-form-urlencoded'],
      prettyJson: true
    }
  }
});
```

## 选项

大多数提供者接受这些选项(名称可能作为插件选项或组件道具出现):

```ts
type BrowserLogLevel = 'log' | 'info' | 'warn' | 'error' | 'debug';

interface BrowserEchoOptions {
  enabled?: boolean;                 // default: true (dev only)
  route?: `/${string}`;              // default: '/api/client-logs' (Next), '/__client-logs' (others)
  include?: BrowserLogLevel[];       // default: ['log','info','warn','error','debug']
  preserveConsole?: boolean;         // default: true (also keep logging in the browser)
  tag?: string;                      // default: '[browser]'
  // stacks
  stackMode?: 'none' | 'condensed' | 'full'; // default: 'full' (provider-specific; Vite supports all)
  showSource?: boolean;              // default: true (when available)
  // batching
  batch?: { size?: number; interval?: number }; // default: 20 / 300ms
  // server-side
  truncate?: number;                 // default: 10_000 chars (Vite)
  fileLog?: { enabled?: boolean; dir?: string }; // Vite-only
  // network capture (opt-in)
  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
}
```

> 注:文件记录和 `truncate` 正在 Vite 插件的 Dev 服务器中间软件中执行 。 Nuxt/ Next 提供者默认打印到 stdout( 如果您需要文件输出, 您可以扩展它们) .

## 框架提供者

这个核心包一般通过特定框架的提供者使用:

-   **@ 浏览器- echo/ vite** - 用于基于Vite的项目(反应、Vue、TanStack Start)
-   **@ 浏览器- echo/ next** - 为Next.js App路由器
-   **@ 浏览器- echo/ nuxt** - 为纳克特3/4
-   **@ 浏览器- echo/ 反应** - 反应(非声音)
-   **@ 浏览器- echo/ vue** - 为Vue(非Vite)

见 [主要仓库](https://github.com/instructa/browser-echo) 为完整的设置向导.

## 安装 MCP 服务器

对于核心使用,MCP转发取决于您的服务器侧路由执行. 核心包只处理浏览器-侧日志收藏.

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

### 环境变量

-   `BROWSER_ECHO_MCP_URL=http://127.0.0.1:5179/mcp` ——在服务器环境中设置
-   `BROWSER_ECHO_SUPPRESS_TERMINAL=1` 控制终端输出于您的路由处理器

### 服务器路由 MCP 一体化

见 [反应 MCP 设置](https://npmcn.com/package/%40browser-echo/react/README.md#mcp-settings) 用于使用 MCP 转发的服务器路由.

## 作者

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

## 许可证

麻省理工学院

## 链接

-   [主仓库](https://github.com/instructa/browser-echo)
-   [文档](https://github.com/instructa/browser-echo#readme)

## 常见问题

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

用于将浏览器控制台日志流到您的 Dev 终端的核心客户端功能\.

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

在项目目录运行 npm install @browser-echo/core，或使用 pnpm add / yarn add / bun add。

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

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

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

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

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

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

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

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

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

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