[feature request] navigation from components in Component Tree to source code in IDE

[walrus95]

Augury version (required): 1.19.1 Angular version (required): 4.4.3 Date: 8/2/18 OS: Windows 10

Description of issue: I'm a frequent user of the Component Tree in Augury. Once I have located a component in which I'm interested, I usually next find myself digging through my application source code using my IDE to find the source code for that component. I'd like there to be a button next to each component in Augury that when clicked would cause my IDE to navigate to the source code for that component.

Here is a suggestion on how this could be implemented: There is a project called WallabyJS that ships as a series of extensions for various IDEs. For example, I'm using the WallabyJS extension for Visual Studio Code. When the Wallaby VS Code extension is run, it runs a web server on localhost which is accessible through Chrome. When viewed through Chrome, the web sever renders a web application with a user interface which looks like this:

Each of these lines in the interface is a unit test, and when the icon that is shaped like a pencil and paper next to a particular test is clicked, the VS Code extension (which is hosting the web interface) causes Visual Studio Code to navigate to the source code for that test.

Augury could cause Visual Studio Code to navigate to a component using the same technique. The Augury project would publish a series of IDE extensions, and one of these would be for Visual Studio Code. However, instead of hosting a web application, the Augury VS Code extension would host an API to which the Augury Chrome extension would connect. When the button next to a particular component in the Component Tree in the Augury Chrome extension is clicked, the Augury Chrome extension would call an endpoint on the API hosted by the Augury Visual Studio Code extension, which would result in the source code navigation.

I'd recommend starting by releasing the Visual Studio Code extension first, because VS Code is so popular with Angular developers. Extensions for other IDEs could be released at a later date.

[andrewthauer]

Hi @walrus95. Thanks for the suggestion. This definitely sounds like something useful. Currently augury has "see source" in the properties tab which takes you to the chrome debugging. I agree that navigating directly to VS code, etc. would be even more useful though.

The current augury architecture is based around a devtool extension which would make it difficult to do what your proposing. That said, we have been working on some experimental proof of concepts that are not tied to devtools directly. In theory this would allow for the sort of thing to be possible. We will definitely keep this in mind moving forward.