Javascript Console API

It’s convenient for developers to use the console for debugging, but it’s even more convenient if there is a shell that takes into account the particular implementation of the console in various browsers, so the theme of wrappers for the console exists steadily.

We will consider previously published solutions, then we will review the methods of the console by translating a recent article by Axel Rauschmayer, a developer and consultant with more than 15 years of experience, then I will post some of my solutions that turned out to be successful in the process of evolution and debugging on a number of projects.
UPD 2015: updating the command table to the current state , Github (ru, en; deploy to javascript).

Console wrappers on Habré, reviews and documentation

" We use the console" to the full " " - shows ways of excellent processing of objects, taking into account the features of various browsers in the implementation.

Making the console a little more convenient - Replaces the original object, which solves some bugs. Perfectly fixes degradation of some browsers in the completeness of method support. All that remains is the length of writing native methods, which is a plus in terms of not exploring new names, but requires a set of original words. Can be solved by emmet type accelerators in the IDE.

simple wrapper for console.log - 2010 (English).
Console.Log: Say Goodbye to JavaScript Alerts for Debugging! (IE), 2011
dbug - a console wrapper (Github, 2009)
" Firebug * console API"- this article is somewhat more complete than the subsequent translation. Both of them will give mutually complementary information. (We will use the translation so that we do not manually test it ourselves, repeating the work done by the author.)

Axel Rauschmayer Blog Review Translation

Summary table with sorting methods alphabetically .
Most browsers have a global console object with methods for logging and debugging. It is not part of the language, but has become the de facto standard, first appearing in the Firebug debugger. Since the main goal for it is debugging, it is often used in development and rarely in working code.

How is the console standardized in various browsers?

Firebug was the first to promote the console API and its wiki documentation , more successfully than others approaching standardization. In addition, Brian Kardell and Paul Irish are working on the specification of the API, which in the future should give better consistency of browser behavior. Until now, their rules are quite different, so this article will give a general brief description. For more information, see the documentation for the various platforms.

Chrome: developers.google.com/chrome-developer-tools/docs/console-api/
Firebug: getfirebug.com/wiki/index.php/Console_API
Firefox: developer.mozilla.org/en-US/docs/Web/API / console
IExplorer: msdn.microsoft.com/en-us/library/ie/hh772183.aspx
Node.js: nodejs.org/api/stdio.html
Safari: Safari Developer Guide

Bug in IE9 : the console object exists if at least once the Developer Tools window was opened (Developer Tools, F12). Otherwise, a ReferenceError error occurs. As an option to bypass the bug, you need to check for the presence of an object and put a stub in case of absence.

Methods for easy logging

console. clear () - clear the console;
console. debug (object1, object2 ?, ...) is the same as console. log () (questions mean optional argument) ;
console. error (object1, object2 ?, ...) - logging parameters under the error icon (without stopping the code) and, possibly, a call stack trace and a link to the code are added.
  console. exception (errorObject, object1 ?, ...]) [only in Firebug] - objects with an interactive trace stack;
console. info(object1 ?, object2 ?, ...) - logging to the console; in browsers it may be marked with an icon and may have a stack trace or link; printf templates are supported , as in console.log.
console. log (object1 ?, object2 ?, ...) - logging to the console. If the first argument is a string in the format of printf directives , it formats the values ​​of the remaining arguments. Example (Node.js REPL):

    > console.log('%s', { foo: 'bar' })
    [object Object]
    > console.log('%j', { foo: 'bar' })
    {"foo":"bar"}

The only reliable cross-platform formatting directive is '% s'. Node.js supports '% j' for JSON data. Browsers can support other interactive directives for the console (more details here (Russian)) .

console. trace () - showing the interactive stack of function calls in browsers (call stack that led to code execution at a given point, similar to what we see in error messages);
console. warn (object1 ?, object2 ?, ...) - logging under the warning icon; may contain a stack trace or link. Printf patterns are supported , as in console.log.

	Chrome	Firebug	Firefox	IE	Node.js	Safari
clear ()	✓	✓	-⊝-	✓	-⊝-	✓
debug ()	✓	✓	✓	✓	-⊝-	✓
error ()	✓	✓	✓	✓	✓	✓
exception ()	-⊝-	✓	-⊝-	-⊝-	-⊝-	-⊝-
info ()	✓	✓	✓	✓	✓	✓
log ()	✓	✓	✓	✓	✓	✓
trace ()	✓	✓	✓	✓	✓	✓
warn ()	✓	✓	✓	✓	✓	✓

Methods for checking and counting

console. assert (expr, obj?) - if the first argument is false, then displays the object in the console and throws an exception; if true - does nothing;
console. count (label?) - counts how many times a function met with this label.

	Chrome	Firebug	Firefox	IE	Node.js	Safari
assert ()	✓	✓	-⊝-	✓	✓	✓
count ()	✓	✓	-⊝-	✓	-⊝-	✓

Methods for logs with formatting

console. dir (object) - displays a representation of the object in the console. It can be interactive - expand, view in other tool tabs (in Node.js - without interactivity).
console. dirxml (object) - Outputs an XML tree of an HTML or XML element.
console. group (object1 ?, object2 ?, ...) - starts outputting a collapsible object in the console containing groups of specified and future values ​​in each new line. The block is declared the completed command console.groupEnd () and is initially expanded for viewing, but can be minimized-expanded manually (by mouse).
console. groupCollapsed (object1 ?, object2 ?, ...) - works similar to console.group (), but the block is initially collapsed.
console. groupEnd () - closes the group that was started by console.group () or console.groupCollapsed ().
console. table (data, columns?) - displays the array as a table, one element per row. An additional argument indicates which array properties are displayed in the columns. If omitted, all properties are displayed. Non-existent properties are displayed in the columns as undefined.

    var persons = [
        { firstName: 'Jane', lastName: 'Bond' },
        { firstName: 'Lars', lastName: 'Croft', age: 72 }
    ];
    // Эквивалентные записи:
    console.table(persons);
    console.table(persons, ['firstName', 'lastName', 'age']);

We will see in the console:

(index)	firstName	lastName	age
0	"Jane"	"Bond"	undefined
1	"Lars"	"Croft"	72

	Chrome	Firebug	Firefox	IE	Node.js	Safari
dir ()	✓	✓	✓	✓	✓	✓
dirxml ()	✓	✓	-⊝-	✓	-⊝-	✓
group ()	✓	✓	✓	✓	-⊝-	✓
groupCollapsed ()	✓	✓	✓	✓	-⊝-	✓
groupEnd ()	✓	✓	✓	✓	-⊝-	✓
table ()	✓	✓	-⊝-	-⊝-	-⊝-	-⊝-

Profiling and Timing

console. markTimeline (label) - [Safari-only] same as timeStamp ().
console. profile (title?) - enable profiling. An optional argument is used for commenting in a report.
console. profileEnd () - stops profiling and displays a report.
console. time (label) - starts the timer with the specified label (name, identifier).
console. timeEnd (label) - stops the timer with a label and shows the counted time.
console. timeStamp (label?) - displays intermediate time samples for a timer with the specified label.

	Chrome	Firebug	Firefox	IE	Node.js	Safari
markTimeline ()	-⊝-	-⊝-	-⊝-	-⊝-	-⊝-	✓
profile ()	✓	✓	(devtools)	✓	-⊝-	✓
profileEnd ()	✓	✓	(devtools)	✓	-⊝-	✓
time ()	✓	✓	✓	✓	✓	✓
timeEnd ()	✓	✓	✓	✓	✓	✓
timeStamp ()	✓	✓	-⊝-	-⊝-	-⊝-	-⊝-

"(devtools)" means that the method will work if the developer toolbar is open.

Acknowledgments:
Two people contributed to this review: Matthias Reuter (@ gweax) and Philipp Kyeck (@ pkyeck).
--Author: Axel Rauschmayer. (End of translation.)

Summary table sorted alphabetically. (The links will help you see the details and read about Opera support in addition to this article. Brief notes about Opera from there have been added to the last column.)

	Chrome	Firebug	Firefox	IE	Node.js	Safari	Opera
assert ()	✓	✓	-⊝-	✓	✓	✓	±
clear ()	✓	✓	-⊝-	✓	-⊝-	✓	✓
count ()	✓	✓	-⊝-	✓	-⊝-	✓	±
debug ()	✓	✓	✓	✓	-⊝-	✓	±
dir ()	✓	✓	✓	✓	✓	✓	✓
dirxml ()	✓	✓	-⊝-	✓	-⊝-	✓	±
error ()	✓	✓	✓	✓	✓	✓	±
exception ()	-⊝-	✓	-⊝-	-⊝-	-⊝-	-⊝-	±
group ()	✓	✓	✓	✓	-⊝-	✓	✓
groupCollapsed ()	✓	✓	✓	✓	-⊝-	✓	✓
groupEnd ()	✓	✓	✓	✓	-⊝-	✓	✓
info ()	✓	✓	✓	✓	✓	✓	✓
log ()	✓	✓	✓	✓	✓	✓	±
markTimeline ()	-⊝-	-⊝-	-⊝-	-⊝-	-⊝-	✓	-⊝-
profile ()	✓	✓	(devtools)	✓	-⊝-	✓	-⊝-
profileEnd ()	✓	✓	(devtools)	✓	-⊝-	✓	-⊝-
table ()	✓	✓	-⊝-	-⊝-	-⊝-	-⊝-	-⊝-
time ()	✓	✓	✓	✓	✓	✓	±
timeEnd ()	✓	✓	✓	✓	✓	✓	±
timeStamp ()	✓	✓	-⊝-	-⊝-	-⊝-	-⊝-	-⊝-
trace ()	✓	✓	✓	✓	✓	✓	±
warn ()	✓	✓	✓	✓	✓	✓	✓

Thanks to the blog author for the up-to-date information and tables related to console methods. Charge with popcorn, continue the conversation. We have all the methods to use, but more often than not all of them are needed. Often, one but universal console.log is enough. There are many tasks where modest but cross-browser capabilities are needed.

Several snippets (code inserts with functions), for various applications

Everything above is beautiful, suitable as a reference, quite fully and well. But solutions are needed, not theory - after all, for each small task, similar solutions will be needed.

Experience has shown that it is not at all necessary to have exhaustive support for all functions - more often than not, one or more is enough, and service functions are more interesting: disable the console completely with one variable or expression (when the code is laid out for production), display only errors on the variable or prepare errors for sending technical support to the project, have a controlled output of messages in the form of several options.

Sophisticated and non-cross-browser functions are more likely not needed than they are needed: beautiful table output that does not allow debugging in IE or Safari will rather interfere and force you to return to the console settings level at inopportune moments.

Therefore, based on experience, the examples will be as simple as possible, but working without too much code. If you don’t need a piece of code, it’s easier to choose a less complex example for the project or page.

First we need to do our own inventions about what we need to have. Those who do not read someone’s fabrications can leave an article on this. Based on them, examples will be built.

1. Function code design.

Talk and choose a code design. This is not a page design, this is how the code will look in a text editor.

For debugging, we have 2 standard methods and, accordingly, design - functions like alert / confirm / prompt and console object methods. Replacing the standard names of functions and methods is still not always good. Except in cases when it is necessary to prevent implementation errors, as in IE. For my debugging, in my opinion, it is more advisable to choose a different name for the functions or their group. For example, I experimented with the word “Alert”, with a capital letter, but it seemed long after several projects, and I switched to “wcl ()” - a symbolic abbreviation for “window.console.log”. If you didn’t like the choice, substitute your option in the examples.

From “wcl ()” the remaining abbreviations logically and clearly follow - “wci” - window.console.info; wcw - window.console.warn; wce - window.console.error. Such words are rarely found in the names of variables, are quite short and are normally looked up by looking or searching for a project. We add wct () for timings, and wcc () to reset the console.

It is proposed to put these functions immediately into a global object. This will not clog the space of the global object, because at production they can be bite out of the project codes if you wish. And the application saves at least 2 characters or more than if they were in the object (such as C.log, C.err, ...).

This is not the end of the design - such a feint turned out to be convenient enough to attribute them to the methods of the String object.

String.prototype.wcl = wcl;

Do not rush to raise indignant hands - this is not a violation of pure principles, because it will work, again, at the stage of debugging, development. On a clean project, you can also bite them out of code. And the way that debugging messages is easy to search through Ctrl-F helps.

'Ajax_request'.wcl(data); //даёт вывод 'Ajax_request' Object{...данные...}
//Равносильно
wcl('Ajax_request', data);

Find this fragment in the code - by the line "Ajax_request '" (with an apostrophe at the end). At the beginning of the line, we are free to put our additional characters to better highlight the message in the log, for example, "==".

Output design: the log is not always available in browsers. This is true not only for IE with its famous bug, but also for browsers on televisions - in Smart TV - technologies and in cable TV set-top boxes, browsers that do not have console output and are not going to have it are used. You have to use a remote debugger or output to a block on the screen. Ideally, if there is a variable that allows you to show or create a block, and translates the entire log to the screen. It will not hurt for IE, saving us from tracking errors of the absence of an object.

Finally, if you need to quickly clear production from logs, you must have an expression in the shell that prohibits log output. For example, output if the domain is localhost and not otherwise. Then it is not necessary to remove them from the code by parsing the project, although disabling debugging will load JS a bit and increase the code.

