控制台

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

74k

每周下载量

由 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方法以及未捕获的错误。默认情况下，它只是将所有控制台消息反映在动作记录器面板中（应作为 peerDependency 安装），除了 [HMR] 日志。

@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

使用指定的插件选项包装你的故事。如果你没有在选项参数中传递 {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]	string	"console"	可选。用于在动作记录器中显示`console.log`输出的标记。
[warn]	string	"warn"	可选。用于在动作记录器中显示警告的标记。
[error]	string	"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)],
};