Add JavaScript Object diagramming capability to Scope Variables and Watch section

[GoogleCodeExporter]

SDK/Debugger version:
Eclipse version:
Google Chrome/V8 Embedder + version:
[For WebKit (WIP) protocol] Backend version:
OS + version:

What steps will reproduce the problem?
1. Nothing yet

What is the expected result?
1. It should be possible to see a diagram of properties, their prototype and 
constructor chain in Scope Variables and Watch sections by invoking a context 
menu. It should also possible to quickly evaluate expressions in context and 
show the object diagram.

See: 
http://sandipchitale.blogspot.com/2014/03/javascript-object-diagram-integration.
html

I originally tried to write it as an extension using chrome.devtools.panel api 
(which I would have preferred), but as of now it is not possible to attach two 
debuggers to the same page. So I wrote this patch.

What happens instead?
1. This is not available yet.

The idea is to make it very clear where the instance variables and methods are 
coming from. This will also help JavaScript beginners understand the JavaScript 
prototypical inheritance and chaining as well as property override in a visual 
way. If so I can submit a patch. The implementation uses an open source jquery 
svg library though. 

The question is, is this a worthwhile addition to devtools.

Original issue reported on code.google.com by sandipchitale on 25 Mar 2014 at 2:20

Attachments:

• devtoolsissuecontextmenu.png

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

The latest patch

Original comment by sandipchitale on 29 Mar 2014 at 6:40

Attachments:

• jsod.patch

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Latest screenshot.

Now support loading object, array and function type properties.

Original comment by sandipchitale on 29 Mar 2014 at 6:47

Attachments:

• devtoolsjsod.png

[GoogleCodeExporter]

This issue tracker is for the "chromedevtools" project, which is "Google Chrome 
Developer Tools for Java". If you intended to file this FR against Chrome 
DevTools, please do so at http://crbug.com/new.

Original comment by apav...@chromium.org on 29 Mar 2014 at 8:36

[GoogleCodeExporter]

Ah ...I see. Sorry about that. I will file it at http://crbug.com/new

Original comment by sandipchitale on 29 Mar 2014 at 9:57

[GoogleCodeExporter]

Please close the issue. Not sure how I ended up here...probably a misdirected 
link somewhere.

Original comment by sandipchitale on 29 Mar 2014 at 10:05

[GoogleCodeExporter]

Thanks, done!

Original comment by apav...@chromium.org on 30 Mar 2014 at 2:54

• Changed state: Invalid