# @storybook-extras/console

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

Latest version **0.0.68** (published 2023-03-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @storybook-extras/console
pnpm add @storybook-extras/console
yarn add @storybook-extras/console
bun add @storybook-extras/console
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.68 |
| Published | 2023-03-01 |
| First published | 2023-01-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=16 |
| Dependencies | 0 |
| Unpacked size | 11.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17 |
| Author | Mostafa Sherif |
| Maintainers | mosherif87 |
| Keywords | storybook, addons, extras, console, actions, panel |

## Links

- npm: https://www.npmjs.com/package/@storybook-extras/console
- Repository: https://github.com/sheriffMoose/storybook-extras
- Homepage: https://github.com/sheriffMoose/storybook-extras/tree/master/packages/console#readme
- Issues: https://github.com/sheriffMoose/storybook-extras/issues
- Funding: https://github.com/sheriffMoose/storybook-extras?sponsor=1
- npm.io page: https://npm.io/package/@storybook-extras/console

## Recent versions

- 0.0.68 (latest) — 2023-03-01
- 0.0.51--canary.21.4060555582.0 (canary) — 2023-02-01
- 0.0.67 — 2023-02-11
- 0.0.66 — 2023-02-05
- 0.0.65 — 2023-02-05
- 0.0.64 — 2023-02-04
- 0.0.63 — 2023-02-04
- 0.0.62 — 2023-02-04
- 0.0.61 — 2023-02-04
- 0.0.60 — 2023-02-04
- 0.0.59 — 2023-02-04
- 0.0.58 — 2023-02-03
- 0.0.57 — 2023-02-03
- 0.0.56 — 2023-02-03
- 0.0.55 — 2023-02-03
- … 33 more at https://npm.io/package/@storybook-extras/console/versions

## README

<div align="center">

<img src="https://raw.githubusercontent.com/sheriffMoose/storybook-extras/master/logos/console.svg" alt="logo" width="200" />

<h1>Storybook Console Logs</h1>

<p>Storybook addon for displaying console logs in `Actions` panel.</p>

![][img.node]
![][img.npm]
[![][img.storybook]][link.npm]

[![][img.banner]][link.npm]

</div>

<h2>Table of Contents</h2>

- [Getting started](#getting-started)
- [How to use](#how-to-use)

## Getting started

1. Install the addon:

```shell
yarn add @storybook-extras/console -D
```

1. Add the addon

```ts
// .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.

```ts
// .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.




[img.node]:
https://img.shields.io/node/v/@storybook-extras/console?logo=node.js&logoColor=white&labelColor=339933&color=grey&label=
[img.npm]:
https://img.shields.io/npm/v/@storybook-extras/console?logo=npm&logoColor=white&labelColor=CB3837&color=grey&label=

[img.storybook]:
https://img.shields.io/npm/dependency-version/@storybook-extras/console/dev/storybook?logo=storybook&logoColor=white&labelColor=FF4785&color=grey&label=

[img.banner]:
https://nodei.co/npm/@storybook-extras/console.png

[link.npm]:
https://npmjs.org/package/@storybook-extras/console

---
_Source: https://npm.io/package/@storybook-extras/console · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._