Issue 98 in chromedevtools: Add JavaScript Object diagramming capability to Scope Variables and Watch section

[chromed...@googlecode.com]

Status: New
Owner: ----
Labels: Type-Defect Priority-Medium

New issue 98 by sandipchitale: Add JavaScript Object diagramming capability
to Scope Variables and Watch section
http://code.google.com/p/chromedevtools/issues/detail?id=98

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.




Attachments:
devtoolsissuecontextmenu.png 13.6 KB
devtoolsissue.png 20.6 KB

--
You received this message because this project is configured to send all
issue notifications to this address.
You may adjust your notification preferences at:
https://code.google.com/hosting/settings

[chromed...@googlecode.com]

Comment #1 on issue 98 by sandipchitale: Add JavaScript Object diagramming

capability to Scope Variables and Watch section
http://code.google.com/p/chromedevtools/issues/detail?id=98

This is a request for enhancement.

The patch is attached.

Attachments:
jdos.patch 150 KB

[chromed...@googlecode.com]

Comment #2 on issue 98 by sandipchitale: Add JavaScript Object diagramming

capability to Scope Variables and Watch section
http://code.google.com/p/chromedevtools/issues/detail?id=98

The latest patch

Attachments:
jsod.patch 151 KB

[chromed...@googlecode.com]

Comment #3 on issue 98 by sandipchitale: Add JavaScript Object diagramming

capability to Scope Variables and Watch section
http://code.google.com/p/chromedevtools/issues/detail?id=98

Latest screenshot.

Now support loading object, array and function type properties.

[chromed...@googlecode.com]

Comment #4 on issue 98 by sandipchitale: Add JavaScript Object diagramming

capability to Scope Variables and Watch section
http://code.google.com/p/chromedevtools/issues/detail?id=98

Latest screenshot.

Now support loading object, array and function type properties.

Attachments:
devtoolsjsod.png 29.8 KB

[chromed...@googlecode.com]

Comment #5 on issue 98 by apav...@chromium.org: Add JavaScript Object

diagramming capability to Scope Variables and Watch section
http://code.google.com/p/chromedevtools/issues/detail?id=98

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.

[chromed...@googlecode.com]

Comment #6 on issue 98 by sandipchitale: Add JavaScript Object diagramming

capability to Scope Variables and Watch section
http://code.google.com/p/chromedevtools/issues/detail?id=98

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

[chromed...@googlecode.com]

Comment #7 on issue 98 by sandipchitale: Add JavaScript Object diagramming

capability to Scope Variables and Watch section
http://code.google.com/p/chromedevtools/issues/detail?id=98

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

[chromed...@googlecode.com]

Updates:
Status: Invalid

Comment #8 on issue 98 by apav...@chromium.org: Add JavaScript Object

diagramming capability to Scope Variables and Watch section
http://code.google.com/p/chromedevtools/issues/detail?id=98

Thanks, done!