Make DOM nodes look like DOM nodes in the Web Console

VERIFIED FIXED in Firefox 30

Status

defect
P2
normal
VERIFIED FIXED
8 years ago
Last year

People

(Reporter: rcampbell, Unassigned)

Tracking

unspecified
Firefox 30
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [console][console-output][fixed by bugs 843004 and 757866])

Attachments

(2 attachments)

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
Duplicate of this bug: 690256
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 ]
clicking a node should also select it and pop into the page inspector, I think.
Component: Developer Tools → Developer Tools: Console
Whiteboard: [console][console-output]
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?
Assignee: nobody → sachinhosmani2
Status: NEW → ASSIGNED
Whiteboard: [console][console-output] → [console][console-output][mentor=mratcliffe][lang=js]
Comment on attachment 725433 [details] [diff] [review]
Shows the element type in <>

Assigning this to myself for review.
Attachment #725433 - Flags: review?(mratcliffe)
Flags: needinfo?
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.
Whiteboard: [console][console-output][mentor=mratcliffe][lang=js] → [console][console-output]
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.
Priority: -- → P2
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
Does this depend on Bug 855499 for the context menu?
(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.).
(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.
Status: ASSIGNED → NEW
Assignee: sachinhosmani2 → nobody
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.
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.
No longer blocks: console-output
Depends on: 757866
OS: Mac OS X → All
Hardware: x86 → All
(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.
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.
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!
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.
Status: NEW → RESOLVED
Closed: 6 years ago
Depends on: 843004
Resolution: --- → FIXED
Whiteboard: [console][console-output] → [console][console-output][fixed by bugs 843004 and 757866]
Target Milestone: --- → Firefox 30
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
(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!
Just going to refer to this bug as its related: 989629.
Status: RESOLVED → VERIFIED
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.