Different between console.dir vs console.log in javascript

Different between console.dir vs console.log in javascript

In JavaScript, front-end developers uses the console for debugging applications.

The console object in JavaScript serves the purpose of logging variables, strings, and data structures during the debugging process in a browser.

For more information, check out my previous post on the console object in JavaScript in JavaScript.

In this tutorial, we will learn different between console.dir and console.log in javascript.

Comparision Console.log with console.dir in javascript

Simple Example print string

Both console.log and console.dir can print not only strings but also objects, maps, and sets, and can append using either + or ,.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script>
      console.log("this is string");
      console.dir("this is string");
    </script>
  </head>
  <body>
    <p>Console log and dir example</p>
  </body>
</html>

In the above examples, a string is passed, and both statements behave the same.

this is string
this is string

Array Object Print with console.log and console.dir

An array is passed to console.log and prints array elements in square brackets. console.dir prints the object as clickable, and when clicked, displays its values. The behavior may vary in Chrome and Firefox browsers.

let array = [1, 2, 3, 4];
console.log(array);
console.dir(array);

Output:

Chrome
(4) [8, 2, 4, 9]
Array(4)
Firefox
Array(4) [ 1, 2, 3, 4 ]
Array(4) [ 1, 2, 3, 4 ]

How to Print Object with key and values data in javascript

An object can be printed using the console log and dir functions, and the results are the same, as seen in the example below.

let myobject = { id: "1", name: "TOM" };
console.log(myobject);
console.dir(myobject);

Output:

Object { id: "1", name: "TOM" }
Object { id: "1", name: "TOM" }

DOM elements HTML,JSON format

For DOM elements, console.log prints the DOM element HTML tree, and console.dirdisplays the DOM element in a JSON Tree structure.

console.log(document.head);

Output:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script>
 console.log(document.head)
    console.dir(document.head)
  </script>
 </head>

console.dir(document.head)

Output:

head
​
accessKey: ""
​
accessKeyLabel: ""
​
assignedSlot: null
​
attributes: NamedNodeMap []
​
baseURI: "file:///C:/Users/Kiran/Desktop/test%20(2).html"
​
childElementCount: 3
​
childNodes: NodeList(7) [ #text, meta, #text
, … ]
​
children: HTMLCollection { 0: meta, 1: meta
, length: 3, … }
​
classList: DOMTokenList []
​
className: ""
​
clientHeight: 0
​
clientLeft: 0
​
clientTop: 0
​
clientWidth: 0
​
contentEditable: "inherit"
​
contextMenu: null

Map and set object print to console

For Map data types, console.log prints its key and values separated by a comma with the equal symbol and enclosed in {}. console.dir prints different formats with entries and their size properties.

var mymap = new Map([
  [11, 12],
  [21, 31],
  [41, 51],
]);
console.log(mymap);
console.dir(mymap);

Output:

Map(3) {11 => 12, 21 => 31, 41 => 51}
Map(3)[[Entries]]0: {11 => 12}1: {21 => 31}2: {41 => 51}size: (...)**proto**: Map

For Set data types, log prints its set values separated by a comma with the equal symbol and enclosed in {}.

dir prints other formats included with entries and their size properties.

let myset = new Set();
myset.add(6);
myset.add(1);
myset.add(7);
console.log(myset);
console.dir(myset);

Set(3) {6, 1, 7}
Set(3)[[Entries]]0: 61: 12: 7size: (...)__proto__: Set

The below differences are hightlighted in the table below:

Console.logConsole.dir
Used for debugging purposes to print any value to consoleUseful data in a navigation tree format to console.
Provides formatting capabilities for displaying data.Prints an object and its properties.
Displays XML tree elements.Displays JSON format.
Internally uses stringified objects and prints.Uses iteration for printing properties of data.
Please share or like the post if you like it, and leave your feedback in the comment section below.