blocks|key|3153400|text|我想你是在找console.dir()吧。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3153401|调用对象时，console.dir会打印对象中的属性目录。|3153402|下面的JSON想法很好；您甚至可以继续解析JSON字符串，并获得一个可浏览的对象，就像.dir()所提供的那样：|3153403|console.log(JSON.parse(JSON.stringify(obj)));|3153404|entityMap^0|6|D|0|6|B|0|0|0|19|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|T|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|L|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|M|$]]

I think you're looking for <code>console.dir()</code>.

<code>console.log()</code> doesn't do what you want because it prints a reference to the object, and by the time you pop it open, it's changed. <code>console.dir</code> prints a directory of the properties in the object at the time you call it.

The JSON idea below is a good one; you could even go on to parse the JSON string and get a browsable object like what .dir() would give you:

<code>console.log(JSON.parse(JSON.stringify(obj)));</code>

blocks|key|2939020|text|控制台中的>+Object不仅显示当前状态。它实际上是在延迟读取对象和它的属性，直到您展开它。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2939021|例如,|2939022|var+test+=+{a:+true}
console.log(test);
setTimeout(function+()+{
++++test.a+=+false;+
++++console.log(test);
},+4000);|code-block|syntax|javascript|2939023|然后展开第一个调用，如果您在第二个console.log返回之前展开它，那么它将是正确的|2939024|entityMap^0|5|8|0|0|0|H|B|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

That <code>&gt; Object</code> in the console, isn't only showing the current state. It actually is deferring reading the object and it's properties until you expand it.

For example,

<pre><code>var test = {a: true}
console.log(test);
setTimeout(function () {
 test.a = false; 
 console.log(test);
}, 4000);
</code></pre>

Then expand the first call, it will be correct, if you do it before the second <code>console.log</code> returns

blocks|key|2939033|text|如果我想查看它在被记录时的状态，我通常会做的就是将它转换成JSON字符串。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2939034|console.log(JSON.stringify(a));|code-block|syntax|javascript|2939035|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

What I usually do if I want to see it's state at the time it was logged is I just convert it to a JSON string.

<pre><code>console.log(JSON.stringify(a));
</code></pre>

blocks|key|2939053|text|香草JS：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2939054|@evan's+answer在这里似乎是最好的。只需(Ab)使用JSON.parse/stringify来有效地复制对象。|offset|length|2939055|console.log(JSON.parse(JSON.stringify(test)));|code-block|syntax|javascript|2939056|JQuery特定的解决方案：|2939057|您可以使用jQuery.extend在某个时间点创建对象的快照|style|CODE|2939058|console.log($.extend({},+test));|2939059|这里实际发生的情况是，jQuery正在使用test对象的内容创建一个新对象，并记录该对象(因此它不会改变)。|2939060|AngularJS+(1)具体解决方案：|2939061|Angular提供了一个可以达到相同效果的copy函数：angular.copy|2939062|console.log(angular.copy(test));|2939063|Vanilla+JS包装器函数：|2939064|下面是一个包装console.log的函数，但它会在注销任何对象之前对它们进行复制。|2939065|我写这篇文章是为了回应答案中几个类似但不太健壮的函数。它支持多个参数，如果它们不是常规对象，则不会尝试复制它们。|2939066|function+consoleLogWithObjectCopy+()+{
++var+args+=+[].slice.call(arguments);
++var+argsWithObjectCopies+=+args.map(copyIfRegularObject)
++return+console.log.apply(console,+argsWithObjectCopies)
}

function+copyIfRegularObject+(o)+{
++const+isRegularObject+=+typeof+o+===+'object'+&&+!(o+instanceof+RegExp)
++return+isRegularObject+?+copyObject(o)+:+o
}

