682033 - Make DOM nodes look like DOM nodes in the Web Console

Status: VERIFIED FIXED

(DevTools :: Console, defect, P2)

Description

[Rob Campbell [:rc] (:robcee)]

When an object is displayed in the web console, we currently get a simplified, toString() version of that object. If the object is a DOM node, we should display the node as HTML markup, preferably colorized.

see: https://img.skitch.com/20110825-fedjgy2qejxijha7uk5dih5nr.jpg

Comment 2

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

The same goes for other object types. From the feedback I heard from the all hands was that people want to see e.g. an HTML collection of DOM nodes as an array, e.g.
[ div, div, div, div, div, div, div, div ]

Comment 3

[Kevin Dangoor]

clicking a node should also select it and pop into the page inspector, I think.

Comment 4

[Sachin Hosmani [:sachin]]

Attachment: Shows the element type in <>

If this bug isn't too involved and still open, I would like to work on it.

If that is okay, so far I've made the Web Console show the type of the element instead "[Object .... ]".
I would like to know how I can get an HTML element's tag like string representation (with attributes) like how Inspect Element shows it.
Would someone guide me further?

Comment 5

[Sachin Hosmani [:sachin]]

Attachment: A screenshot of the above patch working.

Comment 6

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Comment on attachment 725433 [details] [diff] [review]
Shows the element type in <>

Assigning this to myself for review.

Comment 7

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

This looks good but we need to wait for a bunch of changes from Mihai. He has plans to do something like this but show some basic information about any object. This involves some complex changes to the remote protocol.

Comment 8

[Rob Campbell [:rc] (:robcee)]

should be showing tag and attributes, not necessarily showing subtree.

Need to figure out what to do with these when we click on them. Show the tree in a sidebar? Switch to Inspector? A couple of questions outstanding still.

Comment 9

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

My opinion ... in the console it should look like this:
<div class="blah" attribn="valuen">

The context menu should display:
View in Property View
View in HTML

Comment 10

[Sachin Hosmani [:sachin]]

Does this depend on Bug 855499 for the context menu?

Comment 11

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

(In reply to Sachin Hosmani from comment #10)
> Does this depend on Bug 855499 for the context menu?

No, but I am fairly certain that either msucan or robcee is working on this. We were certainly discussing making things look better when logged to the console (arrays, HTMLCollections, etc.).

Comment 12

[Sachin Hosmani [:sachin]]

(In reply to Michael Ratcliffe [:miker] [:mratcliffe] from comment #11)

> No, but I am fairly certain that either msucan or robcee is working on this.
> We were certainly discussing making things look better when logged to the
> console (arrays, HTMLCollections, etc.).

Okay. I'm unassigning myself.

Comment 13

[Dane MacMillan [:danemacmillan]]

I've noticed that currently the way DOM nodes are presented in the console output, and even in the right-side panel that appears in various tabs, are either generic nodes, such as <div>, <span>, etc, or they will include the node id, such as <div#node-id>, <span#node-id2>, etc. CSS class names are used a lot, but they're not represented in the areas described. I think that information should be added. 

Firebug lists them like this: <div#node-id.node-class.node-class2>
Chrome devtools list them like an actual node, much like how Michael in comment 9 suggests. However, they go a step further and let the node and its child elements expand.

Comment 14

[Mihai Sucan [:msucan]]

We are improving output for DOM elements in bug 757866.

Patrick, should we add class names in concise view? What do you think? I only added the ID because some elements can have many classes, but I can be convinced otherwise.

Comment 15

[Patrick Brosset <:pbro>]

(In reply to Mihai Sucan [:msucan] from comment #14)
> We are improving output for DOM elements in bug 757866.
> 
> Patrick, should we add class names in concise view? What do you think? I
> only added the ID because some elements can have many classes, but I can be
> convinced otherwise.
I originally started with displaying all attributes, and it was definitely too much information when outputing a NodeList for instance. I haven't tried with just ids and classnames though. I could give that a shot, but some nodes may have lots of classes, or long ones. Should we be focusing on adding an ellipsis mechanism to avoid long output messages?
This could perhaps be done as a follow-up bug if needed.

Comment 16

[Dane MacMillan [:danemacmillan]]

Mihai, that was the actual bug that lead me to search further about this, and then settle on this bug. I felt mentioning it there might pull away from the main focus of the discussion, so I posted here. 

I think a middle zone on the spectrum between too much and too little information can be found. I mention it mostly because I see a lot of this: http://i.imgur.com/KFKtmDy.png. I underlined the generic <div> nodes. From a glance, they really say nothing at all about the node. I'd say that's probably too little information, which is only marginally better than having *no* information. It's not immediately useful, which is what I'm getting at. In actuality, all those generic <div> nodes in the attachment have classes, but with the current behaviour one would really have to dig to find them.

I know some developers can go crazy with classes, but I've never seen it go to unreasonable lengths. I don't think truncating the information is necessary. If there are those exceptions where there are a lot of class names, I think they should just be regarded as nothing more than an overzealous developer, and the information should nonetheless be displayed in its entirety. I even think truncating the results of found nodes in the console shouldn't happen, but that's another discussion.

Ultimately, I think class names are a very necessary indicator to Web developers. In that way, they are as important as ids. Considering how often class names are queried in the DOM, especially today, they shouldn't be relegated, or seen as less informative.

Comment 17

[Mihai Sucan [:msucan]]

You make a good point. It is up to Patrick to decide to add class names to concise previews as well. I agree they are useful. Thanks for your ping on this issue!

Comment 18

[Mihai Sucan [:msucan]]

This bug is now fixed. In bug 843004 we added a text-only display of DOM elements. In bug 757866 we added syntax highlighting, a link to jump to the markup view, and highlighting of the DOM element in the page when the user hovers the element in the console output.

Comment 19

[Dane MacMillan [:danemacmillan]]

I noticed something buggy about the output of nodes, though for the meantime I seem only to reproduce it on the bugzilla pages. I'm sure it can be reproduced elsewhere. Maybe it's the colon in the class name that is affecting the output. Here's an image:

http://i.imgur.com/eHYZMH1.png

Comment 20

[Mihai Sucan [:msucan]]

(In reply to Dane MacMillan from comment #19)
> I noticed something buggy about the output of nodes, though for the meantime
> I seem only to reproduce it on the bugzilla pages. I'm sure it can be
> reproduced elsewhere. Maybe it's the colon in the class name that is
> affecting the output. Here's an image:
> 
> http://i.imgur.com/eHYZMH1.png

Please file a bug. Should be a one-liner fix. Thank you!

Comment 21

[Dane MacMillan [:danemacmillan]]

Done: bug 983614.

Comment 22

[Dane MacMillan [:danemacmillan]]

Just going to refer to this bug as its related: 989629.

Comment 23

[Dane MacMillan [:danemacmillan]]

bug 989629