{

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.
I already posted about console object in JavaScript.

Comparision Console.log with console.dir

Console.log

Console.dir

Used for debugging purposes 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 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 print, with log and dir functions

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

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)  

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

The object can be printed using 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)  

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.log displays the DOM element in JSON Tree structure.

console.log(document.head)  
console.dir(document.head)  

<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> 
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)  

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.