This article provides some good debugging and Angular app visualization practices. Let us get started with debugging stuff. Here, I will be using a Chrome extension for it. This is known as ng-inspector.
![inspector]()
You can search for it and install it in Chrome. Once installed it will create an icon as shown in the following screen shot.
![create one icon]()
So, what you can do is, when you need to check your Angular app, whether every piece and all the data is returning correctly or not. You can use this tool to check it. Once you have loaded your Angular app in Chrome you can click on this A icon and this will open a new side window with all the app info.
![app info]()
You can also drill down further as shown below in the screen shot.
![You can also drill down further]()
This is referring to my first grid data as shown below.
![movie review]()
Therefore, if you refer to the API URL api/movies, the preceding ng-inspector is referring to the following highlighted record.
![record]()
Again, when I go to the reviews page and inspect the data, it will produce the following result.
![result as shown below]()
You can also verify these values at the API level as shown below in the screen shot.
![verify these values at the api]()
I am also using the JSON Viewer extension for the browser for presenting the data in a readable format. The following is the screen shot of that.
![JSON Viewer]()
Now, to visualize the app, of what Angular stuff is used in the app and how they are related, I am using another extension Angular Dependency Graph.
![Angular Dependency Graph]()
Therefore, when you load the app and press F12, you will see one new tab, AngularJS Graph in the toolbar. Once you click it, it will present the following visualization.
![Angular JS Graph]()
This way, you can save lots of time when understanding and debugging the app. In the following, I have provided a few app-related URLs.
APP URL: Moviereview
Download Code: GIT-URL
Buy here: Amazon
I hope you like this article. Thanks for joining me.