javascript - jQuery selectors not living in chrome console - Stack Overflow

admin管理员组

文章数量:1425195

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.

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.

• javascript
• google-chrome
• jquery-selectors
• google-chrome-devtools

Share Improve this question Follow asked Nov 8, 2012 at 9:40 TeriteTerite 1,1671414 silver badges2323 bronze badges 5

• 3 Try console.log($('.page')[0]) It works for me @ 23.0.1271.64 – supernova Commented Nov 8, 2012 at 9:45
• Ok, thanks. It works but of course returns only first of matched elements. Earlier I could get array of living objects. – Terite Commented Nov 8, 2012 at 9:54
• if you type the selector into chromes developer console it should display all elements as it did in earlier versions. i haven't found another way to output an array of elements yet. – supernova Commented Nov 8, 2012 at 10:11
• 2 +1, this is a killer for quickly debugging jQuery. – Flash Commented Nov 15, 2012 at 4:22
• I upmodded @supernova but note this is only a workaround not a fix. – mikemaccana Commented Nov 29, 2012 at 9:13

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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);
});

Sometime to debug i test also the ".html()" or innerHtml to debug some on-fly html code but "David" way is also what i did.

This appears to be fixed in version 23.0.1271.91.

本文标签： javascriptjQuery selectors not living in chrome consoleStack Overflow