JavaScript provides the console object which is used to print and display some text, object or data in the browser console. Every popular browser provides GUI for the JavaScript console and console object.

Open JavaScript Console

In order to start using the Console object, we need to open the browser console GUI.

Open JavaScript Console In Google Chrome

Menu->More tools->Developer Tools->Console

Open JavaScript Console In Firefox

Menu->Web Developer->Web Console

Open JavaScript Console In Edge

Menu->Developer Tools->Console

Open JavaScript Console In Opera

Menu->Developer->Developer Tools

Open JavaScript Console In Safari

Preferences->Advanced->Enable Show Developer menu in menu bar->Develop->Show Error Console.

JavaScript Console Object Methods

• `assert()`function is used to print an error to the console if the assertion is false or failed
• `clear()` function is used to clear all console output
• `count()` function is used to count function calls.
• `dir()` function is used to print object in a nice formatted way.
• `dirxml()` function is used to print XML markup data.
• `error()` function is used to output an error message to the console.
• `group()` function is used to create a new inline group which will end with groupEnd() function.
• `groupCollapsed()` function  is used to create a new inline group however the group is collapsed.
• `groupEnd()` function is used to end or exit from the current inline group
• `info()` function is used to output informational message to the console.
• `log()` function is output some message to the console.
• `table()` function is used to display data as a table in the console.
• `time()` function is used to start a timer which can track how long an operation takes.
• `timeEnd()` function will stop the timer all ready started
• `trace()` function is used to print the stack trace to the console
• `warn()` function is used to the output warning message to the console.

log()  – Log/Print Message To The Console

The most popular function of the console object is log() function which will simply print given data, text or object into the console output.

console.log("Hi poftut.com");


var str = "Poftut.com";

console.log(str);


function test(){return (10*9);}

console.log(test())

warn() – Print Warning Message To The Console

warning() function is used to print warning messages to the console output. The difference with the log() function that the log level is warning which will provide some warning symbol.

console.warn("Hi poftut.com");


var str = "Poftut.com";

console.warn(str);


function test(){return (10*9);}

console.warn(test())

info() – Print Informational Message To The Console

Informational messages will be displayed by the info() function. The info() function will provide information symbol to the console output.

console.info("Hi poftut.com");


var str = "Poftut.com";

console.info(str);


function test(){return (10*9);}

console.info(test())

error() – Print Error Message To The Console

We can print the error messages to the console with the error()function. An error symbol will be displayed in the outputs and the output text color will be red to express this is an error.

console.error("Hi poftut.com");


var str = "Poftut.com";

console.error(str);


function test(){return (10*9);}

console.error(test())

trace() – Print Trace Message To The Console

While running JavaScript code on the browser DOM there will be some stack about running JavaScript code. We can print this stack to the console output with the trace() function for the currently executed code.

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();

dir() – Print Data To The Console In Pretty Way

dir() function is used to print some data or object to the console output in a pretty way. Generally, a JSON data or DOM component can be printed to the console. In this following example, we will print document object all content in a pretty and structured way.

console.dir(document.all)

table() – Display Objects As Tables

table() function is used to display given data or object in a table formatted way. The object or data will be generally in JSON format.

var poftut = [
{ type: 'linux', name: 'ubuntu', age: 17},
{ type:'windows', name:'windows10', age:3},
{ type:'mac' , name:'macosx', age:12},
];

console.table(poftut);

group() , groupEnd() – Group Information

We can use groups in order to print messages in hierarchical manner. Groups can group() and end with groupEnd() functions. Groups can be nested as inner group list a regular group.

console.group('1st group');

console.log('First message');

console.group('A group inside the 1st group');

console.log('A message inside the group inside the 1st group');
 
console.log('Another message inside the group inside the 1st group');

console.groupEnd();

console.log('2nd message'); 

console.groupEnd();