# @builder\.io/console-feed 中文文档

规范地址：https://npmcn.com/package/%40builder.io/console-feed/

版本：3\.0\.0-1
npm 元数据更新时间：2026-09-09T09:16:20.460Z
中文译文更新时间：2026-11-08T20:33:28.244Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40builder.io/console-feed
原文对照：https://npmcn.com/package/%40builder.io/console-feed/?lang=original
项目主页：https://github.com/samdenty99/console-feed
源码仓库：https://github.com/samdenty99/console-feed

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

- 包体积（解压后）：192 kB，75 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：5 个
- peer 依赖：react ^15\.x \|\| ^16\.x
- 首次发布：2020-03-29T21:37:24.875Z
- 最新版本发布：2020-03-29T21:37:25.195Z
- 近 30 天下载量：2350（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 0 个）

## 中文简介

从当前页面显示控制台日志、 iframe 或通过服务器传输的反射组件

## 安装

```sh
npm install @builder.io/console-feed
```

也可以使用：`pnpm add @builder.io/console-feed`、`yarn add @builder.io/console-feed`、`bun add @builder.io/console-feed`

## README

# 控制台饲料

[![npm version](https://img.shields.io/npm/v/console-feed.svg?style=flat-square)](https://www.npmjs.com/package/console-feed) [![CircleCI](https://img.shields.io/circleci/project/github/samdenty99/console-feed.svg?style=flat-square)](https://circleci.com/gh/samdenty99/console-feed) [![npm downloads](https://img.shields.io/npm/dm/console-feed.svg?style=flat-square)](https://www.npmjs.com/package/console-feed) [![Demo](https://img.shields.io/badge/CodeSandbox-Demo-yellow.svg?style=flat-square)](https://codesandbox.io/s/rl7pk9w2ym)

从当前页面显示控制台日志、 iframe 或通过服务器传输的回放组件 .

![Demo](https://user-images.githubusercontent.com/13242392/38513414-1bc32870-3c26-11e8-9a8f-0989d2142b1c.png)

## 谁用它

-   [代码Sandbox.io](https://codesandbox.io/)
-   [帧器](https://www.framer.com/)
-   [弹簧](https://plnkr.co/)
-   [P5.js 编辑器](https://editor.p5js.org/)

## 特征

-   **控制台格式化** - 说吧 [样式并给出日志颜色](https://stackoverflow.com/questions/22155879/how-do-i-create-formatted-javascript-console-log-messages)链接
-   **DOM 节点** - 方便检查和扩展 HTML 元素,并加亮语法
-   **`console.table`** - 用表格格式查看日志
-   **其他控制台方法**数字 :
    -   `console.time` - 以毫秒计算完成事件所需的时间
    -   `console.assert` - 声明是真实的
    -   `console.count` - 数一下发生多少事
-   **JSON 内置序列化** - 对象、函数和 DOM 元素可编码或解码为 JSON

## 安装

```sh
yarn add console-feed
# or
npm install console-feed
```

## 基本用途

[代码框](https://codesandbox.io/s/rl7pk9w2ym)

```js
import React from 'react'
import { Hook, Console, Decode } from 'console-feed'

class App extends React.Component {
  state = {
    logs: []
  }

  componentDidMount() {
    Hook(window.console, log => {
      this.setState(({ logs }) => ({ logs: [...logs, Decode(log)] }))
    })

    console.log(`Hello world!`)
  }

  render() {
    return (
      <div style={{ backgroundColor: '#242424' }}>
        <Console logs={this.state.logs} variant="dark" />
      </div>
    )
  }
}
```

## 主张 `<Console />` 组件

### `logs: Log[]`

由日志对象组成的数组 。 需求

### `filter?: Methods[]`

过滤日志, 只显示某些方法的信息 .

### `variant?: 'light' | 'dark'`

设置组件的字体颜色。 默认 - `light`

### `style?: Styles`

定义组件上的自定义样式 - 参见 [`Styles.d.ts`](https://github.com/samdenty99/console-feed/blob/master/src/definitions/Styles.d.ts)

### `searchKeywords?: string`

过滤日志的字符串值

### `logFilter?: Function`

如果您想要使用自定义日志过滤功能, 您可以提供自己的执行

## 日志方法

每个日志都有指定的方法. 该方法用于确定信件的样式和用于 `filter` 道具 (英语).

```ts
type Methods =
  | 'log'
  | 'warn'
  | 'error'
  | 'info'
  | 'debug'
  | 'command'
  | 'result'
```

## `Log` 对象

日志对象包括以下内容:

```ts
type Logs = Log[]

interface Log {
  // The log method
  method: Methods
  // The arguments passed to console API
  data: any[]
}
```

## 序列化

默认使用时 `Hook()` API,日志被序列化,以便安全工作 `JSON.stringify`。为了将日志恢复到兼容格式 `<Console />` 组件,您需要调用 `Decode()` 方法.

### 禁用序列化

如果 `Hook` 函数和 `<Console />` 组件的源代码相同,可以禁用序列化来增加性能.

```js
Hook(
  window.console,
  log => {
    this.setState(({ logs }) => ({ logs: [...logs, log] }))
  },
  false
)
```

* * *

## 发展中国家

运行 `console-feed` 本地, 只需运行 :

```bash
yarn
yarn start
yarn test:watch
```

头去 `http://localhost:3000` 在浏览器中,你会看到演示页出现。 在你做出修改后,你需要重新装入,但笑话测试会自动重启.

## 常见问题

### @builder\.io/console-feed 是什么？

从当前页面显示控制台日志、 iframe 或通过服务器传输的反射组件

### 如何安装 @builder\.io/console-feed？

在项目目录运行 npm install @builder\.io/console-feed，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^15\.x \|\| ^16\.x）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @builder\.io/console-feed 支持 TypeScript 吗？

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

### @builder\.io/console-feed 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @builder\.io/console-feed 可以商用吗？

@builder\.io/console-feed 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @builder\.io/console-feed 的下载量有多少？

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

### @builder\.io/console-feed 还在维护吗？

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