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!

Overview Plugin for Eclipse

The Overview Eclipse Plugin shows the overview of the current text editor in the Overview view. Here is a screenshot:

Please note that the tooltip shows the line under the cursor with a » . If the mouse is clicked the tracked editor will scroll to that line.
Install it from this update site:

http://sandipchitaleseclipseplugins.googlecode.com/svn/trunk/text.overview.updatesite/site.xml

Now available on Eclipse Marketplace.



You may have to reset the perspective first time after installation to get the Overview view in the right position i.e.to the right of Editors area.

TODO

1. Use Overview view to scroll the editor whose overview is being shown.
2. Track the changes to the tracked editor. Well, sort of. When the editor contents are modified the Overview stops updating. It resumes if the modifications are saved or the focus is lost to other editor and then regained.
3. Show tooltip with context showing line under caret.
4. Track changes to text as the user is typing.

Tested with Eclipse 3.5+ and 4.1+.

Source

Enjoy! 

gSpeak Chrome Extension

gSpeak is a simple Chrome extension. To install it click here. Once you install the extension you will see the gSpeak button on the Chrome toolbar:

Click on the button in the toolbar to speak the text selection in the webpage. If there is no text selection in the webpage, the webpage content is spoken. While the speech is in progress, the badge on the button shows the remaining percentage of the text to be spoken. Clicking on the button pauses the speech. Once paused, if you click on the button within one second the speech is cancelled. After one second, clicking on the button resumes the speech.

You can adjust the speech settings on the gSpeak Options page:

Enjoy!