function+copyObject+(o)+{
++return+JSON.parse(JSON.stringify(o))
}|2939067|示例用法：consoleLogWithObjectCopy('obj',+{foo:+'bar'},+1,+/abc/,+{a:+1})|BOLD|2939068|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/7389177/363701|1|http://api.jquery.com/jQuery.extend/|2|https://docs.angularjs.org/api/ng/function/angular.copy^0|0|0|E|0|0|0|0|5|D|5|D|1|0|0|L|4|0|0|L|4|S|C|S|C|2|0|0|0|7|B|0|0|0|0|4|5|1R|0^^$0|@$1|2|3|4|5|6|7|1N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1O|8|@]|9|@$D|1P|E|1Q|1|1R]]|A|$]]|$1|F|3|G|5|H|7|1S|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|1T|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1U|8|@$D|1V|E|1W|O|P]]|9|@$D|1X|E|1Y|1|1Z]]|A|$]]|$1|Q|3|R|5|H|7|20|8|@]|9|@]|A|$I|J]]|$1|S|3|T|5|6|7|21|8|@$D|22|E|23|O|P]]|9|@]|A|$]]|$1|U|3|V|5|6|7|24|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|25|8|@$D|26|E|27|O|P]|$D|28|E|29|O|P]]|9|@$D|2A|E|2B|1|2C]]|A|$]]|$1|Y|3|Z|5|H|7|2D|8|@]|9|@]|A|$I|J]]|$1|10|3|11|5|6|7|2E|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|2F|8|@$D|2G|E|2H|O|P]]|9|@]|A|$]]|$1|14|3|15|5|6|7|2I|8|@]|9|@]|A|$]]|$1|16|3|17|5|H|7|2J|8|@]|9|@]|A|$I|J]]|$1|18|3|19|5|6|7|2K|8|@$D|2L|E|2M|O|1A]|$D|2N|E|2O|O|P]]|9|@]|A|$]]|$1|1B|3|-4|5|6|7|2P|8|@]|9|@]|A|$]]]|1C|$1D|$5|1E|1F|1G|A|$1H|1I]]|1J|$5|1E|1F|1G|A|$1H|1K]]|1L|$5|1E|1F|1G|A|$1H|1M]]]]

<h3>Vanilla JS:</h3>

<a href="https://stackoverflow.com/a/7389177/363701">@evan's answer</a> seems best here. Just (ab)use JSON.parse/stringify to effectively make a copy of the object.

<pre><code>console.log(JSON.parse(JSON.stringify(test)));
</code></pre>

<h3>JQuery specific solution:</h3>

You can create a snapshot of an object at a certain point in time with <a href="http://api.jquery.com/jQuery.extend/" rel="noreferrer"><code>jQuery.extend</code></a>

<pre><code>console.log($.extend({}, test));
</code></pre>

What is actually happening here is jQuery is creating a new object with the <code>test</code> object's content, and logging that (so it will not change).

<h3>AngularJS (1) specific solution:</h3>

Angular provides a <code>copy</code> function that can be used to the same effect: <a href="https://docs.angularjs.org/api/ng/function/angular.copy" rel="noreferrer"><code>angular.copy</code></a>

<pre><code>console.log(angular.copy(test));
</code></pre>

<h3>Vanilla JS wrapper function:</h3>

Here is an function which wraps <code>console.log</code> but will make a copy of any objects before logging them out.

I wrote this in response to a few similar but less robust functions in the answers. It supports multiple arguments, and will not try to copy things if they are not regular objects.

<pre><code>function consoleLogWithObjectCopy () {
 var args = [].slice.call(arguments);
 var argsWithObjectCopies = args.map(copyIfRegularObject)
 return console.log.apply(console, argsWithObjectCopies)
}

function copyIfRegularObject (o) {
 const isRegularObject = typeof o === 'object' &amp;&amp; !(o instanceof RegExp)
 return isRegularObject ? copyObject(o) : o
}

function copyObject (o) {
 return JSON.parse(JSON.stringify(o))
}
</code></pre>

example usage: <code>consoleLogWithObjectCopy('obj', {foo: 'bar'}, 1, /abc/, {a: 1})</code>

blocks|key|3153473|text|使用Xeon06的提示，您可以在对象中解析他的JSON，下面是我现在用来转储对象的日志函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3153474|function+odump(o){
+++console.log($.parseJSON(JSON.stringify(o)));
}|code-block|syntax|javascript|3153475|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

using Xeon06's hint, you may parse his JSON in an object, and here is the log function I now use to dump my objects : 

<pre><code>function odump(o){
 console.log($.parseJSON(JSON.stringify(o)));
}
</code></pre>

blocks|key|3153483|text|我定义了一个实用程序：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3153484|function+MyLog(text)+{
++++console.log(JSON.stringify(text));
}|code-block|syntax|javascript|3153485|当我想登录控制台时，我只需这样做：|3153486|MyLog("hello+console!");|3153487|它工作得很好！|3153488|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I defined an utility:

