Closed
Bug 682033
Opened 13 years ago
Closed 11 years ago
Make DOM nodes look like DOM nodes in the Web Console
Categories
(DevTools :: Console, defect, P2)
DevTools
Console
Tracking
(Not tracked)
VERIFIED
FIXED
Firefox 30
People
(Reporter: rcampbell, Unassigned)
References
Details
(Whiteboard: [console][console-output][fixed by bugs 843004 and 757866])
Attachments
(2 files)
(deleted),
patch
|
Details | Diff | Splinter Review | |
(deleted),
image/png
|
Details |
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•13 years ago
|
||
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•13 years ago
|
||
clicking a node should also select it and pop into the page inspector, I think.
Reporter | ||
Updated•12 years ago
|
Blocks: console-output
Component: Developer Tools → Developer Tools: Console
Whiteboard: [console][console-output]
Comment 4•12 years ago
|
||
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•12 years ago
|
||
Flags: needinfo?
Updated•12 years ago
|
Assignee: nobody → sachinhosmani2
Status: NEW → ASSIGNED
Whiteboard: [console][console-output] → [console][console-output][mentor=mratcliffe][lang=js]
Comment 6•12 years ago
|
||
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?
Comment 7•12 years ago
|
||
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.
Updated•12 years ago
|
Whiteboard: [console][console-output][mentor=mratcliffe][lang=js] → [console][console-output]
Updated•12 years ago
|
Attachment #725433 -
Flags: review?(mratcliffe)
Reporter | ||
Comment 8•12 years ago
|
||
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
Comment 9•12 years ago
|
||
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•11 years ago
|
||
Does this depend on Bug 855499 for the context menu?
Comment 11•11 years ago
|
||
(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•11 years ago
|
||
(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
Updated•11 years ago
|
Assignee: sachinhosmani2 → nobody
Comment 13•11 years ago
|
||
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•11 years ago
|
||
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•11 years ago
|
||
(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•11 years ago
|
||
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•11 years ago
|
||
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•11 years ago
|
||
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: 11 years ago
Depends on: 843004
Resolution: --- → FIXED
Whiteboard: [console][console-output] → [console][console-output][fixed by bugs 843004 and 757866]
Target Milestone: --- → Firefox 30
Comment 19•11 years ago
|
||
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•11 years ago
|
||
(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•11 years ago
|
||
Done: bug 983614.
Comment 22•11 years ago
|
||
Just going to refer to this bug as its related: 989629.
Comment 23•11 years ago
|
||
Updated•10 years ago
|
Status: RESOLVED → VERIFIED
Updated•6 years ago
|
Product: Firefox → DevTools
You need to log in
before you can comment on or make changes to this bug.
Description
•