Javascript 如何让 console.log 显示对象的当前状态？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7389069/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make console.log show the current state of an object?
提问by Wesley
In Safari with no add-ons (and actually most other browsers), console.logwill show the object at the last state of execution, not at the state when console.logwas called.
在没有附加组件的 Safari（实际上是大多数其他浏览器）中，console.log将在最后执行状态显示对象，而不是在console.log被调用时的状态。
I have to clone the object just to output it via console.logto get the state of the object at that line.
我必须克隆对象只是为了输出它console.log以获取该行对象的状态。
Example:
例子：
var test = {a: true}
console.log(test); // {a: false}
test.a = false;
console.log(test); // {a: false}
回答by evan
I think you're looking for console.dir().
我想你正在寻找console.dir().
console.log()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. console.dirprints a directory of the properties in the object at the time you call it.
console.log()不会做你想做的事，因为它打印了一个对对象的引用，当你打开它时，它已经改变了。console.dir在您调用它时打印对象中属性的目录。
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:
下面的 JSON 想法很好；你甚至可以继续解析 JSON 字符串并获得一个可浏览的对象，就像 .dir() 会给你的：
console.log(JSON.parse(JSON.stringify(obj)));
console.log(JSON.parse(JSON.stringify(obj)));
回答by Alex Turpin
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.
如果我想查看它在记录时的状态，我通常会做的就是将其转换为 JSON 字符串。
console.log(JSON.stringify(a));
回答by Zach Lysobey
Vanilla JS:
香草JS：
@evan's answerseems best here. Just (ab)use JSON.parse/stringify to effectively make a copy of the object.
@evan 的答案在这里似乎是最好的。只需（ab）使用 JSON.parse/stringify 来有效地制作对象的副本。
console.log(JSON.parse(JSON.stringify(test)));
JQuery specific solution:
JQuery具体解决方案：
You can create a snapshot of an object at a certain point in time with jQuery.extend
您可以使用以下命令在某个时间点创建对象的快照 jQuery.extend
console.log($.extend({}, test));
What is actually happening here is jQuery is creating a new object with the testobject's content, and logging that (so it will not change).
这里实际发生的是 jQuery 正在使用test对象的内容创建一个新对象，并记录它（因此它不会改变）。
AngularJS (1) specific solution:
AngularJS（一）具体解决方案：
Angular provides a copyfunction that can be used to the same effect: angular.copy
Angular 提供了一个copy可以达到同样效果的函数：angular.copy
console.log(angular.copy(test));
Vanilla JS wrapper function:
Vanilla JS 包装函数：
Here is an function which wraps console.logbut will make a copy of any objects before logging them out.
这是一个包装console.log但会在注销之前复制任何对象的函数。
I wrote this in response to a few similar but less robust functions in the answers. It supports multiple arguments, and will nottry to copy things if they are not regularobjects.
我写这个是为了回应答案中一些类似但不太强大的功能。它支持多个参数，并且不会尝试复制不是常规对象的东西。
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))
}
example usage: consoleLogWithObjectCopy('obj', {foo: 'bar'}, 1, /abc/, {a: 1})
示例用法：consoleLogWithObjectCopy('obj', {foo: 'bar'}, 1, /abc/, {a: 1})
回答by Joe
That > Objectin the console, isn't only showing the current state. It actually is deferring reading the object and it's properties until you expand it.
这> Object在控制台中，不仅显示当前状态。它实际上是推迟读取对象及其属性，直到您展开它。
For example,
例如，
var test = {a: true}
console.log(test);
setTimeout(function () {
test.a = false;
console.log(test);
}, 4000);
Then expand the first call, it will be correct, if you do it before the second console.logreturns
然后展开第一个调用，就对了，如果你在第二个console.log返回之前做
回答by Chris
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 :
使用 Xeon06 的提示，您可以在对象中解析他的 JSON，这是我现在用来转储对象的日志函数：
function odump(o){
console.log($.parseJSON(JSON.stringify(o)));
}
回答by Migio B
I defined an utility:
我定义了一个实用程序：
function MyLog(text) {
console.log(JSON.stringify(text));
}
and when I want to log on console I simply do:
当我想登录控制台时，我只是这样做：
MyLog("hello console!");
It works very well!
它运作良好！
回答by Andrew
You might want to log the object in a human readable way:
您可能希望以人类可读的方式记录对象：
console.log(JSON.stringify(myObject, null, 2));
This indents the object with 2 spaces at each level.
这会在每个级别用 2 个空格缩进对象。
回答by Takashi Harano
There is an option to use a debugger library.
可以选择使用调试器库。
Just include the script into your web page and put log statements.
只需将脚本包含在您的网页中并放入日志语句即可。
<script src="debug.js"></script>
Logging
日志记录
var test = {a: true}
log(test); // {a: true}
test.a = false;
log(test); // {a: false}
回答by A. Qaoud
Simply refresh the page after you open the console or open the console before you submit the request to the targeted page....
只需在打开控制台后刷新页面或在将请求提交到目标页面之前打开控制台....
回答by Dave
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.
我可能会因为提出这个建议而被枪杀，但这可以更进一步。我们可以直接扩展控制台对象本身，使其更加清晰。
console.logObject = function(o) {
(JSON.stringify(o));
}
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. :)
我不知道这是否会在时空连续体中导致某种类型的库碰撞/核熔毁/撕裂。但它在我的 qUnit 测试中运行良好。:)
