在JavaScript中，前端开发者使用控制台来调试应用程序
控制台是JavaScript中的一个对象，用于在浏览器中调试应用程序时记录变量、字符串和数据结构
我已经发布了关于JavaScript中的控制台对象。
Console.log与console.dir的比较
| Console.log | console.dir |
|---|---|
| 用于调试目的，向控制台打印任何数值 | 以导航树的格式向控制台提供有用的数据 |
| 给予显示数据的格式化能力 | 打印对象和它的属性 |
| 显示文档的XML树元素 | 显示JSON格式 |
| 它使用内部串联的对象并进行打印 | 它使用迭代来打印一个数据的属性 |
打印字符串的简单例子
控制台日志和dir打印不仅是字符串，而且可以传递对象、映射和设置，可以使用+或逗号(,)附加。
<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>
在上面的例子中，字符串被传递，两个语句的行为是一样的。
this is string
this is string
数组打印，使用log和dir函数
数组被传递给console.log，在方括号中打印出数组元素。
Dir打印可点击的对象，当点击时，显示其值。
这种行为在chrome和Firefox浏览器中是不一样的。
下面是一个例子。
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 ]
打印带有键和值数据的对象
可以使用log和dir函数打印对象，结果和下面的例子一样。
let myobject = {id: "1", name: "TOM"};
console.log(myobject)
console.dir(myobject)
Object { id: "1", name: "TOM" }
Object { id: "1", name: "TOM" }
DOM元素 HTML,JSON格式
对于DOM元素，
console.log打印DOM元素的HTML树
console.log显示DOM元素的JSON树结构。
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
地图和设置对象打印到控制台
对于地图数据类型，
console.log打印它的键和值，用逗号与等号分开，并以{}括起来。
Console.dir打印不同格式的条目和其大小属性。
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
对于集合数据类型,
dir打印包括条目和其大小属性的其他格式。
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
如果你喜欢这篇文章，请分享或喜欢它，并在下面的评论部分留下你的反馈意见
