console.dir和console.log有什么区别？-Java 学习之路

298

在Chrome中， console 对象定义了两个似乎做同样事情的方法：

console.log(...)
console.dir(...)

我在网上看到 dir 在记录之前获取了对象的副本，而 log 只是将引用传递给控制台，这意味着当你去检查你记录的对象时，它可能已经改变了 . 然而，一些初步测试表明它们没有区别，并且它们都可能在不同状态下显示对象，而不是记录它们 .

在Chrome控制台中尝试此操作（Ctrl Shift J）以查看我的意思：

> o = { foo: 1 }
> console.log(o)
> o.foo = 2

现在，展开日志语句下面的 [Object] 并注意它显示 foo ，其值为2.如果使用 dir 而不是 log 重复实验，则同样如此 .

我的问题是，为什么 console 上存在这两个看似相同的函数？

6 回答

290
在Firefox中，这些函数的行为完全不同： log 仅打印出 toString 表示，而 dir 打印出可导航树 .

在Chrome中， log 已经打印出一棵树 - 大部分时间都是这样 . 但是，Chrome的 log 仍然会对某些类别的对象进行字符串化，即使它们具有属性 . 也许最明显的差异示例是正则表达式：
```
> console.log(/foo/);
/foo/

> console.dir(/foo/);
* /foo/
    global: false
    ignoreCase: false
    lastIndex: 0
    ...
```
您还可以看到与数组（例如 console.dir([1,2,3]) ）的明显差异，这些数组与正常对象不同 log ged：
```
> console.log([1,2,3])
[1, 2, 3]

> console.dir([1,2,3])
* Array[3]
    0: 1
    1: 2
    2: 3
    length: 3
    * __proto__: Array[0]
        concat: function concat() { [native code] }
        constructor: function Array() { [native code] }
        entries: function entries() { [native code] }
        ...
```
DOM对象也表现出不同的行为，as noted on another answer .
回复于 2024-05-19T03:23:33+08:00
3
在将DOM元素发送到控制台时，Chrome中存在另一个有用的区别 .

注意：
- console.log 在类似HTML的树中打印元素
- console.dir 在类似JSON的树中打印元素
具体来说， console.log 对DOM元素进行了特殊处理，而 console.dir 则没有 . 在尝试查看DOM JS对象的完整表示时，这通常很有用 .

Chrome Console API reference中有关于此功能和其他功能的更多信息 .
回复于 2024-05-19T03:23:33+08:00
2
我认为Firebug的做法与Chrome的开发工具不同 . 看起来Firebug为您提供了对象的字符串化版本，而 console.dir 为您提供了可扩展对象 . 两者都为您提供Chrome中的可扩展对象，我认为's where the confusion might come from. Or it'只是Chrome中的一个错误 .

在Chrome中，两者都做同样的事情 . 扩展测试后，我注意到Chrome在展开时会获取对象的当前值 .
```
> o = { foo: 1 }
> console.log(o)
Expand now, o.foo = 1
> o.foo = 2
o.foo is still displayed as 1 from previous lines

> o = { foo: 1 }
> console.log(o)
> o.foo = 2
Expand now, o.foo = 2
```
如果您想要查看的话，可以使用以下内容获取对象的字符串化版本 . 这将显示调用此行时对象的内容，而不是展开时的对象 .
```
console.log(JSON.stringify(o));
```
回复于 2024-05-19T03:23:33+08:00
0
使用console.dir（）输出可以单击的可浏览对象而不是.toString（）版本，如下所示：
```
console.dir(obj/this/anything)
```
How to show full object in Chrome console?
回复于 2024-05-19T03:23:33+08:00
4

来自萤火虫网站http://getfirebug.com/logging/

调用console.dir（object）将记录对象属性的交互式列表，例如> DOM选项卡的缩小版本 .

回复于 2024-05-19T03:23:33+08:00
121

根据Felix Klings的建议，我在我的Chrome浏览器中试用了它 .

console.dir([1,2]) 给出以下输出：

Array[2]

0: 1

1: 2

length: 2

proto: Array[0]

而 console.log([1,2]) 给出以下输出：

[1, 2]

所以我认为应该使用console.dir（）来获取更多信息，比如数组和对象中的原型等 .

回复于 2024-05-19T03:23:33+08:00

console.dir和console.log有什么区别？

6 回答

相关问题