# console-log-component

> Output log messages to display instead developer tool.

Latest version **1.1.0** (published 2018-02-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install console-log-component
pnpm add console-log-component
yarn add console-log-component
bun add console-log-component
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2018-02-07 |
| First published | 2018-02-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 254.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | yes |
| GitHub stars | 1 |
| Author | trifort |
| Maintainers | trifort |
| Keywords | console, log, debug, tool |

## Links

- npm: https://www.npmjs.com/package/console-log-component
- Repository: https://github.com/trifort/console-log-component
- Homepage: https://github.com/trifort/console-log-component#readme
- Issues: https://github.com/trifort/console-log-component/issues
- npm.io page: https://npm.io/package/console-log-component

## Dependencies (3)

- [error-stack-parser](https://npm.io/package/error-stack-parser.md) ^2.0.1
- [intersection-observer](https://npm.io/package/intersection-observer.md) ^0.5.0
- [function.name-polyfill](https://npm.io/package/function.name-polyfill.md) ^1.0.5

## Recent versions

- 1.1.0 (latest) — 2018-02-07
- 1.0.0 — 2018-02-07

## README

# ConsoleLogComponent
[![npm version](https://badge.fury.io/js/console-log-component.svg)](https://www.npmjs.com/package/console-log-component)

ブラウザ標準のconsoleオブジェクトのメソッドを置き換え、
`console.log`などの結果を開発者ツールだけでなくコンテンツ画面上にも表示します。

## Download
- [consoleLogComponent.js](https://trifort.github.io/console-log-component/docs/1.0.0/consoleLogComponent.js)

## Usage
In a browser:
```html
<script src="consoleLogComponent.js"></script>
<script>
  var Console = ConsoleLogComponent.init()
</script>
```

Using npm:
```sh
$ npm i -S console-log-component
```
```js
import ConsoleLogComponent from 'console-log-component'
const Console = ConsoleLogComponent.init()
```

## Options
|Name|Type|Default|Description|
|---|---|---|---|
|menuPosition|`String`|`right bottom`|メニューボタンの表示位置。縦方向（top、middle、bottom）と横方向（left、center、right）の値をスペース区切りで指定する。|

### `menuPosition`
```js
const Console = ConsoleLogComponent.init({
  menuPosition: 'top left'
})
```

## API

### `show()`
DisplayConsoleのDOMを表示する。

### `hide()`
DisplayConsoleのDOMを非表示にする。

### `clear()`
表示されているログを消去する。

### `destroy()`
DisplayConsoleインスタンスを破棄する。

### `output(type, frame, values)`
DisplayConsoleのDOMにログ出力を追加する。

|Name|Type|Description|
|---|---|---|
|type|`String`|出力タイプ。log、error、warnなどconsoleのメソッド名と共通。|
|frame|`Object`|実行ファイル名や行番号などの情報を持つオブジェクト。|
|values|`Array`|出力内容。console.logなどの引数に相当する可変長配列。可変長引数をメソッド側で配列化する。|

## License
MIT

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