Storybook Console Logs

Storybook addon for displaying console logs in `Actions` panel.

Table of Contents

• Getting started
• How to use

Getting started

1. Install the addon:

yarn add @storybook-extras/console -D

1. Add the addon

// .storybook/main.ts
import { StorybookConfig } from '@storybook/angular';
import { ExtrasConfig } from '@storybook-extras/preset';

const config: StorybookConfig & ExtrasConfig = {
    ...
    "addons": [
        "@storybook-extras/console",
        ...
    ],
    ...
}

export default config;

How to use

• This addon uses the Actions panel from @storybook/addon-actions to display the console output.
• This is helpful if you need to focus on the console output of the application.
• To enable the addon, you need to add the console property to the parameters object in the preview.js file.

// .storybook/preview.ts
export const parameters = {
    console: {
        disable: false,
        patterns: [/^dev$/],
        omitFirst: true,
    },
};

Currently, the patterns property is used to match the first argument of the console methods debug, log, info, warn& error. This allows developers to use special context for their app logs. For example: console.log('dev', data); will be matched using the /^dev$/ pattern, and will trigger an action that shows up in the Actions panel. You can use the omitFirst property to make sure the dev item does not show, only other arguments will show up.