Our content is free thanks to ag-Grid

ag-Grid is the industry leading JavaScript datagrid

ag-grid.com

Easier Angular Ivy Debugging with a Chrome Extension

Post Editor

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!

3 min read
post

Easier Angular Ivy Debugging with a Chrome Extension

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!

post
post
3 min read
3 min read

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

Discuss with community

Share

About the author

author_image
Sam Artioli

Sam Artioli is a Technology Leader & Entrepreneur with 20+ years experience in technology. Sam has a solid career foundation, including 7 years at Apple, 5 years with Disney, and successful startups.

author_image

About the author

Sam Artioli

Sam Artioli is a Technology Leader & Entrepreneur with 20+ years experience in technology. Sam has a solid career foundation, including 7 years at Apple, 5 years with Disney, and successful startups.

About the author

author_image
Sam Artioli

Sam Artioli is a Technology Leader & Entrepreneur with 20+ years experience in technology. Sam has a solid career foundation, including 7 years at Apple, 5 years with Disney, and successful startups.

NxAngularCli
NxAngularCli
NxAngularCli

Featured articles

RxJSpost
21 January 20214 min read
RxJS in Angular: Part III

In my previous two articles we have discussed how to change our components which solve problems in imperative ways to do that in functional, reactive, RxJS way, and we of course had a lot of fun doing that.

RxJSpost
21 January 20214 min read
RxJS in Angular: Part III

In my previous two articles we have discussed how to change our components which solve problems in imperative ways to do that in functional, reactive, RxJS way, and we of course had a lot of fun doing that.

Read more
RxJSpostRxJS in Angular: Part III

21 January 2021

4 min read

In my previous two articles we have discussed how to change our components which solve problems in imperative ways to do that in functional, reactive, RxJS way, and we of course had a lot of fun doing that.

Read more
Angularpost
20 January 20216 min read
Angular and SOLID principles

In software engineering, making things work the first time is always easy. But, what if you want to add new functionalities to an existing code? Making iterations on an existing basis can be difficult to do without introducing bugs. This is where SOLID principles come into play.

Angularpost
20 January 20216 min read
Angular and SOLID principles

In software engineering, making things work the first time is always easy. But, what if you want to add new functionalities to an existing code? Making iterations on an existing basis can be difficult to do without introducing bugs. This is where SOLID principles come into play.

Read more
AngularpostAngular and SOLID principles

20 January 2021

6 min read

In software engineering, making things work the first time is always easy. But, what if you want to add new functionalities to an existing code? Making iterations on an existing basis can be difficult to do without introducing bugs. This is where SOLID principles come into play.

Read more
Angularpost
14 January 20216 min read
Demystifying Taiga UI root component: portals pattern in Angular

Just before new year we announced our new Angular UI kit library Taiga UI. If you go through Getting started steps, you will see that you need to wrap your app with the tui-root component. Let's see what it does and explore what portals are and how and why we use them.