Javascript - (Console) Logging

About

logging in javascript are functions of the console

Console logging permits inspecting a Web application (page).

Management

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) {
    console.log(str);
} 

Level

console.log('log')
console.error('error')
console.warn('warning')
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 console.info().
Logs Only show output from console.log().
Debug Only show output from console.timeEnd() and console.debug().

Text

Substitution Parameter (Specifier)

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

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

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)}`);

With Terminal Color

With terminal color when used in server engine such as NodeJs

function error(msg) {
    console.log('\x1b[31m', msg);
}

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:

console.dir(document.body.firstElementChild)

Javascript Console Dir

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"]);

Console Table Javascript

Time

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.

Point

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

console.timeStamp("My actual action");

Count statement

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

users = [ 
    'Nico',
    'Madelief',
    'Melissa',
    'Nico'
];

users.forEach(function(element, index, array) {
    call(element);
});
User Nico: 1
User Madelief: 1
User Melissa: 1
User Nico: 2

Group

console.group() and console.groupEnd() group related messages and avoid clutter

Console Group permits to get the message logs in a tree fashion.

console.group("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
    console.group("myNested Group");
    // code here...
    // End nested group
    console.groupEnd();

console.groupEnd();

Assert

console.assert() shows conditional error messages

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





Discover More
Firefox Console
Browser - Javascript - (Web) Console

shelldevtool interpret a single line of code at a time REPL and then interact with the page and execute JavaScript. You can add message to the console through Console logging. The console keep...
D3 Csv Console Log
D3 - Csv Function (CSV from an URL )

This section talks the function d3.csv that parse a CSV file. To parse a CSV string, see . Reference: Csv The csv file or string must...
Javascript - (Debug|Diagnostic)

in Javascript The debugger keyword stops the execution of JavaScript, and calls (if available) the debugging function If no debugging is available, the debugger statement has no effect. Example:...
Javascript - Browser (Web API )

API The browser in Javascript. The browser implements extra javascript object to be able to interact with it, such as: The window object of represents a window containing a DOM document; the document...
Javascript - Logger / Logging (Tracing)

logging in Javascript Webpack: see definePlugin - the plugin does a direct text replacement. If you perform logging in your development build but not...



Share this page:
Follow us:
Task Runner