Inspecting Angular Apps from Browser Console
Many JavaScript developers are used to inspecting the web page and the state of JavaScript variables using the browser developer tools. The browser console window can even be used for executing arbitrary JavaScript code to affect the web page/application at runtime. However, when using a SPA framework like Angular instead of vanilla JavaScript it's not as easy anymore to access the JavaScript objects of interest such as components and services. Fortunately, Angular provides means to access them, although they aren't documented well.
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:
ng.probe(document.querySelector("app-dashboard"));
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:
ng.probe($0);
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 componentInstance property:
ng.probe($0).componentInstance;
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.
