Show Elements when logging jQuery object in Chrome Dev Tools console?

Question

It seems like something has changed lately with Chrome Dev Tools. Logging a jQuery object with console.log used to show the Element of the DOM node in the conso

Answer 1

It seems that this won't be fixed in nearest future. Chrome Canary still have this issue. I like new console behavior with objects preview, but I want an exception for jQuery objects.

You can "patch" console.log a little bit to make it display jQuery objects like before. It's possible to "convert" jQuery objects to list of separate arguments. For example:

$('div');

In console could be displayed like:

console.log('[', div[0], div[1], ..., ']');

I wrote the script which will modify console.log arguments for jQuery objects only:

(function(){
    var arraySlice = Array.prototype.slice;
    var originalFunction = console.log;

    var replaceObject = function(sourceArray, objectIndex) {
        var currentObject = sourceArray[objectIndex];
        var spliceArguments = Array.prototype.slice.apply(currentObject);

        if(currentObject.length) {
            // add commas and brackets
            for(var i = spliceArguments.length - 1; i > 0; i--) {
                spliceArguments.splice(i, 0, ',');
            }
            spliceArguments.splice(0, 0, objectIndex, 1, '[');
            spliceArguments.splice(spliceArguments.length, 0, ']');

            // patch source array
            sourceArray.splice.apply(sourceArray, spliceArguments);
        } else {
            sourceArray.splice(objectIndex, 1, '[]');
        }
    };

    var fixFunction = function() {
    if(typeof jQuery === 'function' && jQuery.fn) {
        var newArgs = Array.prototype.slice.apply(arguments);
        for (var i = newArgs.length - 1; i >= 0; i--) {
            if(newArgs[i] instanceof jQuery) {
                replaceObject(newArgs, i);
            }
        }
        originalFunction.apply(console, newArgs);
    } else {
        originalFunction.apply(console, arguments);
    }
    };

    fixFunction.toString = function() {
        return originalFunction.toString();
    };

    console.log = fixFunction;
}())

Now you can include this script in your page to override console behavior, but this is not a good way to fix this issue, so I've wrapped this in Chrome Extension which will do this automatically for all pages.

Answer 2

If you want console.log() to spit out the DOM element, you need to log the DOM element and not the jQuery object. The DOM element is always accessible as the 0th element of the jQuery selector. So, the way you would access the actual DOM element from a jQuery selector is like this:

   $("#someSingleDOMObjectSelector")[0]

And to get the DOM element to appear in the log the way you would like, you would do this:

   console.log($("#someSingleDOMObjectSelector")[0]);

And for jQuery selectors which contain/return multiple DOM elements, you could loop them, like this:

   $('.someMultipleDOMObjectSelector').each(function(){
           //console.log($(this)[0]); //or -->
           console.log(this);
   });

As to why Chrome's dev tools do this, I can only guess that it is done because it makes more sense to log a jQuery object as an object.

Answer 3

This was broken by the Chrome developers in November 12 and hasn't been fixed as of Canary today.

Use https://github.com/pimvdb/jquery.chromelog to restore the previous behavior as a workaround.

The syntax is slightly different:

$('a').log()

But it's designed to mirror the old, working behavior of Chrome.

Answer 4

Does this answer your question console.dir( element ) ..?

Update:
Dont do this

console.dir( $("el") ); // Dont do this

But use:

console.dir( document.getElementById("el") ); // Do this

Answer 5

I've found this helpful:

console.log.apply(console, $("a"));

Also, if you run console.log = inspect; from inside the console, things will output the old way, but it doesn't work if you just do it from your code, it has to be from the console.