如何使用Chrome的新`console.log()`输出？

Question

Chrome 24有一种新的方法在console.log()中输出对象。

例如，在这个jsFiddle示例上运行console.log($("p"));会输出以下内容：

▼[<p>, <p>, <p>, prevObject: jQuery.fn.jQuery.init[1], context: #document, selector: "p"]
  ► 0: <p>
  ► 1: <p>
  ► 2: <p>
  ► context: #document
    length: 3
  ► prevObject: jQuery.fn.jQuery.init[1]
    selector: "p"
  ► __proto__: Object[0]

我看到它将DOM元素的集合放在开头。但是，如果您尝试展开一个几乎为空的简单的<p>标签，它会使您感到困惑。

▼ 0: <p>
   accessKey: ""
   align: ""
 ► attributes: NamedNodeMap
  ...
  [stopping here for sanity's sake]

那么我如何使用所有这些信息呢？我的第一反应是将其驯服成以前的样子，但仔细想想，里面确实有很多信息我可能需要访问。但我很难理解我正在看什么。其中很多看起来像jQuery值。这是对象拥有（或不拥有）的每个jQuery值的列表吗？

然后还有整个► context:和► __proto__:的问题。一旦你开始在__proto__中深入挖掘，你就永远停不下来了。我觉得它会无限下去！

我该如何开始学习如何使用这个新输出呢？

编辑：我刚刚意识到我仍在使用Chrome 23，这不是在24中引入的。此线程中的某人说这是Chrome 24的问题，但也许在23中是新的？无论如何，我最近才开始注意到这个问题出现在jQuery对象上。

编辑2：如果你只是想知道如何以旧的方式记录日志，请尝试这样做：(致谢)

 console.log.apply(console, $("div"));

- brentonstrine

---

对于您来说，console.log($("p"))的最佳输出是什么？您是否满意Firebug风格的输出（例如[p, p#bar, p.foo]）或Opera Dragonfly的输出（例如Object [+<p>, +<p id="bar">, +<p class="foo">]）？我正在处理类似问题，我认为我也可以改进jQuery对象的输出。 - NVI

请给 code.google.com/p/chromium/issues/detail?id=162570 点个赞。 - NVI

@NVI 谢谢你提供的链接。我习惯于直接输出DOM，就像以前一样。例如，一个jQuery对象会输出与之匹配的每个HTML元素的列表，每个元素都可以展开以查看节点中存在的所有HTML--这意味着如果一个元素在标记中物理上具有id=hey，那么它将显示出来，但如果没有，我也不会得到id: ""以及其他理论上可能的属性，而实际上并不存在。但这只是我习惯于和发现非常有用的东西。我仍然希望能够做到这一点，但我希望学习如何使用这个工具。 - brentonstrine

Answer 1

在您的演示fiddle中，您正在记录NodeLists或HTMLCollections。 NodeList中的每个元素都表示为数字索引0、1、2等。如果NodeList中存在任何元素，则0是NodeList中的第一个元素。

当您展开Elements时，您将看到在DOM Core 3规范中定义的HTML Element的所有可用属性。有关更多信息，请参见此处：http://domenlightenment.com/#3.2，有关所有属性及其目的的列表，请转到此处：https://developer.mozilla.org/en-US/docs/DOM/element。这在Chrome中并不新奇。

最新版本的Chrome中新的是顶级日志对象，因此如果您只是打开控制台并键入：

console.log(window)

当我刚刚这样做时，记录了提供的扩展窗口对象的预览。例如，您应该看到类似于：

Window {is_minor: 5, bmi_ie6: false, careers_adselector: "div.hireme, div#hireme"...}

以下是列表元素之外的其他NodeLists属性：

• context - 选择的上下文 - http://domenlightenment.com/#4.4
• length - HTMLCollection中元素的数量
• selector - 用于选择元素或NodeList的选择器
• __proto__ - 对象的__proto__属性引用与其内部[[Prototype]]相同的对象（通常称为“原型”），该对象可以是对象或null（在Object.prototype.__proto__的情况下为null）。有关更多信息，请参见：https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/proto

我稍微修改了fiddle，应该在查看控制台时显示对象的预览http://jsfiddle.net/jaredwilli/H3YWq/2/

你不能真正摆脱这些东西，它们是DOM的一部分，并且将始终存在，否则您正在查看的NodeType将是ElementNode以外的其他类型。

- jaredwilli

Answer 2

我和你一样对这个变化感到烦恼。我知道这不是理想的，但希望它能对你有所帮助。

console.log($('p')[0]);

你可能以前见过这个解决方案，但如果你在循环中使用它，你会发现它不起作用：

$('p').each(function(){
 console.log($(this)[0]);
});

这样做也不能得到你想要的结果，所以我不得不像这样使用['context']而不是[0]：

$('p').each(function(){
 console.log($(this)['context']);
});

我自己也在寻找更好的解决方案，但我想和你分享我所发现的。

- jarodtaylor

---

谢谢。这有点帮助缓解烦恼，也将节省很多麻烦。不过我仍然想奖励那些能够给出更全面答案的人。目前似乎这是一个相当大的未知数，所以可能不会发生。 - brentonstrine

Answer 3

你想要第一个元素，所以使用 [0]

另一个选择是，在 Firefox 中使用 Firebug。我知道，我也喜欢 Chrome 并且每天都在使用它，但 Firebug 是一个很棒的插件，我从来没有遇到过任何问题。

- jsteinmann

---

谢谢，实际上我不需要第一个元素。我甚至没有要求回到旧的方式（它提供了不止第一个元素）。我正在尝试弄清楚现在它做什么以及如何使用它。 - brentonstrine