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

在没有附加组件的 Safari 中(实际上大多数其他浏览器也是如此) ，console.log将在最后一个执行状态显示对象，而不是在调用 console.log时的状态。

我必须克隆这个对象，只是为了通过 console.log输出它，以获得该行对象的状态。

例如:

var test = {a: true}
console.log(test); // {a: false}
test.a = false;
console.log(test); // {a: false}
103363 次浏览
小开
最佳答案

我想你要找的是 console.dir()。

console.log()不会做你想做的事情，因为它会打印一个对象的引用，当你打开它的时候，它已经改变了。console.dir在您调用该对象时打印该对象中属性的目录。

下面的 JSON 思想很好; 您甚至可以继续解析 JSON 字符串并得到一个可浏览的对象，比如。Dir ()会给你:

console.log(JSON.parse(JSON.stringify(obj)));

小开

控制台中的 > Object不仅显示当前状态。它实际上是延迟读取对象和它的属性，直到您展开它。

比如说,

var test = {a: true}
console.log(test);
setTimeout(function () {
test.a = false;
console.log(test);
}, 4000);

然后展开第一个调用，如果在第二个 console.log返回之前执行，那么它就是正确的

小开

如果我想看到它被记录时的状态，我通常会做的是将它转换成一个 JSON 字符串。

console.log(JSON.stringify(a));
小开

香草 JS:

@ evan 的回答 在这里看起来是最好的，只要(ab)使用 JSON.parse/stringify 来有效地创建对象的副本。

console.log(JSON.parse(JSON.stringify(test)));

JQuery 特定解决方案:

可以使用 jQuery.extend在某个时间点创建对象的快照

console.log($.extend({}, test));

这里实际发生的是 jQuery 使用 test对象的内容创建一个新对象，并对其进行日志记录(这样它就不会改变)。

AngularJS (1)专用解决方案:

Angular 提供了一个 copy函数，可用于同样的效果: angular.copy

console.log(angular.copy(test));

香草 JS 包装函式:

下面是一个函数，它包装了 console.log，但是在注销之前会复制任何对象。

我写这篇文章是为了回应答案中几个类似但不太健壮的函数。它支持多个参数，如果它们不是 普通的对象，没有将尝试复制它们。

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))
}

示例用法 : consoleLogWithObjectCopy('obj', {foo: 'bar'}, 1, /abc/, {a: 1})

小开

使用 Xeon06的提示，您可以解析对象中的 JSON，下面是我现在用来转储对象的 log 函数:

function odump(o){
console.log($.parseJSON(JSON.stringify(o)));
}
小开

我定义了一个实用程序:

function MyLog(text) {
console.log(JSON.stringify(text));
}

当我想登录控制台时，我只需要:

MyLog("hello console!");

效果非常好！

小开

我可能会因为提出这个建议而被枪毙，但这件事可以更进一步。我们可以直接扩展控制台对象本身，使其更加清晰。

console.logObject = function(o) {
(JSON.stringify(o));
}

我不知道这是否会在时空连续体中引起某种类型的库冲突/堆芯熔毁/撕裂。但是它在我的 qUnit 测试中运行得很好。:)

小开

只要在控制台上打印整个对象。

console.log(object);

see console screen shot for ref

小开

您可能希望以人类可读的方式记录对象:

console.log(JSON.stringify(myObject, null, 2));

这将在每个级别缩进两个空格的对象。

如何使用 JavaScript 美化打印 JSON？

小开

只需在打开控制台或打开控制台之后刷新页面，然后再将请求提交到目标页..。

小开

有一个使用调试器库的选项。

Https://debugjs.net/

只需将脚本包含到您的网页中，并放入日志语句。

<script src="debug.js"></script>

伐木

var test = {a: true}
log(test); // {a: true}
test.a = false;
log(test); // {a: false}

提交答案