console-feed 

Sponsor this project


A React component that displays console logs from the current page, an iframe or transported across a server.

!Demo

Alternative to console-feed

https://github.com/liriliri/chii supports the embedding the entire Chrome devtools.

https://github.com/tachibana-shin/vue-console-feed is a fork for Vue.JS

Who's using it

- CodeSandbox.io
- Framer
- Plunker
- P5.js Editor
- Builder.io
- Utopia
- facebook/flipper
- Effector playground

Features

- Console formatting - style and give your logs color, and makes links clickable
- DOM nodes - easily inspect & expand HTML elements, with syntax highlighting
- console.table - view your logs in a table format
- Other console methods:
- console.time - view the time in milliseconds it takes to complete events
- console.assert - assert that a statement is truthy
- console.count - count how many times something occurs
- Inbuilt JSON serialization - Objects, Functions & DOM elements can be encoded / decoded to and from JSON

Install

``sh
yarn add console-feed


or


npm install console-feed
`

Basic usage

StackBlitz

`js
import React from 'react'
import { Hook, Console, Decode } from 'console-feed'

class App extends React.Component {
state = {
logs: [],
}

componentDidMount() {
Hook(window.console, (log) => {
this.setState(({ logs }) => ({ logs: [...logs, Decode(log)] }))
})

console.log(Hello world!)
}

render() {
return (



)
}
}
`

OR with hooks:

`js
import React, { useState, useEffect } from 'react'
import { Console, Hook, Unhook } from 'console-feed'

const LogsContainer = () => {
const [logs, setLogs] = useState([])

// run once!
useEffect(() => {
const hookedConsole = Hook(
window.console,
(log) => setLogs((currLogs) => [...currLogs, log]),
false
)
return () => Unhook(hookedConsole)
}, [])

return
}

export { LogsContainer }
`

Props for component

$3

An array consisting of Log objects. Required

$3

Filter the logs, only displaying messages of certain methods.

$3

Sets the font color for the component. Default - light

$3

Defines the custom styles to use on the component - see Styles.d.ts

$3

A string value to filter logs

$3

If you want to use a custom log filter function, you can provide your own implementation

$3

To fully customize layout and rendering of the console feed, you can provide your own React
components. Currently, only the Message component is customizable.

Log methods

Each log has a method assigned to it. The method is used to determine the style of the message and for the filter prop.

`ts
type Methods =
| 'log'
| 'debug'
| 'info'
| 'warn'
| 'error'
| 'table'
| 'clear'
| 'time'
| 'timeEnd'
| 'count'
| 'assert'
`

Log object

A log object consists of the following:

`ts
type Logs = Log[]

interface Log {
// The log method
method: Methods
// The arguments passed to console API
data: any[]
}
`

Serialization

By default when you use the Hook() API, logs are serialized so that they will safely work with JSON.stringify. In order to restore a log back to format compatible with the component, you need to call the Decode() method.

$3

If the Hook function and the component are on the same origin, you can disable serialization to increase performance.

`js
Hook(
window.console,
(log) => {
this.setState(({ logs }) => ({ logs: [...logs, log] }))
},
false
)
`

$3

You can limit the number of keys/elements included when serializing objects/arrays.

`js
Hook(
window.console,
(log) => {
this.setState(({ logs }) => ({ logs: [...logs, log] }))
},
true,
100 // limit to 100 keys/elements
)
`

---

Developing

To run console-feed locally, simply run:

`bash
yarn
yarn start
yarn test:watch
`

Head over to http://localhost:3000` in your browser, and you'll see the demo page come up. After you make changes you'll need to reload, but the jest tests will automatically restart.