Monday, July 16, 2018

Javascript console object - Logging tutorials, example

Console Logging -  Important for Debugging


Console Object logging
During development environment, Developer needs to log the useful debug messages and print flow variable values. So application has to access the browser window console functionality.
For that, javascript provided Console object to log the messages to the console window. Console object behavior can be varied from browser to browser. All popular browsers support the major functionality of the console object. This object is a global object and can be accessed freely anywhere. all the information from console object output to console window


Browser console window. 

console window can be enabled in all popular browsers.

Chrome console window will be opened by right click  ( more tools + developer tools) on the browser and select Inspect option. the window opened and select the console tab as shown below
chrome console window inspect

Firefox browser console window will be opened using Firebug extension or inbuilt in developer tools console.

For Safari browser, Please see Safari Developer tools  article.

Console Object log syntax

console.log(  object1,{optional objects});
console.log(  message1,{optional objects});

console.log is in two variants one is having parameters which
contain a list of objects and one object is mandatory. other is having messages followed by zero or more objects.

Console Object methods

console object has a lot of methods for debugging logs/different logger formats/ display timer information.

The assert() method 

Print log messages to console if assert is false, if true, returns nothing. This will be useful in unit testing.

Syntax

console.assert(assertion, {List of objects, Atleast One is required);
console.assert(assertion, messages {list of options/objects}); 

Example

console.assert(false, "test passed");  // outputs "VM339:1 Assertion failed: test passed" message colored in red to console

console.assert(true, "test failed"); // outputs nothing to console

The clear() method 

this method clear the console messages. 

if preserve option is set, outputs 'console.clear() was prevented due to 'Preserve log'' to console window
if  preserve option is not set and output message "console was cleared" 

Syntax and Example:-

console.clear()

The count() method usage

this logs the count of the number of times count is being called.

Syntax :- 

console.count([label]); // syntax has label which is optional

Example:- 

console.count('calledcount'); // outputs  calledcount:1 

console.count('calledcount'); // outputs  calledcount:2

console.count('calledcount'); // outputs  calledcount:3

The dir() method usage

Output javascript object and their properties information in hierarchical tree(childs) form

Syntax and Example

console.dir(object);  // Syntax
console.dir(document.body); // outputs body object data in tree form as shown in below diagram

console dir method example


The dirxml() method usage

prints javascript object data in the form of XML/HTML to console window 

Syntax and Example:-

console.dirxml(object);
console.dirxml(document.body); // outputs body object data in html form as shown in below diagram.
console object dirxml method



Group(), groupEnd() and GroupCollapsed() method usage

these methods are used to group the console log messages and shown data in hierarchical format as shown below.
You can create a nested group inside group using group()method. groupCollapse creates new group + opens group by default

Syntax and Example:-

console.log("My Computer");
console.group();
console.log("C-Drive");
console.log("c-drive-file");
console.groupEnd();
console.group();
console.log("D-drive");
console.warn("D-drive-File");
console.groupEnd();
console.log("File-2");
console.log("File-3");

console object group methods


The table() method usage

Displays the data in table format.

Syntax 
console.table(data [, columns]);

data:- data array or object data to print
columns:  column array to include in the output

Example

function Employee(name, salary) {
  this.name = name;
  this.salary= salary;
}
var emp1 = new Employee("Sai", "9000");
var emp2 = new Employee("Ganesh", "8000");
var emp3 = new Employee("Venkat", "5000");

console.table([emp1,emp2,emp3]);

please see the screenshot form output how it looks

console Object table method example

time(), TimeEnd() methods

This method is used to log the time taken for operations/calculation processing.
time() method initializes and starts the timer when timeEnd encountered, timer stops and log the time taken.

console info() method usage

log information message to the Web console

The trace() method

trace method logs a stack trace of current request thread.
syntax 

console.trace()

The warn() method

prints warning messages to the web console

Syntax

console.warn(Obj1,[list of objects])
console.warn(msg,[list of objects])

 The Error() method usage

Prints Error messages to the web console. The syntax is similar to log method

Following 5 log messages, types are in order from left to right where  Left is termed as a critical message and Right one is termed as Low.

FATAL --> ERROR --> WARN -->INFO -->DEBUG



EmoticonEmoticon

Note: Only a member of this blog may post a comment.