Angular never ceases to surprise me. If you work with a technology a long time and think: “Yeah, now I got it all. There is nothing new to learn, I mastered all tricks and obscure features”. You are wrong. Well, at least I was once again, since I discovered the angular debug tools last week.
To make it short it allows you to query for DebugElements via ng.probe() on your developer tools console and get a reference to components in your running application! The possibilities are limitless: read/mutate state, execute methods, access and modify injected services…
I have a special application of this feature in one of my projects and use it to do some fancy scripting inside our test environment. But that is going to be part 2 of this series, so stay tuned (I will update this post later with the follow up)! For now I would like to present you some examples to give you an idea of the feature. To try out the code samples on the go you can access my sample application.
Get Root Element
Angular exports the useful function getAllAngularRootElements on the global scope. It returns a list of root dom nodes of your app (usually just 1 element):
Debug elements with ng probe
The debug function ng.probe expects a dom node as it’s first parameter. Lets do exactly this by passing our node from the previous example and have a look inside the root component with componentInstance:
Great! Now we have access to the component and all of its glory. As you can see it corresponds exactly to the source code:
Next lets modify the app name and change it to something else:
Yay, you can see the new name! In case you were wondering about the last line root.injector.get(ng.coreTokens.ApplicationRef).tick(): It triggers the angular change detection to make the new value actually visible in the window. Of course this is just needed if you mutate state from outside of the application, since there is no magic available to pick up your change and re-render the view.
You can access also other components inside your dom tree. Query for a node with a selector of your choice and feed it to ng.probe:
In this case I queried for the child component with the tag hello. As you can see again it returns the DebugElement with references to the component and dom node.
So thats a quick look at debugging techniques with ng.probe. Note that this feature is only supposed to work with apps running in development mode. So don’t expect to debug angular apps running in production :) In my next post I will show you how I use this feature in combination with the excellent test solution cypress to script tests and take shortcuts in your test execution!