Bug 113595 – Web Inspector: associating objects with dom elements

• Status: RESOLVED
• Resolution: FIXED
• Component: Web Inspector (Deprecated)

[TJ Holowaychuk]

The ability to associate objects with dom elements, and making this easy to inspect would be great for inspecting high density client-side applications. Primarily because it is often difficult to single out objects with console.log() calls without setting up a bunch of conditionals. 

I whipped up https://github.com/component/inspect as an example, and while this technique works fine there's still quite a bit of indirection, you have to:

  - add this component
  - associate the data
  - click the element in web inspector
  - invoke inspect($0)

I would love the ability to find the dom element, right click and have a context menu item to inspect it. As far as making this a generic solution I'm not sure what would be best. Maybe an "Inspect" context menu item could simply console.log($0) or similar. The JavaScript portion is also obviously too opinionated, maybe a better solution would just be to add the ability to extend the context menu from scripts? I was also trying to find out if $0 was exposed to scripts at all so my inspect($0) hack could simply be inspect().

[Radar WebKit Bug Importer]

<rdar://problem/13537438>

[TJ Holowaychuk]

I got a tweet from someone and completely forgot about the "properties" panel. Still a little bit of indirection if you have one main object to associate but that works pretty well. Feel free to close this unless  you guys feel there's value in decreasing the indirection for 1-1 object/dom inspection, this is pretty tolerable now though.

[Pavel Feldman]

(In reply to comment #2)
> I got a tweet from someone and completely forgot about the "properties" panel. Still a little bit of indirection if you have one main object to associate but that works pretty well. Feel free to close this unless  you guys feel there's value in decreasing the indirection for 1-1 object/dom inspection, this is pretty tolerable now though.

There is a way to reveil any JS wrapper in Elements panel (via context menu) and hovering over JS wrapper should highlight node in the screen on the recent Chrome version. Going back is $0 or properties panel.

I can't reach https://github.com/component/inspect for details of your proposal.

[Brian Burg]

Not exactly sure what the requested functionality is here, but you can still inspect properties on JS wrappers using $0 in the console.