Provide a way to inspect a logged variable in the DOM Panel




Developer Tools: Console
10 months ago
10 months ago


(Reporter: nchevobbe, Unassigned)


50 Branch

Firefox Tracking Flags

(Not tracked)




10 months ago
In Bug 1332011 we plan to investigate in using an object inspector (like the debugger does), in-lieu of the variable view (the panel which pops up when clicking on a variable title).
This panel could still be valuable for some people, since it gives the user a way to search through the inspected variable.
Maybe we could keep this by providing a way (a context menu entry, a combination of key + click, ...) to inspect the targeted variable in the DOM Panel, which has also searching capabilities.

A chat on IRC with Honza revealed that it can be technically done, even if I guess there will be some UI/UX challenges.
I like this idea (it's also how it works in Firebug)

The DOM panel implementation is based on TreeView component (devtools/shared/components/tree/tree-view). The panel wraps basic TreeView into DomTree component and sets some custom properties.

See here:

Set of props passed into the TreeView component:

  object: this.props.object,
  provider: new GripProvider(this.props.grips, this.props.dispatch),
  decorator: new DomDecorator(),
  mode: MODE.SHORT,
  columns: columns,
  renderValue: renderValue,
  onFilter: this.onFilter

`object`: this is the root grip. It's received from the backed after evaluating 'window' expression. The DOM panel displays all properties of the Window, but any grip can be passed in - e.g. the one clicked by the user that should be inspected.

`provider`: this object provides data for the TreeView. In case of the DOM panel children of a node represents JS properties. This object is responsible for fetching data from the backend (on demand, as the user is expanding nodes in the tree). Custom providers can provide different/custom data e.g. additional virtual properties that doesn't exist in JS object.

'decorator': adds custom CSS classes (e.g. read only icon)

'renderValue': renders value of a node using Reps


It should be quite straightforward to use the TreeView (or share/clone DomTree component) in another part of DevTools UI (e.g. in a side panel).

You need to log in before you can comment on or make changes to this bug.