JavaScript Object Diagram integration with Chrome Devtools | Sources Tab | Scope Variables section

UPDATE: You may want to check out this entry to easily try out the JSOD integration.

In this blog entry I blogged about the JavaScript Object Diagram. In it I mentioned that the JavaScript Object Diagram can be integrated with the Chrome Developer Tools | Sources Tab | Scope Variables section. So I started the implementation and I have finished the implementation.

How does it work?

When the debugee is suspended, in the Sources Tab | Scope Variables section you can see the scope variable. If you right click on a value of a variable you will see the JavaScript Object Diagram menu item in the context menu like so:

And selecting the menu shows this:

Supports:

• Now support diagramming of arbitrary expression.
• You can also click on the = button in the cells of object, array and function type properties to load then in the view
• Pan

• Using buttons
• Using mouse drag
• Using mouse wheel
• Zoom
• Using buttons
• Using Slider
• Using mouse wheel (hold Ctrl down)
• Reset
• Click on home button to pan to origin
• Click again quickly again to reset zoom to 100%

Try it

You can try it today. 

Follow these instructions:

• Download and install Chrome Canary from here.
• Launch it with command:

"c:\Users\...\AppData\Local\Google\Chrome SxS\Application\chrome.exe" --remote-debugging-port=9222 --no-first-run --user-data-dir=C:\temp\devtoolsprofile

• This basically launches the debug server which can display the list of pages available for debugging.
• Then go to any page that you want to debug.
• Create another tab and go to url:

http://localhost:9222/#https://sandipchitaleschromedevtoolsstuff.googlecode.com/git/front_end/inspector.html?experiments=true

or alternatively:

UPDATE: You may want to check out this entry to easily try out the JSOD integration.

• This will show the list of pages available for debugging as mentioned 3 steps ago. Select the one you want to debug. This will load the my devtools code located at

https://sandipchitaleschromedevtoolsstuff.googlecode.com/git/front_end/inspector.html

• Now set a breakpoint. When it is hit go to Sources Tab > Scope Variables section, choose a variable you want to diagram and right click on it's value to JavaScript Object Diagram menu item and you will see the diagram (see screenshot above).

I hope this helps JavaScripts beginners understand the JavaScript's prototypical inheritance.

TODO

• Submit a patch to Chrome Developer Tools.
• Files a enhancement request Issue 357962 . Attached a patch today (3/29/2014). Please star the issue if you want to see this feature included or at least implemented side by side with devtools.
• Wait for it to be accepted (hopefully) and may be available optionally

Git repo

BTW I was able to use the excellent GitHub for Windows client to work with the above Google Code git repository. No problem. Simply dragged and dropped the folder from Explorer on top of the GitHub for Windows window.

Stay tuned!