Question

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

例如，this jsFiddle exampl上的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]

那么如何使用所有这些信息呢？我的第一直觉是tame it直到它过去的样子，但第二个想法，那里确实有很多我可能想要访问的信息。但是我很难理解我在看什么。其中大部分看起来像jQuery值。这是对象具有（或者没有）的每个jQuery值的列表吗？

然后是► context:事和► __proto__:事的整个问题。一旦你开始在__proto__向下钻研，你永远不会停止。我认为它无限下来了！

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

修改：我实际上刚刚意识到我仍在使用Chrome 23，这不是24中引入的。this thread中有人说这是Chrome 24问题，但也许它是新的23？无论如何，我最近才开始在jQuery对象上注意到这一点。

编辑2 ：如果您只想查找如何记录旧方式，请尝试以下操作：（hat tip）

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

Answer 1

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

展开元素时，您会看到DOM Core 3规范中定义的HTML元素的所有可用属性。有关此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 - 用于选择Element或NodeList的选择器
__proto__ - 一个Object的__proto__属性引用与其内部[[Prototype]]相同的对象（通常称为“原型”），它可以是一个对象或null（在Object.prototype.__proto__）的情况。有关此内容的更多信息，请参阅：https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/proto

我稍微修改了小提琴，并在您查看控制台时显示对象的预览http://jsfiddle.net/jaredwilli/H3YWq/2/

你也无法真正摆脱任何这些东西，它们是DOM的一部分，并且总是存在，否则你所看到的NodeType将不是ElementNode。

Answer 2

我和你一样恼火。我知道这不太理想，但希望对你有所帮助。

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

您之前可能已经看过该解决方案，然后发现如果您在循环中它不起作用：

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

这不会最终为您提供您习惯的结果，因此我必须使用['context']代替[0]，这样：

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

同样，我正在寻找一个更好的解决方案，但我想我会与你分享我发现的东西。

Answer 3

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

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

如何使用Chrome的新`console.log（）`输出？

3 个答案: