Javascript - (Console) Logging

1 - About

logging in javascript are functions of the console

Console logging permits to inspect a Web application (page).

3 - Management

3.1 - Conditional

The console is a function of window and its qualified name is window.console.

// If the console of the browser of the console of firebug, use the console function
if (window.console || window.console.firebug) {

3.2 - Level


Level Shows
All Shows all console output
Errors Only show output from console.error().
Warnings Only show output from console.warn().
Info Only show output from
Logs Only show output from console.log().
Debug Only show output from console.timeEnd() and console.debug().

3.3 - Text

3.3.1 - Substitution Parameter (Specifier)

console.log("%s has %d points", "Nico", 100);

Format specifiers Type Description
%s String Formats the value as a string
%i or %d Integer Formats the value as an integer
%f Floating point value Formats the value as a floating point value
%o DOM element Formats the value as an expandable DOM element.
%O JavaScript object Formats the value as an expandable JavaScript object
%c Applies CSS style rules Applies CSS style rules to the output string as specified by the second parameter

3.3.2 - Back-tick

JavaScript - Template (literals|strings) - Here Document

var area = (r) => Math.PI * r ** 2;
var rayon = 3;
console.log(`The area of a circle with the rayon ${rayon} is ${area(rayon)}`);

3.4 - JavaScript object

By default, DOM elements are logged into the console as representation of their HTML.

To access the DOM element as JavaScript object and inspect its properties, we can use:


3.5 - Table (objects and arrays)

objects and arrays logging

console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]);
console.table([[1,2,3], [2,3,4]]);

Table of objects attributes:

function Person(firstName, lastName, age) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;

var family = {};
family.mother = new Person("Nico", "Gerard", 41);
family.father = new Person("Madelief", "Gerard", 9);
family.daughter = new Person("Melissa", "Gerard", 6);
family.son = new Person("Rixt", "Van Der Veen", 8);

console.table(family, ["firstName", "lastName", "age"]);

3.6 - Time

3.6.1 - Range

console.time() and console.timeEnd() track time elapsed between code execution points.

console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
    array[i] = new Object();
console.timeEnd("Array initialize");

Array initialize: 1705.399ms

When a Timeline recording is taking place during a time() operation, it annotates the timeline as well.

3.6.2 - Point

Chrome: The timeStamp() method only functions while a Timeline recording is in progress. The timeStamp() annotates the Timeline

console.timeStamp("My actual action");

3.7 - Count statement

function call(user) {
    console.count("User " + user);

users = [ 

users.forEach(function(element, index, array) {

User Nico: 1
User Madelief: 1
User Melissa: 1
User Nico: 2

3.8 - Group and console.groupEnd() group related messages and avoid clutter

Console Group permits to get the message logs in a tree fashion."My Group");
// of console.groupCollapsed("My Group"); 
// The messages will be collapsed. Ie You need to click on an arrow to see them.
console.log("First Step");
// code here...
console.log("Second step");
// code here

    // Start nested group"myNested Group");
    // code here...
    // End nested group


3.9 - Assert

console.assert() shows conditional error messages

console.assert(list.childNodes.length < 500, "Node count is > 500");

Data Science
Data Analysis
Data Science
Linear Algebra Mathematics

Powered by ComboStrap