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:

Answer 1

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 2

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.