Easier Angular Ivy Debugging with a Chrome Extension

When in non-production mode, the Angular Ivy runtime provides a set of functions in the global ng namespace that can be used for debugging. These allow you to not only view your application state, but also make and apply changes to the state.  

While this is great, it requires a bit of effort to use. For this reason, we created SB Angular Inspector, a chrome extension that allows you to easily take advantage of these new debugging tools.

For this walk through, we are going to use the free and open sourced SB Clean Blog Angular project, which we have running locally in non-production mode.

Let's select the sb-clean-blog-header element in the Elements tab of the Chrome Inspector and then the SB Angular tab in the right dev panel as shown below.

Voila. We can see the current properties on our selectedComponent CleanBlogHeaderComponent along with our selectedContext HomeComponent and it's current properties. If there were any directives on this element we would also be able to view them all in selectedDirectives. We also include selectedInjector and selectedListeners in case you are going super super deep... but we've never really had to use these in typical debugging.

selectedContext becomes quite useful when trying to answer the question: Why is my *ngIf not working as I expected? We can select the <!--bindings comment directly and then view the selectedDirective NgIf context. For the case of our clean blog, we have an *ngIf that checks for an array of blog posts before rendering them to the screen.

We can verify this through the inspector:

Finally, with these new tools we can actually modify and apply changes to the state of our Components while debugging! So for example, we use the CleanBlogHeaderComponent for the landing page header, but also for our blog posts headers, and we change the styling based on the boolean property siteHeading. We can test that this is working by changing the boolean value and then applying the change.

First we change the value from true to false through the dev panel:

Then we select the SB Angular Inspector extension icon from the browser toolbar and click "Apply Changes":

We then see the changes applied.

From:

To:

Debugging and inspecting the state of your code is essential in expanding your knowledge and understanding of the language and frameworks you are creating in. We hope that this tool will help you on that journey. Happy Debugging!

Download SB Angular Inspector here