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.
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 treeconsole.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.
