How to print an HTMLElement's properties to console instead if its HTML code?

Question

Suppose the following code:

var a = new Image(1, 1);
a.onload = function() {
    console.log(this);
};
a.src = 'some.address.com/some/image.jpg';

When this image gets loaded, it will print itself to the console, but the output is an HTML element, like so:

<img width="10" height="10" src="http://some.address.com/some/image.jpg">

When I expect that it would print it as any other JavaScript object, something like:

enter image description here

Is there a way to force it to be print like this?

Try console.dir via http://stackoverflow.com/questions/11954152/whats-the-difference-between-console-dir-and-console-log — mxs, Jun 19 '15 at 19:05
@MikeStrand Works perfectly! You can write an answer if you want :) — Bruno Finger, Jun 19 '15 at 19:06

score 2 · Accepted Answer · edited May 23 '17 at 11:43

2

Try console.dir() instead of console.log(). There's some variation of behavior across browsers. More details at: What's the difference between console.dir and console.log?

edited May 23 '17 at 11:43

Community

answered Jun 19 '15 at 19:11

mxs

score 1 · Answer 2 · answered Jun 19 '15 at 19:23

1

Force it to output an object by putting it in one:

var a = new Image(1, 1);
a.onload = function() {
    console.log({obj: this});
};
a.src = 'some.address.com/some/image.jpg';

answered Jun 19 '15 at 19:23

jperezov

2 Answers2