Inspecting Angular Apps from Browser Console
The entry point to inspecting Angular components from browser developer tools is the
ng.probe() function. You need to pass it an element corresponding to an Angular component as a parameter. A typical line of code to execute from the browser console would be:
Alternatively, you can take advantage of the fact that browsers set an alias for the current selection in the element inspector. After selecting the element corresponding to the component of interest, you can simply write the following instead:
Both function calls return a
DebugElement object with a bunch of internals which you'll rarely need. Most of the time you'll probably only be interested in the instance of the component class accessible via the
Here's a sample output when inspecting the
DashboardComponent from the Tour of Heroes tutorial application:
As you can see, all the injected services can be inspected as well. By changing values and invoking methods on components or services, you can even manipulate the application state. However, there's a caveat: the view won't be updated until the next digest cycle. If you need to, you can trigger it manually with the following call (explained in more detail in a great blogpost by Max Koretskyi):
ng.probe($0) .injector.get(ng.coreTokens.ApplicationRef) .tick();
Everything described so far and much more can be done in a more convenient way by using the Angular Augury browser extension for Chrome or Firefox which is built on top of the same APIs. If you're doing a lot of Angular development, I can strongly recommend it. In addition to components, you can also inspect route, module and dependency injector configuration at runtime.
It's important to mention that all of this only works when Angular is in development mode, i.e.
enableProdMode() must not be called at application startup. By default, both
ng serve and
ng build run the application in development mode. You need to call
ng build --prod to switch to production mode. However, your project might be configured differently.
ng.probe() works just as well with Ionic 3 and Ionic 4 applications (the latter only if you're still using Angular). You can use it when you're viewing the application in a browser using
ionic serve but also when you're running the application on an Android device if you attach to it using Chrome. Angular Augury on the other hand seems rather unstable with Ionic applications and doesn't work at all when you're attached to an Android device.