控制台

在 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] 日志之外。

@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)],
};

贡献

yarn storybook运行示例 Storybook。然后，你可以编辑位于src文件夹中的源代码和位于stories文件夹中的示例 Storybook。

运行测试

运行yarn test。

在监视模式下运行测试

运行yarn tdd。

测试覆盖率

运行测试后，你可以在.coverage/lcov-report/index.html中查看覆盖率详细信息。

调试

如果你使用的是 VSCode，你可以通过从调试菜单启动Jest Tests任务来调试测试和源代码。这允许你在*.test.js和*.js文件中设置断点。

自述文件编辑

请不要直接编辑此README.md。运行yarn dev:docs并更改docs/readme.hbs和src中的 JSDoc 注释。

鸣谢

制作人

unional

标签

如何安装附加组件创建附加组件