javascript - jQuery 选择器不在 chrome 控制台中

Question

直到 Chrome 22.0，当我输入我的 javascript 代码时

console.debug($('.page'));

它曾经返回到我的 Google Chrome 控制台:

<div class="page"></div>

它是活的 DOM 对象。我可以通过将鼠标悬停在我的页面上轻松找到该对象。 昨天我已经将我的 Chrome 浏览器更新到 23.0 版，现在相同的 js 代码返回类似

[<div>, selector: ".page", context: #document]

这是原始的 js 对象。我可以展开它并读取它的属性，但是在页面上看不到事件的 DOM 对象。

我尝试用 console.log 替换 console.debug 或添加 $('.page').get()到 jQuery 选择器，但没有成功。

当我将 console.debug($('.page')); 直接写入 Chrome 控制台时，也很有趣，它看起来就像在 Chrome 22.0 中一样。只有在从 js 代码调试时才会出现问题。

Answer 1

理论上，这可以从 DOM 数组中去除 jQuery 属性:

console.log(Array.prototype.slice.call($('.page')));

但是，当控制 DOM 节点数组时，开发工具栏将不再允许您从数组中浏览 DOM 节点( native 属性除外)。我知道解决这个问题的唯一方法是单独记录每个节点:

Array.prototype.slice.call($('.page')).forEach(function(elem) {
    console.log(elem);
});

或者简单地说:

$('.page').each(function(i, elem) {
    console.log(elem);
});