By default, Angular runs in the development mode and builds a debugging elements tree--a tree, which has almost the same structure as a rendered DOM, but with objects of type DebugElement. Whenever ng.probe(element) is invoked in the browser console, a corresponding debug element is returned. The DebugElement class extends DebugNode (https://angular.io/docs/ts/latest/api/core/index/DebugNode-class.html).

Let's see how to use public methods of the exposed DebugElement. First of all, we need to select a DOM element in DevTools. This keeps a reference to the selected DOM node in the variable $0, which can then be accessed from the console. In the CRUD application, we will select the Add button, as shown in the following screenshot:

Now, we are able to get a reference to the component instance the button belongs to. Once we have that instance, we can interact with it; for example, we can change properties, and so on. Let's reset the array of employees:

ng.probe($0).componentInstance.employees = [];

There is one problem--the code explained didn't change anything in the UI. The reason is obvious--we need to invoke the change detector manually. The next line is a bit complicated, but does exactly what we need--it runs the change detection cycle. As a result, the table with employees becomes empty:

ng.probe($0).injector.get(ng.coreTokens.ApplicationRef).tick();

The injector property allows accessing all the providers on the component and its parents. For instance, assume there is the following provider definition:

providers: [{
  provide: 'PaymentEndpoint',
  useValue: 'http://someendpoint.com/v1/payment/'
}]

The value http://someendpoint.com/v1/payment/ can be grabbed with the following code:

let element = document.querySelector('.some');
let endpoint = ng.probe(element).injector.get('PaymentEndpoint');

The DOM element with the some style class should be located within the component the defined provider is visible for.

One interesting use case is the triggering registered event handlers. In the demo application, we could select the Add button and trigger the click event on this button as follows:

ng.probe($0).triggerEventHandler('click');

This command will open the following dialog: