jQuery selectors not living in chrome console

Question

Till Chrome 22.0, when I put in my javascript code

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

it used to return to my Google Chrome console:

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

which was living DOM object. I could easily find the object on my page by hover it. Yesterday I've updated my Chrome browser to version 23.0 and now the same js code returns something like

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

which is raw js object. I can expand it and read it's attributes, but there is no living DOM object possible to see on page.

I've tried to replace console.debug with console.log or add $('.page').get() to jQuery selector, but without success.

What's also interesting when I write console.debug($('.page')); directly into Chrome console it appears like in Chrome 22.0. Problem occurs only while debugging from js code.

Answer 1

Theoretically, this could work to strip out the jQuery properties from the DOM array:

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

BUT, when consoling an array of DOM nodes, the dev toolbar will no longer let you browse the DOM nodes from within the array (except the native properties). The only way I know to get around this is to log each node individually:

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

Or simply:

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