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));