Debugging Angular 2 Applications from the Console

from there in angular 1.x, you can simply write...

> 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 from angular2/platform/browser and pass it as provider to your bootstrap 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.