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

Question

在没有附加组件的 Safari（实际上是大多数其他浏览器）中，console.log将在最后执行状态下显示对象，而不是在console.log被调用时的状态下。

我必须克隆对象只是为了通过输出它console.log来获取该行的对象状态。

例子：

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

Answer 1

我想你正在寻找console.dir().

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

下面的 JSON 思路不错；你甚至可以继续解析 JSON 字符串并获得一个可浏览的对象，比如 .dir() 会给你的：

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

Answer 2

如果我想查看它在记录时的状态，我通常会做的就是将它转换为 JSON 字符串。

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

Answer 3

香草JS：

@evan 的回答在这里似乎是最好的。只需（ab）使用 JSON.parse/stringify 来有效地制作对象的副本。

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

JQuery具体解决方案：

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

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

这里实际发生的是 jQuery 正在使用test对象的内容创建一个新对象，并记录它（因此它不会改变）。

AngularJS（一）具体解决方案：

Angular 提供了一个copy可以达到相同效果的函数：angular.copy

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

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

Answer 4

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

例如，

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

然后展开第一个调用，就正确了，如果你在第二个console.log返回之前做

Answer 5

使用 Xeon06 的提示，您可以在对象中解析他的 JSON，这是我现在用来转储对象的日志函数：

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

Answer 6

可以选择使用调试器库。

https://debugjs.net/

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

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

日志记录

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

Answer 7

我定义了一个实用程序：

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

当我想登录控制台时，我只需执行以下操作：

MyLog("hello console!");

它工作得很好！

Answer 8

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

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

这会使对象在每个级别缩进 2 个空格。

如何使用 JavaScript 漂亮地打印 JSON？

Answer 9

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

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

我不知道这是否会在时空连续体中导致某种类型的图书馆碰撞/核熔毁/撕裂。但它在我的 qUnit 测试中运行良好。:)

Answer 10

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

Answer 11

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

console.log(object);