Different between console.dir vs console.log in javascript
- Admin
- Sep 20, 2023
- 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.