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.

Polymer vs. Bootstrap DevTools App

Polymer

Bootstrap (current implementation)

?

All files outline - Chrome Devtools Enhancement

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

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 full 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 files 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.