A React component that displays console logs from the current page, an iframe or transported across a server.
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
- 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 eventsconsole.assert- assert that a statement is truthyconsole.count- count how many times something occurs
- Inbuilt JSON serialization - Objects, Functions & DOM elements can be encoded / decoded to and from JSON
yarn add console-feed
# or
npm install console-feedimport 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 (
<div style={{ backgroundColor: '#242424' }}>
<Console logs={this.state.logs} variant="dark" />
</div>
)
}
}OR with hooks:
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 <Console logs={logs} variant="dark" />
}
export { LogsContainer }An array consisting of Log objects. Required
Filter the logs, only displaying messages of certain methods.
Sets the font color for the component. Default - light
Defines the custom styles to use on the component - see Styles.d.ts
A string value to filter logs
If you want to use a custom log filter function, you can provide your own implementation
To fully customize layout and rendering of the console feed, you can provide your own React
components. Currently, only the Message component is customizable.
Each log has a method assigned to it. The method is used to determine the style of the message and for the filter prop.
type Methods =
| 'log'
| 'debug'
| 'info'
| 'warn'
| 'error'
| 'table'
| 'clear'
| 'time'
| 'timeEnd'
| 'count'
| 'assert'A log object consists of the following:
type Logs = Log[]
interface Log {
// The log method
method: Methods
// The arguments passed to console API
data: any[]
}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 <Console /> component, you need to call the Decode() method.
If the Hook function and the <Console /> component are on the same origin, you can disable serialization to increase performance.
Hook(
window.console,
(log) => {
this.setState(({ logs }) => ({ logs: [...logs, log] }))
},
false
)You can limit the number of keys/elements included when serializing objects/arrays.
Hook(
window.console,
(log) => {
this.setState(({ logs }) => ({ logs: [...logs, log] }))
},
true,
100 // limit to 100 keys/elements
)To run console-feed locally, simply run:
yarn
yarn start
yarn test:watchHead 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.
