{

Different between console.dir vs console.log in javascript


 difference between console.dir and 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.logConsole.dir
Used for debugging purposes to print any value to consoleUseful data in a navigation tree format to console.
Gives formatting capabilities to display the data.Print object and its properties
Document XML tree elements displayedJSON 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.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.