Let’s summarize the code design (it was not formed now on these arguments, but over 2 years of practice; reasoning is a way to explain the reasons for the origin and the resulting amenities).

1) we use names for logs: wcw, wci, wcl, wce, wcc, wct;
2) we will not use other opportunities - we have not grown to use, but have grown to the understanding that the simple is better than the complex;
3) all functions can work as methods of the String object for ease of writing in the code: 'string'.wcl ();
4) can be disabled by one expression;
5) can display logs in another view - a div on the screen or a remote console;
6) the ability to dynamically switch flows to distribute information is interesting.

2. Snippets

2.1. Simple logging without IE

var noConsole =0, win = window
,wcl = function(a){ a = a!==undefined ? a :''; //консоль как метод строки или функция, с отключением по noConsole ==1
	if(win.console && !noConsole)
		win.console.log.apply(console, this instanceof String
			? ["'=="+ this +"'"].concat([].slice.call(arguments))
			: arguments);
};
String.prototype.wcl = wcl;

There are a couple of elements of simple street magic: the first line of the function allows you to not specify arguments and not have errors for expressions of the form 'trace_location_116'.wcl (). And the expression [] .slice.call (arguments) allows you to acquire a collection of arguments an array property so that they can participate in the concat () operation without errors. (This is often asked at interviews: in what way do you turn a collection into an array?)

If you decide to completely abandon the property of the object, it turns out very briefly (here the question is in the code design, will writing suit us only in wcl (...) format) :

var noConsole =0, win = window
,wcl = function(){ //консоль как метод строки или функция, с отключением по noConsole ==1
	if(win.console && !noConsole)
		win.console.log(arguments);
};

We do not check for the absence of arguments, since we simply will not use “wcl ();” without arguments. It will work in IE if the developer tool window is open.

2.2. Simple logging with IE

The browser’s failure to understand that console.log is a function leads to another round of magic (and, in general, it slows down a bit in all solutions, so it’s better to use it if you really need IE).

var noConsole =0, win = window
,wcl = function(a){ a = a!==undefined ? a :''; //консоль как метод строки или функция, с откл. по noConsole ==1, +IE
	if(win.console && !noConsole)
		Function.prototype.apply.call(console.log, console, this instanceof String
			? ["'=="+ this +"'"].concat([].slice.call(arguments))
			: arguments);
};
String.prototype.wcl = wcl;

2.3. Four levels of log messages

If we want to colorize the output a little, in order to distinguish between the importance and nature of the messages of our project, we will use copy-paste and use the code written in 2.1 to work with 4 similar and supported functions - log, warn, info, error. Since the copy-paste in the code is not the best, albeit a simple method, copy the following snippet, where the copy-paste is already converted into a loop, and an interesting opportunity is added - to indicate the level of messages that will be displayed in the log. Levels:
0: warn, (warning)
1: info,
2: log,
3: error.
Some logLevel variable will indicate below which level the message should not be displayed.

(function(w, logLevel, wcA){ var lvl =0
  ,$x = function(el, h){if(h) for(var i in h) el[i] = h[i]; return el};
  for(var i in wcA) //консоль[i] как метод строки или функция
    w[i] = (function(lvl, wcAI, i){
      return function(a){ a = a!==undefined|| arguments.length ? a :'';
        if(w.console && logLevel <= lvl)
          Function.prototype.apply.call(w.console[i], w.console, this instanceof String
          //w.console[i].apply(console, this instanceof String //--for without IE
            ? [wcAI + this +"'"].concat([].slice.call(arguments))
            : arguments);
        else
          w.console[i] = function(){};
    } })(lvl++, wcA[i], {wcw:'warn', wci:'info', wcl:'log', wce:'error'}[i]);
  w.wcc = w.console.clear;
  $x(String.prototype, {wcw: w.wcw, wci: w.wci, wcl: w.wcl, wce: w.wce, wcc: w.wcc });
})(window, /*logLevel*/ 0, {wcw:"'-w-", wci:'--', wcl:"'==", wce:"'=E="});

2.4. Four levels of messages in the logs or in the block on the screen

In case of impossibility to use the console, the code will have to be expanded almost twice to form the output of logs in a visible block on the screen. As an additional function, the ability to restart the logger anywhere in the program is added, changing both the logging details by choosing logLevel and the output to the screen or to the console. Logging is disabled by setting logLevel = 4 at restart.
(For this to start in IE8-, helper definitions are needed:)

$ e () is a way to generate blocks:

