Open Bug 1552531 Opened 5 years ago Updated 1 month ago

Allow inspecting a logged DOM node's tree (vs the DOM properties)

Categories

(DevTools :: Console, enhancement, P2)

enhancement

Tracking

(Not tracked)

People

(Reporter: Harald, Assigned: bomsy)

References

(Blocks 1 open bug)

Details

Attachments

(2 files, 1 obsolete file)

Attached image Firefox vs Chrome

What were you doing?

  1. console.log(document.body) in Console
  2. Expand the logged node

What happened?

Node's DOM properties expand.

What should have happened?

Expand DOM tree.

Anything else we should know?

  • Chrome has this behavior.
  • A big use case is inspecting detached DOM trees; which is really hard right now.
  • DOM properties are a messy list and have little affordance for navigation, like search.
  • I would hypothesize that DOM properties are less of a concern, but still need to be accessed as Firebug treated them first class and our audience might be used that – maybe the sidebar can be of help here.

Sparked by this tweet: https://twitter.com/ChrisFerdinandi/status/1129092610990268416

My 2 cents:
Chrome can list DOM properties too, just in a different place: the properties sidebar pane in the Elements panel.
So, we basically both have the same features (navigating the DOM tree, and displaying DOM properties), but in different places/different ways.
I believe this is typically the kind of UI differences we should eliminate, in order to make it easy for people to switch between browsers.

Doing this change would be beneficial for the inspector too actually. It would force us to make it possible to:

  • display the markup-view as a component, anywhere we need it,
  • set any node as the root of the tree.

Better componentization and reusability of the markup-view sound like a good modernization which will help us in the future.

On top of this, that means we should also add a DOM properties sidebar pane in the inspector (requested 8 years ago in bug 704094). As this is the only place where those properties would be accessible (plus we could make it searchable which would be super nice).

Type: defect → enhancement
Priority: -- → P5

harald, any hint why it was set a P5? It looks like it's something we'd like to have right?

Flags: needinfo?(hkirschner)

I actually thought about this feature a few times since. Not sure why I made it P5 back then. This is definitely high on my list of quality of life improvements. P2 for now so it dosn't drop off the map and as we lack fine-grained enhancement priorities.

Flags: needinfo?(hkirschner)
Priority: P5 → P2
Assignee: nobody → hmanilla

Still work in progress

Todo

  • Fix Error while calling actor 'domwalker's method 'getNodeActorFromObjectActor' which show up in the browser console
  • Render text nodes correctly
  • Add Tests
  • Note: Looks like await getNodeValue slows stuff down. Fix that
  • Cleanups
Attachment #9145372 - Attachment description: Bug 1552531 - Add function to load children given an node r=nchevobbe → Bug 1552531 - Show child nodes instead of node properties r=nchevobbe
Blocks: 1652671
Attachment #9145372 - Attachment is obsolete: true
Severity: normal → S3
See Also: → 1880693
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: