Different between console.dir vs console.log in javascript

In JavaScript, the front-end developer uses a console for debugging the application.

The console is the object in JavaScript used to log the variables, strings, and data structures during debugging applications in the browser.
Check my other post about console object in JavaScript.

Comparision Console.log with console.dir in javascript

Console.log	Console.dir
Used for debugging purposes to print any value to console	Useful data in a navigation tree format to console.
Gives formatting capabilities to display the data.	Print object and its properties
Document XML tree elements displayed	JSON format displayed
It uses internally stringified objects and prints.	It uses iteration for printing properties of data.

Simple Example print string

console.log and console.dir print not only string but can pass an object, map and set, can append using + or comma(,)

<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, the string is passed, and both statements behave the same.

this is string  
this is string

Array Object print with console log and dir functions

The array is passed to console.log and prints array elements in a square bracket.

console.dir prints the Object clickable, and when clicked, displayed its values.

The behavior is not the same in chrome and Firefox browsers.

Here is an example.

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

The object can be printed using the log and dir functions and the result are the same as seen in the below example.

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
console.dir and displays the DOM element in 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

Please share or like the post if you like it, and leave your feedback in the comment section below.