Thursday, February 05, 2015

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!

No comments: