console.log() not outputting HTML of jQuery selection object

Question

I got a problem when using console.log in Google Chrome. Suddenly when I was outputting a element like $(this) it was display like:

[<div>, context: <div>]

or

[jQuery.fn.jQuery.init[1]]

in the console. ( Both came from the same row: console.log($(this)) )

This problem arose yesterday from nowhere. There ain't a problem with the code. I logged the exact same thing on an other computer and there it is being displayed like:

[<div class='element'></div>, ...]

Update: the new Chrome version changes the output of console.log()

Does anyone know how I can get back to the original settings of Google Chrome console?

Answer 1

To answer the question:

• Does anyone know how I can get back to the original settings of Google chrome console?

There are no settings to get the former output of console.log(). You can either:

• downgrade the browser (use an older version of chrome or chromium based alternatives)
• overwrite console.log() by adding your own function log()
• use outerHTML in some cases or upgrade to chrome 25.0.1323.1 (dev channel) where console.log($(#Selector)[0]); returns outHMTL again (see below).

Chrome 23/24: Output of console.log() changed sometimes

According to user916276 the output of console.log(jQuery-Object) has changed:

// output of console.log($jQuerObject) 
[<div class='element'></div>, ...] // in chrome <= 23
[<div>, context: <div>]            // in chrome 24

User brentonstrine made me aware of the fact that my context.outerHTML does not always work.

I updated my code with a new example. It seems that the existence of jqObject.context.outerHTML depends how you pass the jQuery-Object to the function. I tested it with chrome dev channel (25.0.1323.1) and two chromium based versions (21, 22).

console.log($(this)); // old chrome versions 
// new chrome version >23
// if you pass this to the function see my getThis(_this) function
console.log($(this).context.outerHTML); 
// if you use a jQuery selector
console.log($(this)[0]);   // at least in chrome build 25.0.1323.1

To avoid misunderstandings. This answer is about the changed behaviour of writing a jQuery object to the inbuild console of the recent google chrome browsers (version 24, 25).

Chrome source code

I took a look into the chrome source code changes at the Console.cpp and in the timeline view to find out about the changes in the WebInspector. I could not find the exact change that is responsible for the changed behaviour of console.log(). I assume that it has to do with changes to ConsoleView.js, 2, 3. If anyone would like to initiate that console.log() returns the same output as in Chrome 21, 22 he could file a bug. This two bugs could be used as a template to place the change request.

Answer 2

console.log.apply(console, $(this));

Answer 3

The output is correct as $(this) refers to jQuery selection object, not the underlying DOM object(s).

If you wish to output the raw DOM element(s), you can try the following:

 console.log( $( this ).get(0) ) 
 // Or just 
 console.log( this )

Or you can also do:

 console.log( $( this ).html() )  

Answer 4

Here is an even better solution than console.log.apply(console, obj); that I just discovered. Check out console.dirxml(obj); which gives nearly the same output when obj is a jQuery selector result set. However, only the latter works when obj is a specific element from a jQuery selector result set.

Here is a demo you can do on this page...

var i=0
console.log(++i);
console.dirxml($$('.answer'));
console.log(++i);
console.dirxml($$('.answer')[0]);
console.log(++i);
console.log.apply(console, $$('.answer'));
console.log(++i);
console.log.apply(console, $$('.answer')[0]);

You'll see that #4 logs "undefined".

So, from now on I'm going to use console.dirxml because it's simple, effective, and built in. Having to pass console as the first argument to apply never sat right with me anyway.

Answer 5

By default , chrome now returns an object with all details pertaining to that element when u do a console.log($(element)).

an example of what it actually returns

  console.log($('input:first'));
  [<input>, prevObject: c.fn.c.init[1], context: #document, selector: "input:first"] 
  0: <input>
  context: #document
  length: 1
  prevObject: c.fn.c.init[1]
  selector: "input:first"
  __proto__: Object[0]

so if u do console.log($('input:first')[0]) u would get ur desired Result.

hope this helps

Answer 6

My edit to @brentonstrine's answer got rejected, so I'm going to make a new answer for it. But see my other answer on this page for an even better solution.

This demo shows you why we care about logging this new way versus the normal way...

// paste this whole block into the console of THIS PAGE and see a working demo!

var domlog = function(obj){ console.log.apply(console, obj); };

domlog($('#answer-13594327'));

// compare ^that^ to the normal element logging...

var normallog = function(obj){ console.log(obj); };

normallog($('#answer-13594327'));

Answer 7

console.log.apply(console, [].slice.call($('p'), 0))
-> ►<p>…</p>, ►<p>…</p>, <p class="label-key">viewed</p>

Update: Simpler solution.

---

Rationale behind the console output change:

What was the rationale behind the request to not include attributes/textContent?

Response from pfeldman, DevTools developer:

people that dump DOM lists appreciate the dense look.

crbug.com/50316

Answer 8

This is my sollution, to wrap console.log in my own function, it has some shortcomings, like it doesn't tell you the line number the problem occured in but I make up by outputing significan log messages... if anyone want to improve on it feel free!

Note: underscore.js is a dependency, I'm sure you can do it in pure JS, but I always depend on underscore.js :)

// wrap the console.log function
var log = function(data) {
    // switch setting
    var allowed = true;
    if (allowed) {
        console.log("LOG");
        console.log(typeof data);
        if (typeof data == "object" || typeof data == "array") {
            _.each(data, function(item) {
                console.log(item);
            });
        } else {
            console.log(data);
        }
    };

The take home message here is:

if (typeof data == "object" || typeof data == "array") {
            _.each(data, function(item) {
                console.log(item);
            });
        } else {
            console.log(data);
        }

Then you just do: log($(".some.class")); and get the elements as old school DOM objects in the console.