While working on the Cordova Drum Machine I’m currently streaming live at LiveCoding.tv/sorskoot, I ran into a few issues with Visual Studio debugger. Normally I debug my ‘normal’ AngularJS web applications inside Chrome using an extension on the debug tools that shows the context of the selected HTML element. In Visual Studio I do not have these tools available. Here’s how to get information on the Angular context of a selected element.

Scope

The first thing that’s really useful to gain insight to is the Angular scope. The scope has to be read from a specific DOM element. To select an element from your app (in my case I’m running my Cordova app as a UWP app on the Windows desktop), click the ‘select element’ button in Visual Studio and pick the element from your app. In the screenshot below I’ve selected a group of radio buttons from which I’d like to view the current scope.

Visual Studio will highlight the DOM element that is selected.

Now we’ll have a look at the JavaScript Console inside Visual Studio. If you type $0 in there and hit enter, the JavaScript Console will prompt the highlighted element. We need this to get the current Angular Scope. The easiest way to get the Angular Scope is by using the angular.element function on the selected element and call the _scope _function on the result. Like so:

At this point the ‘s’ variable contains the entire scope. You’re probably interested in some properties of that.

In my drum machine I only added a property ‘vm’ to my scope that contains the viewmodel. In my case I used this code to debug and find out what the scope contained at for the selected elements.

Controller

Alternatively you might be interested in the controller that is used at the DOM element you have selected. The code to get access to the current controller is very similar to that of the scope. But instead of calling the scope function you have to call the controller function.

When evaluating the ‘c’ variable in the console we get to see what’s inside the current controller.

You can look at the current state of all properties inside the controller and even call function on there.

Wrap

Since there is no specific tooling inside Visual Studio 2015 that help you to debug and explore AngularJS inside your application, these functions might help you getting some insights of your app. I would suggest to have a look at the other properties in the result of angular.element($0).