控制台

在 Storybook 中显示控制台输出，如日志、错误和警告

144k

每周下载量

由 Storybook 制作

Storybook 控制台插件

为什么需要它

在某些情况下，你可能无法/不想/忘记保持浏览器控制台打开。这个插件可以帮助你在 Storybook 中获取所有控制台输出。在其他情况下，你可能会发现很难在控制台输出的信息噪音中提取所需的信息，或者难以确定是哪个组件在什么状态下发出的消息。有了这个插件，你可以控制你看到什么以及在哪里看到。

我们假设以下可能的应用场景

移动设备。当用户需要通过移动浏览器使用你的 Storybook 时，你可能希望他们能够访问控制台输出
小屏幕。保持浏览器控制台关闭可以节省屏幕空间
过滤控制台输出。你可以独立配置动作记录器和实际的控制台输出，具有广泛的控制范围。
将控制台消息与特定的组件/故事关联起来。你可以看到是哪个故事发出了哪条消息
将一些数据从你的深层组件输出到动作记录器，而无需为此导入 addon-actions。

尝试在线演示

安装

yarn add -D @storybook/addon-console @storybook/addon-actions

快速入门

只需将其导入到你的 storybook config.js 中

// config.js

import '@storybook/addon-console';

就这些。你将开始在动作记录器面板中收到所有控制台消息、警告和错误。除了 HMR 日志之外的一切。

如果你想启用 HMR 消息，请执行以下操作

// config.js

import { setConsoleOptions } from '@storybook/addon-console';

const panelExclude = setConsoleOptions({}).panelExclude;
setConsoleOptions({
  panelExclude: [...panelExclude, /deprecated/],
});

你将以 console、warn 和 error 动作的形式在面板中收到控制台输出。你可能想知道它们来自哪个故事。在这种情况下，添加 withConsole 装饰器

// preview.js

import type { Preview } from '@storybook/react';
import { withConsole } from '@storybook/addon-console';

const preview: Preview = {
  decorators: [(storyFn, context) => withConsole()(storyFn)(context)],
  // ...
};

之后，你在动作记录器中的消息将带有故事路径前缀，例如 molecules/atoms/electron: ["ComponentDidMount"] 或 molecules/atoms/electron error: ["Warning: Failed prop type..."]。你可以通过向 withConsole 或 setConsoleOptions 方法传递选项来设置插件行为，这两个方法具有相同的 API。

面板

控制台插件没有自己的 UI 面板来输出日志，而是使用 addon-console。请确保 main.js 包含这一行

// main.js

export default {
  addons: [
    "@storybook/addon-actions/register",
  ],
};

API

@storybook/addon-console

它处理 console.log、console.warn 和 console.error 方法以及未捕获的错误。默认情况下，它只是将所有控制台消息（除了 [HMR] 日志）反映到动作记录器面板中（应作为 peerDependency 安装）。

@storybook/addon-console
- 静态
  - .setConsoleOptions(optionsOrFn) ⇒ addonOptions
  - .withConsole([optionsOrFn]) ⇒ function
- 内部
  - ~addonOptions : Object
  - ~optionsCallback ⇒ addonOptions

@storybook/addon-console.setConsoleOptions(optionsOrFn) ⇒ addonOptions

设置插件选项并返回新选项

类型：@storybook/addon-console 的静态方法
参见

addonOptions
optionsCallback

参数	类型
optionsOrFn	addonOptions \| optionsCallback

示例

import { setConsoleOptions } from '@storybook/addon-console';

const panelExclude = setConsoleOptions({}).panelExclude;
setConsoleOptions({
  panelExclude: [...panelExclude, /deprecated/],
});

@storybook/addon-console.withConsole([optionsOrFn]) ⇒ function

使用指定的插件选项包装你的故事。如果你在 options 参数中没有传递 {log, warn, error}，它会从上下文为每个故事单独创建它们。因此，你将看到具体的日志或错误来自哪个故事。你可以在组件的生命周期方法中或在你的故事中进行日志记录。

类型：@storybook/addon-console 的静态方法
返回：function - wrappedStoryFn
参见

addonOptions
optionsCallback

参数	类型
[optionsOrFn]	addonOptions \| optionsCallback

示例

import type { Meta, StoryObj } from '@storybook/react';
import { withConsole } from '@storybook/addon-console';

const meta: Meta<typeof Button> = {
  title: 'Example/Button',
  component: Button,
};

export default meta;
type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: {
    primary: true,
    label: 'Button',
    onClick: () => console.log(['Data:', 1, 3, 4]),
  },
};
 // Action Logger Panel:
 // withConsole/with Log: ["Data:", 1, 3, 4]

@storybook/addon-console~addonOptions : Object

这些选项可以传递给 withConsole 或 setConsoleOptions

类型：@storybook/addon-console 的内部类型定义
属性

名称	类型	默认值	描述
[panelExclude]	[ 'Array' ].<RegExp>	[/[HMR]/]	可选。与至少一个正则表达式匹配的任何内容都将从动作记录器面板的输出中排除
[panelInclude]	[ 'Array' ].<RegExp>	[]	可选。如果设置，则只有匹配的输出会显示在动作记录器中。优先级高于 `panelExclude`。
[consoleExclude]	[ 'Array' ].<RegExp>	[]	可选。与至少一个正则表达式匹配的任何内容都将从 DevTool 控制台输出中排除
[consoleInclude]	[ 'Array' ].<RegExp>	[]	可选。如果设置，则只有匹配的输出会显示在控制台中。优先级高于 `consoleExclude`。
[log]	字符串	"console"	可选。在动作记录器中显示 `console.log` 输出的标记
[warn]	字符串	"warn"	可选。在动作记录器中显示警告的标记
[error]	字符串	"error"	可选。在动作记录器中显示错误的标记

@storybook/addon-console~optionsCallback ⇒ addonOptions

此回调可以传递给 setConsoleOptions 或 withConsole

类型：@storybook/addon-console 的内部类型定义
返回：addonOptions - - 新的 addonOptions

参数	类型	描述
currentOptions	addonOptions	当前的 addonOptions

示例

import { withConsole } from `@storybook/addon-console`;

const optionsCallback = (options) => ({panelExclude: [...options.panelExclude, /Warning/]});
export default {
  title: 'Button',
  decorators: [withConsole(optionsCallback)],
};