google-chrome – 如何使用Chrome的新`console.log()`输出?

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

例如,console.log($(“p”));在this jsFiddle example输出此疯狂:

▼[<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值的列表吗?

然后是►上下文的整个问题:事物和►__proto__:事情.一旦你开始深入__proto__,你将永远不会停止.我认为它无限下来!

我怎样才能开始学习如何使用这个新输出?

编辑:
我实际上刚刚意识到我还在使用Chrome 23,这不是24中引入的东西.有人在this thread说这是Chrome 24问题,但也许它是23年的新版本?无论如何,我最近才开始在jQuery对象上注意到这一点.

编辑2:如果你只是想找到如何记录旧方法,试试这个:(hat tip)

console.log.apply(console, $("div"));
在您的演示小提琴中,您正在记录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.

相关文章
相关标签/搜索