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

2020/09/30 08:01 · javascript ·  · 0评论

在Chrome中,console对象定义了两个似乎做相同事情的方法:

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

我在网上阅读过某个地方,该地方dir在记录对象之前先对其进行了复制,而log只是将引用传递给控制台,这意味着在您检查记录的对象时,它可能已更改。但是,一些初步测试表明,两者没有什么区别,而且它们都可能以与记录时不同的状态显示对象。

在Chrome控制台(Ctrl+ Shift+ J)中尝试此操作,以了解我的意思:

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

现在,展开[Object]下面的log语句,注意它显示foo的值为2。如果使用dir代替重复实验,则同样如此log

我的问题是,为什么这两个看似相同的功能存在console

在Firefox中,这些功能的行为截然不同:log仅打印toString表示形式,而dir打印可导航树。

在Chrome中,大多数情况下log已经打印出一棵树但是,Chrome仍然对某些类别的对象进行字符串化,即使它们具有属性。区别的最明显例子也许是正则表达式:log

> console.log(/foo/);
/foo/

> console.dir(/foo/);
* /foo/
    global: false
    ignoreCase: false
    lastIndex: 0
    ...

您还可以看到与普通对象的ged不同的数组(例如console.dir([1,2,3])的明显区别log

> 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对象也表现出不同的行为,如另一个答案所述

将DOM元素发送到控制台时,Chrome中存在另一个有用的区别。

注意:

  • console.log 在类似HTML的树中打印元素
  • console.dir 将元素打印在类似JSON的树中

具体来说,console.log对DOM元素给予特殊处理,而console.dir没有。在尝试查看DOM JS对象的完整表示时,这通常很有用。

Chrome控制台API参考中提供了有关此功能和其他功能的更多信息

我认为Firebug的做法与Chrome的开发工具不同。看起来Firebug为您提供了对象的字符串化版本,同时console.dir为您提供了可扩展的对象。两者都为您提供了Chrome中的可扩展对象,而我认为这可能是造成混乱的原因。或仅仅是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));

使用console.dir()输出可单击的浏览对象,而不是.toString()版本,如下所示:

console.dir(obj/this/anything)

如何在Chrome控制台中显示完整对象?

从Firebug网站
http://getfirebug.com/logging/

调用console.dir(object)将记录一个对象属性的交互式列表,例如> DOM选项卡的微型版本。

遵循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()应该在数组和对象中获取更多信息,例如原型等。

console.log()之间的区别console.dir()

简而言之,这是区别:

  • console.log(input):浏览器以格式正确的方式登录
  • console.dir(input):浏览器仅记录对象及其所有属性

例:

如下代码:

let obj = {a: 1, b: 2};
let DOMel = document.getElementById('foo');
let arr = [1,2,3];

console.log(DOMel);
console.dir(DOMel);

console.log(obj);
console.dir(obj);

console.log(arr);
console.dir(arr);

在Google开发工具中记录以下内容:

在此处输入图片说明

7个回答之前没有提到,console.dir支持额外的参数depthshowHidden,以及是否使用colors

特别值得关注的是depth,从理论上讲,它允许将对象遍历到超过所console.log支持的默认2个级别

我之所以写“理论上”,是因为在实践中,当我有一个猫鼬对象并运行console.log(mongoose)和时console.dir(mongoose, { depth: null }),输出是相同的。实际深入到mongoose对象中的使用util.inspect

import * as util from 'util';
console.log(util.inspect(myObject, {showHidden: false, depth: null}));

好吧,控制台标准(从ef88ec7a39fdfe79481d7d8f2159e4a323e89648提交)当前要求console.dir在将其传递给Printer之前应用通用JavaScript对象格式(规范级操作),但是对于单参数console.log调用,规范结束将JavaScript对象直接传递给Printer

由于该规范实际上几乎将有关Printer操作的所有内容留给了实现,因此由他们自己决定使用console.log()使用哪种类型的格式。

本文地址:http://javascript.askforanswer.com/console-dirheconsole-logyoushenmequbie.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!