JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Console.message

    Console messages for cool kids
    Filed under  › 

    • 🔾25%Overall
    • 774
    • 37.2 days
    • 🕩17
    • 👥5

    console.message

    Console messages for cool kids

    Examples

    Cool kids

    console.message().text('Cool kids', {
        fontSize: 200,
        color: 'hsl(330, 100%, 50%)',
        textShadow: '0 2px 0 hsl(330, 100%, 25%), 0 3px 2px hsla(330, 100%, 15%, 0.5), /* next */ 0 3px 0 hsl(350, 100%, 50%), 0 5px 0 hsl(350, 100%, 25%), 0 6px 2px hsla(350, 100%, 15%, 0.5), /* next */ 0 6px 0 hsl(20, 100%, 50%), 0 8px 0 hsl(20, 100%, 25%), 0 9px 2px hsla(20, 100%, 15%, 0.5), /* next */ 0 9px 0 hsl(50, 100%, 50%), 0 11px 0 hsl(50, 100%, 25%), 0 12px 2px hsla(50, 100%, 15%, 0.5), /* next */ 0 12px 0 hsl(70, 100%, 50%), 0 14px 0 hsl(70, 100%, 25%), 0 15px 2px hsla(70, 100%, 15%, 0.5), /* next */ 0 15px 0 hsl(90, 100%, 50%), 0 17px 0 hsl(90, 100%, 25%), 0 17px 2px hsla(90, 100%, 15%, 0.5)',
        fontFamily: '\'Permanent Marker\', cursive'
    }).print();
    

    cool kids example

    Used in jsblocks

    console.message()
        .span({ fontWeight: 'bold'})
        .text('Arguments mismatch:', { background: 'yellow' })
        .text(' ')
        .span({ background: '#eee' })
        .text('addTodo(')
        .text(' ? ', { background: 'red', color: 'white' })
        .text(')')
        .spanEnd()
        .text(' - ')
        .text('less arguments than the required specified', { color: 'red' })
        .print();
    

    console.message example

    Grouping awesomeness

    console.message()
        .group()
        .text('Error occurred while executing code', { color: 'red', fontSize: 24 })
            .group(false)
            .text('For more information expand the group', { color: 'green' })
            .line()
            .text('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.')
            .print();
    

    grouping awesomeness example

    Browser support

    The project supports Chrome, Firefox, Safari, Opera, IE7+. It fallbacks to messages without styles when they are not supported.

    API

    text(text:string)

    Appends a text to the current message. All styles in the current span are applied.

    console.message().text('this is equal to just calling console.log()').print();
    
    console.message()
        .text('Error: ', { color: 'red' })
        .text('this is more useful scenario')
        .print();
    

    text() example

    element(element:HTMLElement)

    Adds an interactive DOM element to the output.

    console.message()
        .text('Hey take a look at the page body')
        .element(document.body)
        .print();
    

    element() example

    object(object:Object)

    Adds an interactive object tree to the output.

    console.message()
        .text('Hey take a look at the this object ')
        .object({ firstName: 'John', lastName: 'Doe' })
        .print();
    

    object() example

    span(styles:Object)

    Starts a span with particular style and all appended text after it will use the style.

    console.message()
        .span({ color: 'red' })
        .text('this is red! ')
            .span({ color: 'green' })
            .text('this is green! ')
            .spanEnd()
        .text('this is again red!')
        .spanEnd()
        .print();
    

    span() example

    spanEnd()

    Ends the current span styles and backs to the previous styles or the root if there are no other parents. Take a look at the example above.

    group(expanded:boolean = true)

    Begins a group. By default the group is expanded. Provide false if you want the group to be collapsed.

    console.message()
        // pass false if you want to create a collapsed group
        .group()
        .text('The group header text')
        .line()
        .text('The group content')
        .groupEnd()
        .print();
    

    group() example

    groupEnd()

    Ends the group and returns to writing to the parent message.

    console.message()
            .group(false)
            .text('group')
            .groupEnd()
        .text('Outside of group')
        .print();
    

    groupEnd() example

    line()

    Adds a new line to the output.

    console.message()
        .text('first line')
        .line()
        .text('second line')
        .print();
    

    line() example

    Prints the message to the console. Every message chaining should end with print. No print() call no message.

    console.message().text('just text').print();
    
    Show All