how to return the actual data when chrome inspector return [object Object] for a jQuery variable

Question

I used $(this) in a function like this $(document).on("dblclick", "td.edit", function(){ makeEditable($(this)); }); to obtain the html element info that is triggered. But when I do either console.log or alert, the result will shows only [object Object]. I wonder is there methods I can use to see what are actually inside? Thank You

After Tibos's suggested methods I get this msg in chrome console:

[Object, jquery: "1.10.2", constructor: function, init: function, selector: "", toArray: function…]
0: Object
length: 1
__proto__: Object[0]

Answer 1

var foo = { bar : 1 };

When you do:

console.log(foo.toString())

It will no longer display the object, but display the string representation of the object, which is [object Object] as with most objects. The same will happen if you cast it implicitly:

console.log('This is my object: ' + foo); // This is my object [object Object]

To display the object and not its string representation you need to pass the object as a parameter to console.log:

console.log(foo); // { bar : 1 }
console.log('This is my object', foo); // This is my object { bar : 1 }

In your example if you want to display the jQuery wrapper object aroud the HTML Element that fired the dblclick event, you can do this:

$(document).on("dblclick", "td.edit", function(){ console.log($(this)); });

If you want just the HTML Element, you can do this:

$(document).on("dblclick", "td.edit", function(){ console.log(this); });

Answer 2

Try to use

$(this).prop('outerHTML');

or

$(this)[0].outerHTML