<pre><code>function MyLog(text) {
 console.log(JSON.stringify(text));
}
</code></pre>

and when I want to log on console I simply do:

<pre><code>MyLog("hello console!");
</code></pre>

It works very well!

blocks|key|257870|text|我可能会因为提出这一点而受到抨击，但这一点还可以更进一步。我们可以直接扩展console对象本身，使其更加清晰。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|257871|console.logObject+=+function(o)+{
++(JSON.stringify(o));
}|code-block|syntax|javascript|257872|我不知道这是否会在时空连续体中引起某种类型的库碰撞/核熔毁/撕裂。但它在我的qUnit测试中工作得很好。:)|257873|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I may be shot for suggesting this, but this can be taken one step further. We can directly extend the console object itself to make it more clear.

<pre><code>console.logObject = function(o) {
 (JSON.stringify(o));
}
</code></pre>

I don't know if this will cause some type of library collision/nuclear meltdown/rip in the spacetime continuum. But it works beautifully in my qUnit tests. :)

blocks|key|3153513|text|只需在控制台上打印整个对象。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3153514|console.log(object);|code-block|syntax|javascript|3153515|​|3153516|📷|atomic|offset|length|3153517|3153518|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/54dedb3c52d684eeefb2c472feddd7e5.png|imageAlt^0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Z|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|10|8|@]|9|@$L|11|M|12|1|13]]|A|$]]|$1|N|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V|W|-4]]]]

Just print whole object on console.
<pre><code>console.log(object);
</code></pre>
<a href="https://i.stack.imgur.com/hsUx6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hsUx6.png" alt="see console screen shot for ref" /></a>

blocks|key|256930|text|您可能希望以人类可读的方式记录对象：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|256931|console.log(JSON.stringify(myObject,+null,+2));|code-block|syntax|javascript|256932|这将使对象在每个标高上缩进2个空格。|256933|How+can+I+pretty-print+JSON+using+JavaScript?|offset|length|256934|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/4810841/how-can-i-pretty-print-json-using-javascript^0|0|0|0|0|19|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

You might want to log the object in a human readable way:

<pre><code>console.log(JSON.stringify(myObject, null, 2));
</code></pre>

This indents the object with 2 spaces at each level.

<a href="https://stackoverflow.com/questions/4810841/how-can-i-pretty-print-json-using-javascript">How can I pretty-print JSON using JavaScript?</a>

blocks|key|257902|text|只需在打开控制台后刷新页面，或在将请求提交到目标页面之前打开控制台...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|257903|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Simply refresh the page after you open the console or open the console before you submit the request to the targeted page....

blocks|key|254623|text|有一个使用调试器库的选项。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|254624|https://debugjs.net/|offset|length|254625|只需将脚本包含到您的网页中，并放置日志语句即可。|254626|<script+src="debug.js"></script>|code-block|syntax|javascript|254627|日志记录|254628|var+test+=+{a:+true}
log(test);+//+{a:+true}
test.a+=+false;+
log(test);+//+{a:+false}|254629|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|K|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|F|3|G|5|6|7|12|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|13|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|15|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|C]]]]

There is an option to use a debugger library.

<a href="https://debugjs.net/" rel="nofollow noreferrer">https://debugjs.net/</a>

Just include the script into your web page and put log statements.

<pre><code>&lt;script src="debug.js"&gt;&lt;/script&gt;
</code></pre>

Logging

<pre><code>var test = {a: true}
log(test); // {a: true}
test.a = false; 
log(test); // {a: false}
</code></pre>

In Safari with no add-ons (and actually most other browsers), <code>console.log</code> will show the object at the last state of execution, not at the state when <code>console.log</code> was called.

I have to clone the object just to output it via <code>console.log</code> to get the state of the object at that line.

Example:

<pre><code>var test = {a: true}
console.log(test); // {a: false}
test.a = false; 
console.log(test); // {a: false}
</code></pre>

How can I make console.log show the current state of an object?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

在没有附加组件的Safari中(实际上是大多数其他浏览器)，console.log将在最后一次执行时显示对象，而不是在调用console.log时的状态。我必须克隆该对象，以便通过console.log输出该对象，以获得该行对象的状态。示例：var test = {a: true}console.log(test); ...

问如何让console.log显示对象的当前状态？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让console.log显示对象的当前状态？EN