Debugging Angular 2 Applications from the Console
Wondering how to debug Angular 2 apps from an in-browser console? Here's a great breakdown for Angular 2 debugging.
Join the DZone community and get the full member experience.
Join For Free
there have been some quite useful articles for
how to debug angular 1.x applications from the browser's console
. but how can we achieve the same in angular 2? is there even a way? let's see. i always found it quite neat how to debug my angular 1.x applications directly from my browser's console. take chrome's dev tools for instance. you can open the elements tab and click on your angular 2 component. the nice thing about the chrome dev tools is that it'll keep a reference to the selected dom node in the variable
$0
which you can then directly access from the console.

> angular.element($0).scope()
...to access the
$scope
of that directive and interact with that object accordingly. similarly, you can get hold of the dependency injector for fetching services etc. but more on that
in this article on the official ionic blog
.
enabling/disabling debugging
note , if you're using angular 2 beta.02 or lower, you have to explicitly activate debugging by importing the
element_probe_providers
fromangular2/platform/browser
and pass it as provider to yourbootstrap
function.
by default debugging is enabled in angular 2 applications. in fact, when you run your app you might see a log in your console saying something like:
"angular 2 is running in the development mode. call enableprodmode() to enable the production mode."
in fact, whenever you deploy your application you should disable debugging information and switch into production mode . you can do that like this:
...
import { enableprodmode } from 'angular2/core';
// enable production mode and thus disable debugging information
enableprodmode();
bootstrap(helloangular2, [])
.catch(err => console.error(err));
note, the same holds for your angular 1.x apps .
inspect the component state
the interesting part is to inspect the current state of our rendered component. we can do this by again selecting our component in the elements tab and then executing the following in the console.
expand the result object in the dev tools and navigate through it. there are are a couple of interesting things being exposed to you. most interestingly, we can get a reference to the instance of our component class using...
> ng.probe($0).componentinstance
once we have that instance, we can interact with it, like changing the name property in the case of our simple hello world component example.

strange enough, the ui won't reflect our changes. well, remember
$digest()
. angular 2 has a similar, but a more advanced mechanism. anyway, without going into the details, we need to
invoke that change detector
.
i dug through the angular source and this was the best way i could come up with to activate the change detection mechanism:
> ng.probe($0).injector._depprovider.componentview.changedetector.detectchanges()
not sure if you noticed, but we invoked the change detector on our selected angular 2 component (
$0
) and not globally. this is because
change detection is hierarchical
, hence,
every angular 2 component get its own change detector
.
victor savkin
has written an
awesome post on this
.
here's the result of executing the change detector:

batarangle
if you're not the console type of guy, you may appreciate the visual debugging tool batarangle from rangle.io .
conclusion
that's it. i'll try to keep this article updated and even extend it with further debugging possibilities as angular 2 evolves towards its final release. also, if you have any suggestions/improvements, as always, comment!
btw, you can use my angular 2 playground setup to test out these features.
Published at DZone with permission of Juri Strumpflohner. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments