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!

Angular directive ng-jsod for drawing JavaScipt Object Diagram

UPDATE: I have now integrated the JSOD with Chrome devtools. Check it out! Does not use the AngularJS rective though, instead uses the Chrome devtools framework.

I have been meaning to hack this for long time. The idea is to draw a object diagram of for a JavaScript object. Finally got around to implementing it as a angular directive. It uses excellent jquery-svg library by Keith Wood.

Note: Currently works on Chrome only.

Usage:

in .html head section:

:
:
<link rel="stylesheet" type="text/css" href="css/jquery.svg.css">
:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://code.angularjs.org/1.2.1/angular.min.js"></script>
<script type="text/javascript" src="js/jquery.svg.js"></script>
<script src="js/ngjsod.js"></script>
<script src="js/ngjsodapp.js"></script>
:
:

in .html body section:

:
<ng-jsod object-name="document.location"></ng-jsod>
:

in your app's .js file inject NGJSOD module:

angular.module('NGJSODApp', ['NGJSOD']);

This will yield:

Try it here!

Github Repository

This is an initial attempt. Obviously needs clean up.

TODO

1. Cleanup. The svg code was written in a brute force fashion. Modularize it,
2. Better layout, support scrolling, panning, zooming, overview for the svg.
3. Integrate with Chrome Devtools's Scope Variables section in the Sources tab. Right click on a object to see it's diagram. I am working on this now and will submit the patch to Chrome Dev Tools. Unfortunately the dev tools extension API does not allow to put a context menu on nodes of Scope Variables nodes. If it allowed that I could have simply written a Chrome extension. The idea behind this is that it will help developers understand the JavaScript object structure.

Feedback welcome!

Desktop App powered by YouTube™

A few years ago I created the YouTube™ Viewer  add-on (which still works!) for Firefox. The idea was to search for YouTube™ videos in a distraction-free and safe manner and then watch them. Google Chrome now supports packaged apps which can be launched from a desktop icon. I thought this can be used to create a YouTube™ viewer app for Chrome. I created one using Chrome Packaged App APIs [1] [2] and Angular.js. One thing I could not achieve though was to actually embed the video inside the app. This is probably a bug...so I filed one:

180390 - Sandboxed page in packaged app cannot display embedded YouTube video.

Here are the screenshots for instant gratification:

The Desktop App powered by YouTube™:

The video playing in Chrome:

The desktop launcher for Desktop App powered by YouTube™:

Get it here.

I will soon blog about the details of how the app works and while doing that explain concepts such as sandboxed pages and security restrictions imposed by the Chrome App programming model.

Here is a screenshot of my original Firefox add-on:

You can download it here. This is built using XUL plus JavaScript.

Enjoy!

Hacking Chrome Developer Tools

In the Contributing to Chrome Developer Tools > Setting up section it talks about:

• :
• Clone WebKit git repo from git://git.webkit.org/WebKit.git
• Set up a local web server that would serve files from WebKit/Source/WebCore/inspector on some port (8090)

I wanted a simple web server. To do this here is what I did:

• Cloned WebKit git repo from git://git.webkit.org/WebKit.git

> cd c:\

> git clone git://git.webkit.org/WebKit.git

• Installed node,js
• Installed connect like so

> cd c:\WebKit\Source\WebCore\inspector

> npm install connect

• Created a front-end-server.js file with content which basically sets up a simple web server:

var connect = require('connect');

connect.createServer(

    connect.static(__dirname)

).listen(8090);

• The __dirname basically serves the files relative to c:\WebKit\Source\WebCore\inspector
• Ran the server like so

> node front-end-server.js

• Followed rest of the instructions on the page Contributing to Chrome Developer Tools
• Download and run Chrome Canary

> ...\chrome.exe --user-data-dir=C:\canary-profile --remote-debugging-port=9222 --remote-debugging-frontend="http://localhost:8090/front-end/inspector.html". BTW, it is a good idea to run with --user-data-dir=C:\canary-profile parameter so that this instance does not interfere with your desktop Chrome you use for your regular use.

• Launch another Chrome (this does not have to be the Chrome Canary) window on http://localhost:9222 . This shows a grid menu of pages to select from to debug. Please note that this menu is served by a small Web server running inside the first instance of Chrome Canary due to the --remote-debugging-port=9222 command line parameter passed to it when it was started

• Clicking on test.html launches the debugger which is using my copy of devtools from C:\WebKit\Source\WebCore\inspector\front-end . Please note that the link address of the test.html in the http://localhost:8090/front-end/inspector.html?ws=localhost:9222/devtools/page/1. Why http://localhost:8090/front-end/inspector.html you ask? That is because of the --remote-debugging-frontend="http://localhost:8090/front-end/inspector.html" command line parameter passed in when first instance of Chrome canary was started.

• I was able to edit the Chrome Developer Tools front-end code in the following directory iteratively  C:\WebKit\Source\WebCore\inspector\front-end

Voila! I was in business...

Chrome Developer Tools Enhancement - Scope Varibles section

I just submitted an enhancement patch to the Chrome Developer tools issue:

• 29714 - apply a style change to scope variables as they change from step to step

The patch implements the following functionality. As you step through the JavaScript code:

• When a new property comes into scope it's name and value is highlighted. For example on line 10 a new propety j was added to object o. Hence it's name and value is highlighted.

• When a property is modified since the last suspension the value is highlighted. For example in line 11 the values of both properties i and j were modified, hence their values are highlighted.

• The value is highlighted when the type of the value changes (not shown). For example, i = 1; and i = '1'; are same in terms of == operator, such a change is highlighted.

This functionality is (better) similar to the Eclipse JDT Java Debugger.

How does it work

The implementation is fairly simple. It keeps track of the set of properties and their values and types that are shown in the Scope variables section. Next time when the debugee is suspended it compares the new set of properties with the old set. That is how detects new properties as well as changes in values and types. The implementation is fairly efficient as long as the user has not expanded too may nodes of the Scope Variables tree.


I do not have commit permissions, but I hope the Chrome Developer Tools team accepts my patch.

If anyone is adventurous enough here is the patch, please give it a try and send me feedback. The patch applies to .ObjectPropertiesSection.js and WatchExpressionsSidebarPane.js.

You can also apply the changes in the patch in the Sources tab source editor of the DevTools.js. For this you will have to invoke Chrome Developer Tools (meta instance) on the window of the Chrome Developer Tools (first instance) that you are using to debug your web page. Kind of meta debugging. For this to work easily your first instance of Chrome Developer Tools has to be running in separate window.


Here is a related issue, once solved will make the implementation more precise becuase the eaxct identity of the objects in the debugee will be reliabliy maintained be the backend:

• 109908 - Web Inspector: support stable remote object ids

Enjoy!

JavaScript Instance Diagram

For JavaScript code:

var obj = {};

[Note: __proto__ is available on Chrome and Firefox]

For JavaScript code:

function Rect(w, h)
{
    this.width = w;
    this.height = h;
}
Rect.prototype.area = function() {
    return this.width * this.height;
}
var rect = new Rect(2,4);

[Note: __proto__ is available on Chrome and Firefox]