logging in javascript are functions of the console
Console logging permits inspecting a Web application (page).
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);
}
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(). |
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 |
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 when used in server engine such as NodeJs
function error(msg) {
console.log('\x1b[31m', msg);
}
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)
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.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.
Chrome: The timeStamp() method only functions while a Timeline recording is in progress. The timeStamp() annotates the Timeline
console.timeStamp("My actual action");
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
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();
console.assert() shows conditional error messages
console.assert(list.childNodes.length < 500, "Node count is > 500");