Thursday, January 29, 2015

Show class definition - Chrome Devtools Enhancement

Chrome Devtools Scope Variables Pane supports Show function definition context menu for properties of function type. Along the same lines I developed a Show class definition action. Basically it allows you to jump to the definition of the constructor of  properties of type object.

For example see the below screenshots. The context menu on johndoe property's value shows the Show class definition action.


Invoking the Show class definition will open the source file where the Person function is defined and highlight it like so:


If the source location is not found and if the property is either a instance of standard JavaScript type or DOM type then it will show the API page from MDN e.g.



BTW the above also works for the Show function definition action already supported by Chrome Devtools:


You can try it by loading this devtools:

http://chrome-developer-tools.googlecode.com/git/devtools-frontend/Source/devtools/front_end/inspector.html

URL in Chrome Devtools App.

I have filed an issue 453801 and submitted a patch. Please vote on the issue if you like this feature.

Feedback welcome.

No comments: