JavaScript Console Object and Functions Tutorial with Examples – POFTUT

JavaScript Console Object and Functions Tutorial with Examples

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.
LEARN MORE  JavaScript console.log() Function Tutorial with Examples

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.

log()  - Log/Print Message To The Console

log()  – Log/Print Message To The Console

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.

warn() - Print Warning Message To The Console

warn() – Print Warning Message To The Console

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.

info() - Print Informational Message To The Console

info() – Print Informational Message To The Console

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.

LEARN MORE  How To Open and Use JavaScript Console In Google Chrome?

error() - Print Error Message To The Console

error() – Print Error Message To The Console

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.

trace() - Print Trace Message To The Console

trace() – Print Trace Message To The Console

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.

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

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

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.

table() - Display Objects As Tables

table() – Display Objects As Tables

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.

LEARN MORE  JavaScript console.log() Function Tutorial with Examples

group() , groupEnd() - Group Information

group() , groupEnd() – Group Information

Leave a Reply

Your email address will not be published. Required fields are marked *

Enjoy this blog? Please spread the word :)