console.log() renders elements as "D.fn.D.init" I have a strongly ingrained habit of using console.log() to pinpoint where an element is on the page. Usually if you had a page like this

&lt;html&gt;
    &lt;div&gt;hello Drupal.stackxchange.com This is my first question!&lt;/div&gt;
    &lt;div&gt;goodbye&lt;/div&gt;
&lt;html&gt;


and then you ran a jQuery function like this

console.log($('div'));


your console would spit out this

[▶&lt;div&gt;…&lt;/div&gt;, ▶&lt;div&gt;goodbye&lt;/div&gt;]


which works just as good as the element inspector. Hovering your mouse over one of these will make the actual element on the page be highlighted in yellow with a helpful tooltip. It's one of my favorite ways to work with markup, however the jQuery that comes with Drupal makes it impossible by spitting out the following alternative.

[▶D.fn.D.init, ▶D.fn.D.init]


which does NOT work with the highlighting feature because it's not the actual element being passed to the console, nor is it very descriptive visually.

Why?
After a bit of digging around I managed to reproduce this on a couple of dev sites and I think I've narrowed down the problem.

The issue seems to be with the number of elements being passed to console.log.

This is what the output looks like with 100 &lt;div&gt; tags on the page:

 

And this is what it looks like with 101 &lt;div&gt; tags on the page:



So it seems either jQuery or console.log is imposing some sort of limit on rendering the output. I don't have time to look into it but my hunch would be that console.log is responsible for that.