var logOnScreen =1
  ,logLevel =0 //0..4
  ,consoleOrig
,loadLogger = function(onScreen, logLevel){ logLevel = logLevel !==undefined ? logLevel : 3;
  var w = window, wcA ={wcw:"'-w-", wci:'--', wcl:"'==", wce:"'=E="}
	,cons = w.document.getElementsByClassName('console')[0];
  if(onScreen){ //вывод сообщений консоли в блок на экране
    if(!cons)
      cons = $e({cl:'console',cs:{position:'fixed',width:'600px',minHeight:'150px',maxHeight:'800px',overflow:'auto',overflowX:'hidden',overflowY:'auto',top:'-2px',left:'300px',zIndex:99999,fontSize:'13px',fontFamily:'Arial',backgroundColor:'#a5c6ee',opacity:0.65, filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=65)'}, apT: w.document.body });
    cons && (cons.style.display ='block');
    var consA = {warn:'w', info:'i', log:'', error:'E'};
    if(!w.console) w.console ={};
    consoleOrig = w.console;
    w.console ={};
	lvl =0;
    for(var i in consA){
      w.console[i] = (function(lvl, consAI, conCA){return function(aa){
        if(cons && logLevel <= lvl){
          cons.innerHTML +=[''+ (this instanceof String ?"'=="+ this +"'": consAI) +''].concat([].slice.call(arguments))
            .join('/ ') +'
';
          cons.scrollTop = Math.max(0, cons.scrollHeight);
        }
      } })(lvl++, consA[i], i.charAt(0).toUpperCase() + i.substr(1) );
    }
    w.console.clear = function(a){if(cons) cons.innerHTML ='';}
  }else
    cons && (cons.style.display ='none');
  lvl =0;
  for(var i in wcA) //консоль[i] как метод строки или функция
    w[i] = (function(lvl, wcAI, i){
      return function(a){ a = a!==undefined|| arguments.length ? a :'';
        if(w.console && logLevel <= lvl)
        Function.prototype.apply.call(w.console[i], w.console, this instanceof String
        //w.console[i].apply(console, this instanceof String //--for without IE
          ? [wcAI + this +"'"].concat([].slice.call(arguments))
          : arguments);
        else
          w.console[i] = function(){};
    } })(lvl++, wcA[i], {wcw:'warn', wci:'info', wcl:'log', wce:'error'}[i]);
  w.wcc = w.console.clear;
  $x(String.prototype, {wcw: w.wcw, wci: w.wci, wcl: w.wcl, wce: w.wce, wcc: w.wcc });
};

This logger is launched after loading the DOM, because the div can be used to display logs.

if(window.addEventListener)
  this.addEventListener('DOMContentLoaded',tst,!1);
else
  this.attachEvent('onload',tst);
var tst = function(){
  loadLogger(logOnScreen, logLevel);
  wcl('tst1');
  wcl();
  'tst2'.wcl();
  'tst3'.wcl({t: 23, o:{s: true}});
  'tst-wcw'.wcw(120)
  'tst-wci'.wci(121)
  'tst-wcl'.wcl(122)
  'tst-wce'.wce(123)
};

If the height of the text exceeds the maximum height of the block, scroll scrolling with the line “cons.scrollTop = Math.max (0, cons.scrollHeight);” will act.

3. Timing Design

There is reason to not adhere to the log format of the “time *” group, because in the original format they are uninformative. Only one argument is used, and the output line contains only the counted time. To prevent a string from being empty, it is better to fill it with one of the log formats, for example, wci (), putting in it the calculated interval and other values ​​from the remaining arguments. True, for this it is necessary to duplicate the counting mechanism, making it at the same time for IE. This will also make it possible to display values ​​in div.

Let's make it easier to start - let the timers work only for the console. But we have a redundant form: a context method and an ordinary function. Let 'x'.wct () be the start of the timer, and wct (' x ') be the end of the timer. If there are more than two arguments, 2 lines are displayed: a regular log, and then timing.

There is no place for timeStamp () in this system, although one could think of the wcts () function for them, also with any number of arguments. But it’s better to stick to minimalism.

You can check it like this:

var tst = function(){
  loadLogger(logOnScreen, logLevel);
  'x'.wct()
  wcl('tst1');
  wcl();
  'tst2'.wcl();
  'y'.wct()
  'tst3'.wcl({t: 23, o:{s: true}});
  wct('x')
  wct('y','другие данные')
};

Looks:

Fiddle: jsfiddle.net/spmbt/Wgah8