Friday, March 6, 2020

Different between console.dir vs console.log statements in javascript

In JavaScript,front end developer uses console for debugging application

Console is the object in JavaScript used to log the variables, strings and data structures during debugging application in browser
I already posted about console object in JavaScript.

Comparision Console.log with console.dir 

Console.log Console.dir
Used for debugging purpose print any value to console Useful data in 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 strinfied object and prints It uses iteration for printing properties of an data

Simple Example print string

 console log and dir print not onlys string but can pass 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, string is passed, both statements behavior same.
this is string
this is string

Array print, with log and dir functions

Array is passed to console.log prints array elements in square bracket.
Dir prints the Object clickable, when clicked, displayed the its values.
The behavior is not 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 ]

Print Object with key and values data

Object can be printed using log and dir functions and result are same as seen in 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 comma with equal symbol and enclosed in {}.
Console.dir prints different format with entries and its 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 comma with equal symbol and enclosed in {}.
dir prints other format included with entries and its 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 comment section below

Related article


EmoticonEmoticon