@richlox/console-feed
    TypeScript icon, indicating that this package has built-in type declarations

    2.8.12 • Public • Published

    console-feed

    npm version CircleCI npm downloads Demo

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

    Demo

    Who's using it

    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

    yarn add console-feed
    # or 
    npm install console-feed

    Basic usage

    CodeSandbox

    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 (
          <div style={{ backgroundColor: '#242424' }}>
            <Console logs={this.state.logs} variant="dark" />
          </div>
        )
      }
    }

    Props for <Console /> component

    logs: Log[]

    An array consisting of Log objects. Required

    filter?: Methods[]

    Filter the logs, only displaying messages of certain methods.

    variant?: 'light' | 'dark'

    Sets the font color for the component. Default - light

    style?: Styles

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

    searchKeywords?: string

    A string value to filter logs

    logFilter?: Function

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

    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.

    type Methods = 
      | 'log'
      | 'warn'
      | 'error'
      | 'info'
      | 'debug'
      | 'command'
      | 'result'

    Log object

    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[]
    }

    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 <Console /> component, you need to call the Decode() method.

    Disabling serialization

    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
    )

    Developing

    To run console-feed locally, simply run:

    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.

    Install

    npm i @richlox/console-feed

    DownloadsWeekly Downloads

    3

    Version

    2.8.12

    License

    MIT

    Unpacked Size

    174 kB

    Total Files

    112

    Last publish

    Collaborators

    • avatar