Dev Tools App history

Dev Tools App Stats

> 1000 users

Single Devtools with all my enhancements

I have consolidated all my enhancements to Chrome Devtools into one.

DevTools app is featured at Showcase Chrome Debugging Protocol Clients

The URL for enhanced Chrome Devtools is:

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

which you need to load in DevTools app above. Please note that DevTools app is not essential to try out the enhanced version of Chrome Devtools but it sure makes it easy.

The enhancements are:

• Highlight changed properties ( Issue 441374 )

• Show function documentation ( Issue 453801 )
• Show constructor definition
• Show constructor documentation

• Go to member all files (CTRL+SHIFT+ALT+P) ( Issue 456520 )

You need to enable experiments:

I have now made this the default Devtools URL in Chrome Devtools App.

Appolymer - a simple Chrome app shell using Polymer

Appolymer is a simple Chrome App shell using Polymer

GitHub

> git clone https://github.com/sandipchitale/appolymer.git

> cd appolymer

> npm install

> bower install

The following is needed to deal with CSP policy issue with Polymer in Chrome App

> grunt vulcanize

This processes the app/appolymer.html file and produces app/appolymer-csp.html and app/appolymer-csp.js. Please note that the app/js/background.js uses app/appolymer-csp.html as the URL of the created application window.

Here is the relevant portion of the Gruntfile.js:

  grunt.initConfig({

    :

    :

    vulcanize: {

   options: {

     csp: true

   },

   csp: {

    files: {

    'app/appolymer-csp.html': 'app/appolymer.html'

    },

   }

    },

    :

    :

> cd app

Install using  Settings > Extension > Select Developer Mode > Load unpacked extension... from app folder.

All files outline - Chrome Devtools Enhancement

Call to action: If you like this functionality then please * the issue 456520.

UPDATE: I just committed a change whereby the identifier at the current caret position is used as initial query string in the Go to member dialog. This gets me very close to the Ctrl+click navigation I am after.

The current implementation of Go to member (CTRL+SHIFT+P) in the Chrome Devtools shows the outline of members in the current script file. That is good, but not as good as showing the members from all the loaded scripts. This is different than simply doing the Search across all sources which will find the text in all files as opposed to the definition of a symbol. That is what I have implemented as Go to member all files (CTRL+ALT+SHIFT+P).

In the screenshot below you can see that it is showing the members from all files as opposed to only the current file.

To try this you can use DevTools App and enter the url:

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

I have filed an issue 456520 and submitted a patch.

It works great when I am doing inspector inception as mentioned here. The members can be filtered by typing the search text. The dialog shows the matching members. The line number:script name are shown on the right side. Hovering on the right side will show the full URL of the script. Selecting the member will open up that script at the specific line number.

Feedback welcome!

Update: Show constructor definition - Chrome Devtools Enhancement

Call to action: If you like this functionality then please * the issue 453801.

Based on the feedback on the review on issue 453801 I have made some changes to the implementation.

The functionality is now split into the following actions:

For function objects

•  Show function documentation

For object objects

•  Show constructor definition
•  Show constructor documentation

The Show constructor definition works similar to the existing Show function definition, except that it shows the definition of the 'constructor' property.

To turn on the following actions:

• Show function documentation
• Show constructor documentation

You have to enable it on the experiments tab by selecting the Show function documentation checkbox and entering the url for APIs like this:

That way the API URLs do not have to be hard coded into the code and you can add additional URLs. The {api} token will be replaced by the API name.

The URLs are (for easy copy/paste):

https://developer.mozilla.org/en-US/docs/Web/API/{api}
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/{api}
https://developer.mozilla.org/de/docs/DOM/window.{api}

or alternatively

https://docs.webplatform.org/wiki/javascript/{api}
https://docs.webplatform.org/wiki/dom/{api}
https://docs.webplatform.org/wiki/dom/Window/{api}
https://docs.webplatform.org/wiki/svg/objects/{api}
https://docs.webplatform.org/wiki/apis/webaudio/{api}

To try this you can use DevTools App and enter the url:

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

Make sure that Enable experiments is checked.

Feedback welcome!

DevTools App...Yay!

Showcase Chrome Debugging Protocol Clients

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.

Painting

Speak - a simple Android app using Text-to-speech

Just published a simple Android app on Google Play store called Speak. The idea is pretty simple. It will speak the text typed into a text area:

It highlights the sentence being spoken. 

You can also select text in any other application and use the share action to speak the selection:

While speaking it shows a notification. You can stop the speaking by tapping on the notification.

It is free. Give it a try and let me know what you think.

Chrome Developer Tools Enhancement - highlight on change

Recently I submitted a patch for Chrome Developer Tools to add the support for "Highlight on change" feature to the Scope Variables and Watch Expressions sidebar panes. Here is the feature in in screenshots:

The idea is that it highlights the properties whose values change or when the property itself comes into existence (in which case the property name is highlighted). You say you don't want to wait and want to give it a try right now! No fear...you can use my Devtools App to try this out.

Just install the Devtools App from Web Store into your Chrome browser and follow the instructions on the blog tab or read the blog entry directly.

Make sure to use this URL (in the text box after /# in Devtoola App UI above) to point to the devtools which implement the above feature:

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

Feedback welcome.

UPDATE: Desktop App v0.6 available

A newer version (0.6) of Desktop App is now available here. The UI is much more simple. The app was developed using AngularJS and Bootstrap.

I had blogged about it in this entry before.

UPDATE: DevToolsApp now works with Chrome 36.0

DevToolsApp allows you to try different versions of Chrome Dev Tools including the latest from Chrome repository.

UPDATE: See

In this blog entry I talked about the DevToolsApp (available on Chrome Web Store).Now it works with the Chrome 36.x - your standard desktop browser. No need to download Chrome Canary.

To use it:

• Install DevToolsApp
• Download latest Chrome 36.x
• Launch Chrome with command line:

> chrome --remote-debugging-port=9222 --no-first-run

• Navigate to a page you want to debug
• Launch the DevToolsApp, select the version of the DevTools you want to debug with from the drop down and then run it by clicking on Run button next to the drop down.
• You will be shown the grid of pages available for debugging. Select the one you want to debug.

Enjoy!

UPDATE: Chome Devtools Network Panel export and import

In this blog entry I talked about an idea about exporting and importing raw network data from Chrome Devtools Network Panel. I have made quite a bit of progress implementing the idea. I am now able to export and import the raw data. I am also able to clone the Network Panel. The only bit that remains is to convert the raw data into network requests and load them into the cloned Network Panel.

I have filed the issue.

You can try out the implementation using my DevToolsApp (download from Chrome Web Store). Use the following URL for export/import raw network data capable Chrome Devtools:

https://sandipchitaleschromedevtoolsrnd.googlecode.com/git/Source/devtools/front_end/inspector.html

I have added this URL to the preconfigured URLs in DevToolsApp and the new (1.1) version of DevToolsApp should appear soon on the Chrome Web Store.

Feedback is welcome!

UPDATE on Windows 8.1 Thin Taskbar

I love the feature of 7+ Taskbar Tweaker which was recently updated to enable making the Windows 8.1 Update vertical Taskbar, 1 small icon width thin. The issue with the notifications area has also been fixed making the toolbar truly thin.

However, one does not have to have the 7+ Taskbar Tweaker running all the time. So I wrote this simple c# program to start and stop 7+ Taskbar Tweaker after reboot or after changing the set of monitors the computer is connected to. The start and stop restores the thin taskbar. Of course if you are using other excellent features of 7+ Taskbar Tweaker (thank rammichaels for that) you can let it start at startup and leave it running.

using System;
using System.Diagnostics;
using System.Runtime.InteropServices;

namespace ThinTaskbar
{
    static class Program
    {
        #region Native API
        // The native API functions/enums/structs needed to access taskbar info
        // consult MSDN for more detailed information about them

        [DllImport("user32.dll")]
        private static extern IntPtr FindWindow(string lpClassName, string lpWindowName);

        // [DllImport("User32.dll")]
        // private static extern bool MoveWindow(IntPtr hWnd, int x, int y, int cx, int cy, bool repaint);

        #endregion

        ///
        /// The main entry point for the application.
        ///

        [STAThread]
        static int Main()
        {
            // Start and stop "7+tt"
            ProcessStartInfo startInfo = new ProcessStartInfo();
            startInfo.FileName = "C:\\Users\\sandip\\AppData\\Roaming\\7+ Taskbar Tweaker\\7+ Taskbar Tweaker.exe";
            startInfo.WindowStyle = ProcessWindowStyle.Hidden;
            Process sevenplustt = Process.Start(startInfo);
            System.Threading.Thread.Sleep(500);
            sevenplustt.CloseMainWindow();
            sevenplustt.WaitForInputIdle();
            sevenplustt.Kill();
            return 0;
        }
    }
}

IMO, thin vertical taskbar should be standard feature (make it an option) of windows desktop when used in traditional way - keyboard + mouse. I understand why the Taskbar needs to be little thicker for touch interface to work correctly, but it is not as if everyone has switched to touch interfaces. Also why can't this be an option, possibly even turned off by default Microsoft wants to discourage it. I do not like it when they know better that the users. This reminds me of debate on Mac OS as to why the windows cannot be resized from all side, which the Apple and their fanboys ridiculed for long time and now Mac OS supports it. Go figure!

Eclipse: Show All Instances of Java Type Eclipse Plugin works for Groovy classes

In this blog entry I talked about the Show All Instances of Java Type Eclipse Plugin. Not surprisingly it also works while doing Groovy/Grails debugging also.

Install the plugin from Eclipse Marketplace website or Eclipse Marketplace Client.



Enjoy!

FireJSOD available on Mozilla Add-ons site

Available on Mozilla site: https://addons.mozilla.org/addon/firejsod/