4

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

<html>
    <div>hello Drupal.stackxchange.com This is my first question!</div>
    <div>goodbye</div>
<html>

and then you ran a jQuery function like this

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

your console would spit out this

[▶<div>…</div>, ▶<div>goodbye</div>]

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?

Improve this question

2 Answers 2

Reset to default
4

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 <div> tags on the page:

enter image description here

And this is what it looks like with 101 <div> tags on the page:

enter image description here

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.

Improve this answer
9
  • I can confirm the D.fn.D.init behavior when running a console.log(jQuery("div")); right from Chrome's debug console on some but not all of my recent Drupal 7 sites.
    – mpdonadio ♦
    Aug 6, 2012 at 22:41
  • @MPD Interesting. Any chance the sites where D.fn.D.init is shown have JS aggregation enabled, and the ones where the 'expected' output is shown haven't?
    – Clive ♦
    Aug 6, 2012 at 22:47
  • @MPD Oh, and maybe using the CDN version of jQuery (the minified one)?
    – Clive ♦
    Aug 6, 2012 at 22:48
  • All my sites use jQUery update w/ local files, and it doesn't seem to matter. JS aggregation, too, doesn't seem to matter.
    – mpdonadio ♦
    Aug 6, 2012 at 23:06
  • 1
    Very odd. Never ever run into it. It's jQuery. Swap out w/ a non-minified version and it becomes jQuery.fn.jQuery.init: stackoverflow.com/questions/7261670/…
    – mpdonadio ♦
    Aug 7, 2012 at 1:02
2

I've discovered the true answer. The problem is that Drupal 5, and older installs of Drupal 6 and 7 came with jQuery 1.2.6 which is insanely out of date and doesn't support that feature.

example: http://jsfiddle.net/rgbk/k839Y/

Seen here, as of this writing, most of the code in 1.2.6 is between 4 and 6 years old. Why has Drupal held on to such an outdated jQuer versions for so long? That's perhaps for another discussion thread. https://github.com/jquery/jquery/tree/1.2.6

Anyway, the solution is to install Drupal's jQuery Update module which will forceably upgrade jQuery to ... well not really a much newer jQuery, but at least past the 1.3 mark which is as old as jQuery can possibly be and support that feature.

So that closes the book on this question, but it raises another much larger concern. Now I'm worried about all the hundreds of other missing improvements that have happened since before I even knew jQuery was a thing.

Edit: Clive's answer about the 100-element limit is still relavant after the jQuery Update.

Improve this answer
2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.