主控台

在 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 方法，以及未捕獲的錯誤。預設情況下，它只會將所有主控台訊息反映在動作記錄器面板中（應作為對等依賴項安裝），除了 [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

使用指定的擴充功能選項包裝您的故事。如果您在 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 的內部 typedef
屬性

名稱	類型	預設值	描述
[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 的內部 typedef
傳回：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)],
};