A Storybook addon that redirects console output (log, warn, error) into the Storybook action logger panel.
Storybook Addon Console is a deprecated Storybook addon that redirects console output (such as logs, warnings, and errors) from your components into Storybook's action logger panel. It solved the problem of needing to keep the browser console open to view debug messages, especially on mobile devices or small screens, by integrating console output directly into the Storybook interface.
Frontend developers and UI engineers using Storybook for component development and testing, who need to debug console output within their Storybook environment.
Developers chose this addon because it provided a seamless way to view and filter console messages within Storybook, associating logs with specific stories for easier debugging, without relying on the browser's developer tools.
storybook-addon. Redirects console output into action logger panel
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
It captures console.log, warn, and error outputs and redirects them to Storybook's action logger, eliminating the need to keep the browser console open during debugging, as shown in the live demo.
Using the withConsole decorator, it prefixes console messages with story paths, making it easy to identify which component or story emitted each log, which is highlighted in the API examples.
Supports filtering console output using regular expressions via panelExclude and panelInclude options, allowing developers to control noise and focus on relevant messages, as detailed in the addonOptions.
Designed to make console output accessible on mobile devices or when screen space is limited by integrating logs directly into Storybook, addressing a key use case mentioned in the README.
Officially deprecated with Storybook 9, meaning no future updates, bug fixes, or support, and users are encouraged to migrate to native Storybook features instead.
Relies on addon-actions as a peer dependency for UI output, adding an extra setup step and potential compatibility issues that aren't needed with modern Storybook versions.
Enabling HMR logs requires manual tweaking with setConsoleOptions and handling panelExclude arrays, which can be error-prone and non-intuitive for beginners.
Filtering is restricted to regular expressions, which may not suffice for complex debugging scenarios like conditional logging or filtering based on object properties.