JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 550
  • Score
    100M100P100Q102443F
  • License MIT

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

Package Exports

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@storybook-extras/console) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    logo

    Storybook Console Logs

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

    Table of Contents

    Getting started

    1. Install the addon:
    yarn add @storybook-extras/console -D
    1. Add the addon
    // .storybook/main.js
module.exports = {
    ...
    "addons": [
        "@storybook-extras/console",
        ...
    ],
    ...
}

    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.js
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.