Console.log 仅显示打印对象的更新版本

Question

String.prototype.width = function(font) {

  var f = font || '12px arial',
      o = $('<div>' + this + '</div>')
            .css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f})
            .appendTo($('body')),
      w = o.width();

  o.remove();

  return w;
}


function sortCustomFunction(a, b) {
  if (a['text'].width() < b['text'].width())
     return -1;
  if (a['text'].width() > b['text'].width())
     return 1;
  // a must be equal to b
  return 0;
}

var annoObj = {
        'anno' : [
            //an paikseis me auta (px to teleutaio na mpei prwto kok) oi mikres metatwpiseis ofeilontai sto padding.
            { "label" : "fifth" , "text"  : "This is a sample text another one" , 'color' : 'red' },
            { "label" : "first" , "text"  : "This is a sample" , 'color' : 'grey' },
            { "label" : "second" , "text" : "sample" , 'color' : 'green' },
            { "label" : "sixth" , "text"  : "This is a sample text another one text one mooooorreee" , 'color' : 'lightgreen' },
            { "label" : "third" , "text"  : "another one" , 'color' : 'blue' },
            { "label" : "forth" , "text"  : "one mooooorreee" , 'color' : 'purple' }        
        ]
    };

    console.log(annoObj.anno);   //This should print the unsorted array (but it prints the sorted array).
    annoObj.anno.sort(sortCustomFunction); //Sort the array
    console.log(annoObj.anno);  //This should print the sorted (and it does)

我正在执行上述操作，一切正常。 json 对象内的数组按数组 json 元素中 'text' 键的宽度值排序。 我注意到 console.log 中的这种奇怪行为。我在排序之前和排序之后打印数组，并且在两次打印中它是相同的。它打印排序后的数组。这是为什么？

JSFIDDLE

Answer 1

排序没有问题，但这是大多数浏览器控制台众所周知的特性（优化）：仅当您打开对象时才会使用对象的新值构建树。

如果您想在记录时查看对象的状态，假设它是一个足够小的且非自引用的对象，您可以像这样克隆它：

console.log(JSON.parse(JSON.stringify(annoObj.anno)));

Answer 2

当该问题关闭时，我正在回答该问题的重复问题。正如感兴趣的相关注释一样，Stackoverflow 的代码片段确实打印了对象的实际当前值，而没有浏览器的错误。

let dummyArr = [
    {"name" : "a", "isChecked" : true},
    {"name" : "b", "isChecked" : false},
    {"name" : "c", "isChecked" : true}
];

console.log(dummyArr);
document.getElementById('a').innerHTML = JSON.stringify(dummyArr);

for(var i = 0; i < dummyArr.length ; i++){
    dummyArr[i].isChecked = false;
}

console.log(dummyArr);
document.getElementById('b').innerHTML = JSON.stringify(dummyArr);

<div id="a"></div>
<div id="b"></div>

Answer 3

console.table 没有帮助，它会截断较长的值，我看不到任何东西，而且你无法真正拉伸它，表格的宽度有限。此外，要显示它，我必须在控制台中启用“信息”过滤器，但是在调试大量代码时，我会得到各种无用的信息，这会混淆一切。因此，我禁用除错误之外的所有内容，并使用“console.error”来显示我的调试。另外，它不会显示所有信息，例如如果“arguments[1].C”是一个函数，那么 console.table 会显示“f”，这有什么帮助？如果你使用

console.error(arguments)

您可以展开参数并单击“FunctionLocation”，这将显示实际的函数。您还可以展开 Prototype 和 Constructor 并立即在控制台中看到它们，console.table 无法做到这一点。

此外，使用“console.table”你看不到“错误链”，它显示了导致函数被调试的整个函数链，而不是console.error，因为显然“console.table”是基本上是“console.info”。

这种显示值的更新版本的行为使得调试变得不可能。在调试大型代码时，克隆所有内容并不是一个好主意。我在调试一些谷歌脚本并输入时注意到了这种行为

console.error(arguments)

获取传递给函数的参数。这些值与函数内容不匹配。例如，函数表示，如果 !!arguments[0] 执行某些操作，但 console.error 表示参数[0] 未定义。

arguments[1] = Object()

arguments[1].C = 6

console.error(arguments) // 0 (updated below)

console.error(arguments[1]) // "6" in the summary, but you can't see anything in the summary if an object has many keys, and the expanded value says "0"

console.error(arguments[1].C) // "6", so great, but then you have to list every value, those google programmers put dozens of values on each object!

console.table(arguments)

console.error(Object.entries(arguments[1])) // "6", great, but this is a new array object, I want to see the original unupdated object!

arguments[1].C = 0

这里是例如谷歌功能：

Z3a = function(a)
{
    console.error(arguments[0]) // a.C -> null
    console.error(arguments[0].C) // Promise

    var b = a.C;

    if (!b) // great! it's actually false, because a.C is a Promise
    {
        // whatever
    }

    return b
};

Answer 4

使用

console.table

进行表格布局。 Firebug 和最新版本的 Google Chrome 支持。

https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks#console-table