主控台

在 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

使用指定的擴充功能選項包裝您的故事。如果您未在 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]	字串	"console"	選填。在動作記錄器中顯示 `console.log` 輸出的標記
[warn]	字串	"warn"	選填。在動作記錄器中顯示警告的標記
[error]	字串	"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)],
};

貢獻

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 註解。

鳴謝

由

unional

標籤

如何安裝擴充功能建立擴充功能