如何使用 Chrome 的新 `console.log()` 输出?
Posted
技术标签:
【中文标题】如何使用 Chrome 的新 `console.log()` 输出?【英文标题】:How do I use the new `console.log()` output of Chrome? 【发布时间】:2012-11-04 17:13:57 【问题描述】:Chrome 24 提供了一种在console.log()
中输出对象的新方法。
例如,this jsFiddle example 上的 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"));
【问题讨论】:
console.log($("p"))
对您来说最好的输出是什么?您对 Firebug 样式的输出(例如 [p, p#bar, p.foo]
)或 Opera Dragonfly 的输出(例如 Object [+<p>, +<p id="bar">, +<p class="foo">]
)满意吗?我正在研究similar issue,我想我也可以改进 jQuery 对象的输出。
请给code.google.com/p/chromium/issues/detail?id=162570加注星标
@NVI 感谢您提供该链接。我习惯的是一个直接的 DOM 输出,就像以前一样。例如。一个 jQuery 对象将输出每个匹配的 html 元素的列表,并且每个元素都可以展开以查看节点中存在的所有 HTML——这意味着如果一个元素在标签中物理上具有id=hey
,那么它会出现,但如果没有,我不会得到id: ""
以及实际上不存在的所有其他理论上可能的属性。但这只是我习惯并发现非常有用的方法。我仍然希望能够做到这一点,但我也希望学习如何使用它。
【参考方案1】:
在您的演示小提琴中,您正在记录 NodeLists 或 HTMLCollections。 NodeList 中的每个元素都表示为数字索引 0、1、2 等。如果其中存在任何元素,0 是 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__
- 对象的 __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。
【讨论】:
【参考方案2】:我和你一样对这种变化感到恼火。我知道这并不理想,但希望对您有所帮助。
console.log($('p')[0]);
您之前可能已经看过该解决方案,然后发现如果您处于循环中,它就不起作用:
$('p').each(function()
console.log($(this)[0]);
);
这最终不会给你你习惯的结果,所以我不得不像这样使用['context']
而不是[0]
:
$('p').each(function()
console.log($(this)['context']);
);
同样,我自己也在寻找更好的解决方案,但我想我会与您分享我的发现。
【讨论】:
谢谢。这有助于减轻一点烦恼,并且会减轻很多头痛。我仍然想将赏金积分奖励给可以给出更全面答案的人。在这一点上,这似乎是一个相当大的未知数,所以这可能不会发生。【参考方案3】:你想要第一个元素,所以使用 [0]
作为另一种选择,请查看 Firefox 中的 Firebug。我知道,我也喜欢 chrome 并且每天都在使用它,但是 Firebug 是一个很棒的插件,我从来没有遇到过它的问题。
【讨论】:
谢谢,我实际上并不想要第一个元素。我什至没有要求回到旧的方式(它提供的不仅仅是第一个元素)。我试图弄清楚如何理解它现在的作用以及如何使用它。以上是关于如何使用 Chrome 的新 `console.log()` 输出?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 Python 和 Selenium 在 Chrome 中打开具有不同 URL 的新标签页? [复制]
如何在java脚本中打开Chrome中的新选项卡而不是新窗口