Clear console logging for every browser

Overview

Console.log wrapper

Safe, clear console logging for every browser

Log to the console — even legacy browsers without a console. Just pass any data to log() and you'll see it printed clearly and well-structured in the console.

If the browser doesn't have a console, Firebug Lite will load. You can pass any variable type: strings, objects, arrays, functions, etc.

Demo: patik.github.io/console.log-wrapper

Installation

npm: npm install consolelog

Bower: bower install consolelog

Or just download consolelog.js and reference it in your page with a <script> tag.

Usage

Use log() wherever you want to write to the console.

AMD with RequireJS

Consolelog.js is AMD-compliant and supports Common JS:

require(['consolelog'], function(log) {
    log('It works!');
});

Settings

You can change some optional preferences by passing an object to log.settings(). The defaults are shown below.

log.settings({
    lineNumber: true,
    group: {
        label: 'Log:',
        collapsed: false
    }
});
  • lineNumber (Boolean)
    • Whether to append the actual line number to each log. Not supported by all browsers.
  • group (Boolean or object)
    • Groups the arguments for each log together
    • collapsed: true will collapse each group (in browsers that support collapsing)
    • label: "some string" sets the label or name for the groups
    • Simply setting group: true is a shorthand way of selecting the defaults

Detail Print

This is an optional plugin to provide help information about the data that is being logged, especially in IE and older browsers. Just include consolelog.detailprint.js along with consolelog.js.

Firebug, WebKit's Developer Tools, and Opera's Dragonfly print useful, interactive items to the console. For example:

console.log(
    "Here's a string",
     3.14,
     {"alpha": 5, "bravo": false},
     document.getElementById('charlie'),
     new Date()
);

Results in:

Firebug running in Firefox

Some browsers that have a primitive console — one that does not expand arrays, does not link DOM elements to the source code, only prints objects as [object Object] rather than listing their properties, etc.

IE8 without Detail Print

Some cannot accept multiple arguments to a single console.log call. This includes IE 7/8/9/10, iOS 5 and older, and Opera 11 and older, among others.

Using the detailPrint companion plugin, special objects are presented in a more readable manner.

IE8 with Detail Print

Demo

patik.github.io/console.log-wrapper

Documentation

patik.com/blog/complete-cross-browser-console-log

License

Console.log-wrapper is released under the ISC license.

Comments
  • Detect IE11

    Detect IE11

    IE 11 doesn't have MSIE in the UA, It does have "Trident" though:

    Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; .NET4.0E; rv:11.0) like Gecko

    opened by SamHasler 7
  • Loading fails in IE8 if using es5-shim

    Loading fails in IE8 if using es5-shim

    Part of es5-shim defines Function.prototype.bind, but restricts that the bind can only bind a function. The first thing that console-log does is check for IE9 by using Function.prototype.bind then binding the console functions, which IE8 thinks are objects, thus failing.

    Is this a bug with console-log wrapper because it doesn't fully check for IE9, or es5-shim for not excepting objects for binding?

    enhancement 
    opened by Naddiseo 7
  • The wrapper will fail on iOS <6 for multiple logged values

    The wrapper will fail on iOS <6 for multiple logged values

    Hi there, I figured updating your code is better for the community than forking it, so...

    instead of writing:

    // Opera 11 & iOS <6 if (window.opera) {

    one should use something like this:

    var btest=window.navigator.userAgent.match(/OS ([0-9]{1})_([0-9]{1})/), mobileVersion = btest ? 1*(btest[1]+"."+btest[2]) : 0; // Opera 11 & iOS <6 if (window.opera || ({"iPad":1,"iPhone":1,"iPod":1}[window.navigator.platform] && mobileVersion < 6)) {

    this way iOS that were not updated to iOS yet (e.g. the iPad 1) also present usefull log-data in cases where multiple values were passed to window.log() iOS 5 and earlier writes "[Object]" to the console if more than one value was passed.

    opened by JoernBerkefeld 7
  • IE9 - firebug lite pops up automatically

    IE9 - firebug lite pops up automatically

    Experiencing an issue in IE9, where firebuglite automatically opens everytime.

    I've discovered this ever while opening the IE f12 developer tools

    Function.prototype.bind: 'this' is not a Function object Line 7, character 13

    image

    end users reported this, and I was able to reproduce and simulate using browserstack Win7/Ie9

    image

    bug 
    opened by tom-daly 6
  • Show the original line of code

    Show the original line of code

    if I use log(123) from console.log-wrapper, it will shows something like [123] consolelog-min.js:10.

    Could you make it show the original line of code like 123 myfile.js:20

    opened by cwtuan 2
  • Call of Call isn't just call? from same Function prototype

    Call of Call isn't just call? from same Function prototype

    At line 95 in consolelog.js

    Isn't calling call reduntant? In my opinion since call output depends solely on its context it becomes redundant in my opinion.

    Function.prototype.call.call == Function.prototype.call == funcNOP.call.
    

    therefore.

    Function.prototype.call.call(console.log, console, Array.prototype.slice.call([args[i]])) == console.log.call(console, Array.prototype.slice.call([args[i]]) )
    

    In turn we see that log already is called in the console context, making, if no context change is expected,

    console.log.call(console, Array.prototype.slice.call([args[i]]) ) == console.log(Array.prototype.slice.call([args[i]]) )
    

    Can you confirm this assertion? This was just what caught my eye, never tested it

    opened by joaolpinho 2
  • IE8 error when dev tools are not open

    IE8 error when dev tools are not open

    When I click blue log button on the demo page, yellow js warning shows up in IE8. The error is "console is undefined" in consolelog.js. Though if I refresh the page using F5, everything works as expected. When I open new tab and go to the demo page log still doesn't work.

    opened by smolyakoff 2
  • Bower tag

    Bower tag

    Hi there, great work on this library. However, I am trying to load the library in using bower and I have an issue. In my bower.json file I have the following entry in the dependencies:

    "consolelog": "2.0.1"
    

    When I run "bower update" I get the error:

    bower consolelog#2.0.1             ENORESTARGET No tag found that was able to satisfy 2.0.1
    
    opened by cjmyles 2
  • Demo fails on Safari 8.0.3 under OS-X 10.10.2

    Demo fails on Safari 8.0.3 under OS-X 10.10.2

    [Error] TypeError: undefined is not an object (evaluating 'suffix.substr')
        _getLineFromStack (consolelog.js, line 99)
        log (consolelog.js, line 146)
        log (demo.js, line 8)
        execute (demo.js, line 93)
    
    opened by dkirkby 1
  • Opera Dragonfly behaviour changed

    Opera Dragonfly behaviour changed

    Just for info: Opera's behaviour changed a while ago, and from what I can see it now behaves the same way as, say, Chrome DevTools. You may be able to simply drop the special-casing and extra while loop.

    opened by patrickhlauke 1
A lightweight structured logging tool for Node.js without any dependencies

structlog A lightweight structured logging tool for Node.js without any dependencies. Example By default this tool will generate logs like the followi

Yakko Majuri 4 May 26, 2022
Console.log with style.

Log Console.log with style Demo Features Safely call log (instead of console.log) in any browser. Use markdown syntax for quick formatting: italic — l

Adam Schwartz 3k Dec 30, 2022
A small logging proxy server for intercepting and logging code completion requests from copilot.

PilotWatch PilotWatch is a small logging proxy server written in node.js for intercepting and logging code completion requests from Github's Copilot.

John Robinson 7 May 8, 2023
:ledger: Minimal lightweight logging for JavaScript, adding reliable log level methods to wrap any available console.log methods

loglevel Don't debug with logs alone - check out HTTP Toolkit: beautiful, powerful & open-source tools for building, testing & debugging HTTP(S) Minim

Tim Perry 2.3k Jan 6, 2023
A simple Chromium browser extension to every so often Rickroll yourself. Every link you click has a 1% chance of being a Rickroll.

Rick Rollette A simple Chromium browser extension to every so often Rickroll yourself. Every link you click has a 1% chance of being a Rickroll. How t

Davi Augusto Moreira da Silva 43 Jun 9, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
A PostgreSQL client with strict types, detailed logging and assertions.

Slonik A battle-tested PostgreSQL client with strict types, detailed logging and assertions. (The above GIF shows Slonik producing query logs. Slonik

Gajus Kuizinas 3.6k Jan 3, 2023
Tritan is a Discord.js bot that has many general-purpose features such as logging, moderation, image manipulation, music, and much more!

Tritan Bot Tritan Bot is a Discord Verified general purpose bot built with discord.js and express (yes, it has a dashboard included). Please read thro

Dylan J. 0 Jul 3, 2022
Full logging system using the djs library (v13.6.0)

Loggin-system-djs-v13.6 Full logging system using the djs library (v13.6.0) NOW ONTO MULTIPLE DISCLAIMERS: ◻ It is crucial that you first understand t

NoBoDy 12 Aug 26, 2022
A lightweight structured logging tool for Node.js without any dependencies

structlog A lightweight structured logging tool for Node.js without any dependencies. Example By default this tool will generate logs like the followi

Yakko Majuri 4 May 26, 2022
Tritan is a Discord.js bot that has many general-purpose features such as logging, moderation, image manipulation, music, and much more!

Tritan Bot Tritan Bot is a Discord Verified general purpose bot built with discord.js and express (yes, it has a dashboard included). Please read thro

Team Tritan 5 Nov 19, 2022
Unified JavaScript logging system. KISS, light and library free.

Logger.js Logger.js is a JavaScript ES6 module that offers a unified console output across Firefox and Chromium based browsers. It handles standard er

Arthur Beaulieu 1 Oct 1, 2020
A enhanced web storage with env support, expire time control, change callback and LRU storage clear strategy.

enhanced-web-storage A enhanced web storage with env support, expire time control, change callback and LRU storage clear strategy. How to Start import

Ziwen Mei 15 Sep 10, 2021
A to do list where you can add tasks, mark completed tasks and clear all completed tasks.

To Do List A to do list where you can add tasks, mark completed tasks and clear all completed tasks. You can rearrange the order of the tasks by doubl

Amira 7 Mar 4, 2022
This is a Microverse (@microverseinc) project in which I created a To-do list using Webpack. User can add a task, delete it, edit its description, and clear the completed tasks.

Microverse To-Do list This is a Microverse (@microverseinc) project in which I created a To-do list using webpack. Requirements Build a Todo list usin

Manel Hammouche 11 Aug 3, 2022
A meditating website to clear your mind. Built with Next.JS and TailwindCSS ♥

Meditate A modern meditation web app for you to meditate on your own terms. Track your progress and share your thoughts with others. Table of Contents

Andy 5 Jul 27, 2022
An interactive list of tasks where you can add, remove, edit, mark as completed and clear all done tasks. Tested with Jest.

To do List This project its an interactive list of task where you can add and remove tasks dinamically Project Images Add new Tasks Edit Existing Task

Alex Puente 7 Nov 9, 2022
A Todo list app that allows the user to add tasks, delete, edit, chage, and clear all completed tasks. Built with JavaScript, CSS and Html.

To Do list: interactive list description: A todo list app that allow users to add new task, delete, edit, and clear all completed.Built with JavaScrip

IBRAHIM AHMAT 7 Aug 4, 2022