Javascript - (Console) Logging

> (World Wide) Web - (W3|WWW) > Javascript (Js|ECMAScript) > Javascript - Browser

1 - About

logging in javascript are functions of the console

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

Advertising

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

3.2 - 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().

3.3 - Text

3.3.1 - 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
Advertising

3.3.2 - Back-tick

JavaScript - Template (literals|strings)

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:

console.dir(document.body.firstElementChild)

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

Advertising

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 = [ 
    'Nico',
    'Madelief',
    'Melissa',
    'Nico'
];
 
users.forEach(function(element, index, array) {
    call(element);
});
User Nico: 1
User Madelief: 1
User Melissa: 1
User Nico: 2

3.8 - 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();

3.9 - Assert

console.assert() shows conditional error messages

console.assert(list.childNodes.length < 500, "Node count is > 500");
web/javascript/browser/log.txt · Last modified: 2019/02/16 17:40 by gerardnico