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.

Detect window metric changes using Highlight changed properties enhancement

May times it is not clear which window metrics properties are affected when you move, resize or scroll windows. I found the Highlight changed properties enhancement to Chrome Devtools very useful here. For example I loaded up the enhancement into Chrome Devtools App, started debugging, suspended the Javascript execution, added a watchpoint on window,expanded the watchpoint, resumed the debugger, moved, resized the window and suspended the Javascript execution again, and looked at the highlighted properties. Viola.

BTW if you like the Highlight changed properties enhancement then Star or comment on the Chrome Devtools issue 441374. The patch is being reviewed at the moment and hopefully the enhancement will become available in Chrome Browser soon.

NOTE: Now the Highlight changed properties enhancement is coded as an experiment. You will have to turn on the behavior by selecting the Setting (Gear) > Experiments > Highligh changed properties checkbox.

Make sure to load this devtools:

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


URL in Chrome Devtools App,

DevTools App 1.9 available on Chrome Web Store

Get it!

Chrome Developer Tools Enhancement - highlight on change - Settings

In this blog post I blogged about Chrome Developer Tools Enhancement -  highlight on change. I have coded it  as an experiment.to control this feature.

To try this use this URL for the devltools:

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

as explained in this blog entry.