Question

由于它的异步特性，我发现自己被console.log()绊倒了很多。

我的意思是，它倾向于不在特定时间点捕获变量的值。

它适用于简单值，因为赋值给具有立即值的变量会将变量绑定到一个全新的对象。例如

var x = 3;
console.log(x);  //prints 3
x=4;

但是当你开始使用被引用绑定的对象时，事情变得......反直觉。 e.g。

var obj = {x: 3};
console.log(x); //prints 4!
obj.x = 4;

我可以使用其他一些日志功能，它会根据我的代码向我提供调用时对象的状态吗？我正在寻找能够同步或者至少看起来来自它产生的结果的东西。

如果它可以跨平台工作，我会很高兴，但我会很乐意只使用一个有效的工具。

Answer 1

根据要求，摘要：

对于简单的可序列化对象，console.log(JSON.stringify(x))效果很好：

＆＃13;

var x = { foo: 17, bar: "quux" };
console.log(JSON.stringify(x))
// => {"foo":17,"bar":"quux"}

＆＃13;

对于HTML元素，console.log(x.outerHTML)效果很好。

＆＃13;

var x = document.getElementsByTagName('p');
console.log(Array.prototype.map.call(x, function(e) {
  return e.outerHTML;
}));
// => ["<p>foo</p>", "<p id="bar">bar</p>"]

＆＃13;

<p>foo</p>
<p id="bar">bar</p>

＆＃13;

如果对象不可序列化，您可能需要钻取它们并提取可序列化的部分：

var x = { content: { foo: 17, bar: "quux" } };
x.self = x;
console.log(JSON.stringify(x.content));
// => {"foo":17,"bar":"quux"}

如果这些技巧都不适用，您可能需要深度克隆该对象（this answer提供了一个非常好的clone函数，我在下面使用，并且有很多警告）：

＆＃13;

function clone(item) {
    if (!item) { return item; } // null, undefined values check

    var types = [ Number, String, Boolean ], 
        result;

    // normalizing primitives if someone did new String('aaa'), or new Number('444');
    types.forEach(function(type) {
        if (item instanceof type) {
            result = type( item );
        }
    });

    if (typeof result == "undefined") {
        if (Object.prototype.toString.call( item ) === "[object Array]") {
            result = [];
            item.forEach(function(child, index, array) { 
                result[index] = clone( child );
            });
        } else if (typeof item == "object") {
            // testing that this is DOM
            if (item.nodeType && typeof item.cloneNode == "function") {
                var result = item.cloneNode( true );    
            } else if (!item.prototype) { // check that this is a literal
                if (item instanceof Date) {
                    result = new Date(item);
                } else {
                    // it is an object literal
                    result = {};
                    for (var i in item) {
                        result[i] = clone( item[i] );
                    }
                }
            } else {
                // depending what you would like here,
                // just keep the reference, or create new object
                if (false && item.constructor) {
                    // would not advice to do that, reason? Read below
                    result = new item.constructor();
                } else {
                    result = item;
                }
            }
        } else {
            result = item;
        }
    }

    return result;
}


var el = document.querySelector('p');
x = { el: el, content: { foo: 17, bar: "quux" } };
console.log("el.attributes[0]: changed", x);
console.log("el.attributes: empty", clone(x));
el.setAttribute('changed', 'true');

＆＃13;

<p>foo</p>

＆＃13;

在最坏的情况下，您可以随时暂停执行：

＆＃13;

var el = document.querySelector('p');
for (var i = 0; i < 1000; i++) {
  el.textContent = "Iteration #" + i;
  // check 458th iteration:
  if (i == 458) {
    console.log("Accurate:", el);
    debugger;
    console.log("Not accurate:", el);
  }
}

＆＃13;

<p></p>

＆＃13;

Answer 2

使用JSON或深度复制进行序列化的另一种可能性是使用Node的inspect进行序列化。我创建了一个端口（inspect-x），它可以在浏览器上运行90％（不是浏览器中的所有内容都可以）。

var inspect = returnExports;
var x = {
  foo: 17,
  bar: 'quux',
  arr: [1,'2', undefined, null, false],
  fum: function blah() {},
  fee: new ArrayBuffer(4),
  woo: new Date(),
  wee: /match/gi,
  wiz: 1,
  poo: true,
  pee: Object('hi'),
  jqu: $(document.body),
  ppp: document.getElementsByTagName('pre')
};
document.getElementById('out').appendChild(document.createTextNode(inspect(x, {showHidden: true})));
console.log(inspect(x, {showHidden: true}));

<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.3.1/es5-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.3.1/es5-sham.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
<script src="https://rawgit.com/Xotic750/inspect-x/master/lib/inspect-x.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<pre id="out"></pre>

您可以与JSON.stringify

进行比较

var inspect = returnExports;
var x = {
  foo: 17,
  bar: 'quux',
  arr: [1,'2', undefined, null, false],
  fum: function blah() {},
  fee: new ArrayBuffer(4),
  woo: new Date(),
  wee: /match/gi,
  wiz: 1,
  poo: true,
  pee: Object('hi'),
  jqu: $(document.body),
  ppp: document.getElementsByTagName('pre')
};
document.getElementById('out').appendChild(document.createTextNode(JSON.stringify(x, null, 2)));
console.log(JSON.stringify(x, null, 2));

<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.3.1/es5-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.3.1/es5-sham.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<pre id="out"></pre>

正如您所看到的，inspect提供了更多信息，可以配置更深入。

console.log的非易失性替代品

2 个答案: