Storybook Addon Console 使用教程

最新推荐文章于 2024-09-26 07:34:28 发布

沈婕嵘Precious

最新推荐文章于 2024-09-26 07:34:28 发布

阅读量863

点赞数 16

本文链接：https://blog.csdn.net/gitblog_00377/article/details/142508667

版权

Storybook Addon Console 使用教程

storybook-addon-console storybook-addon. Redirects console output into action logger panel 项目地址: https://gitcode.com/gh_mirrors/st/storybook-addon-console

1. 项目介绍

Storybook Addon Console 是一个用于 Storybook 的插件，它能够将浏览器的控制台输出重定向到 Storybook 的 Action Logger 面板中。这对于在移动设备或小屏幕上查看控制台输出非常有用，因为它可以避免用户必须打开浏览器控制台才能查看日志。此外，该插件还可以帮助开发者过滤控制台输出，并将日志与特定的组件或故事关联起来，从而更容易地调试和分析问题。

2. 项目快速启动

安装

首先，你需要安装 @storybook/addon-console 和 @storybook/addon-actions：

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

配置

在 Storybook 的配置文件 config.js 中导入插件：

// config.js
import '@storybook/addon-console';

这样，你就可以在 Action Logger 面板中看到所有的控制台消息、警告和错误，除了 HMR（热模块替换）日志。

如果你希望启用 HMR 日志，可以这样做：

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

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

使用装饰器

如果你想将控制台消息与特定的故事关联起来，可以使用 withConsole 装饰器：

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

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

export default preview;

这样，Action Logger 中的消息将会带有故事的路径前缀，例如 molecules/atoms/electron: ["ComponentDidMount"]。

3. 应用案例和最佳实践

案例1：移动设备上的调试

在移动设备上，用户可能无法方便地打开浏览器控制台来查看日志。使用 Storybook Addon Console，你可以将所有的控制台输出重定向到 Storybook 的 Action Logger 面板中，从而方便用户在移动设备上查看日志。

案例2：过滤控制台输出

在大型项目中，控制台输出可能会非常冗长，难以找到有用的信息。通过配置 panelExclude 和 panelInclude，你可以过滤掉不需要的日志，只保留关键信息。

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

setConsoleOptions({
  panelExclude: [/HMR/, /deprecated/],
  panelInclude: [/important/],
});

最佳实践：与组件生命周期方法结合使用

在组件的生命周期方法中使用 console.log 或 console.warn 时，可以通过 withConsole 装饰器将这些日志与特定的故事关联起来，从而更容易地调试组件的行为。

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

export default {
  title: 'Example/Button',
  component: Button,
  decorators: [withConsole()],
};