Storybook Addon Console

原因

有些情况下，您无法 / 不想 / 忘记保持浏览器控制台打开。这个插件可以帮助您在 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。

面板

插件 console 没有自己的 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>	[]	可选。任何匹配至少一个正则表达式的内容都将从开发者工具控制台输出中排除
[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 编辑

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

致谢