a blog for those who code

Sunday, 3 April 2016

Debug your Ionic Application using ng-inspector

In this post we will be discussing about debugging or inspecting your Ionic Application using ng-inspector. ng-inspector is a browser extension for Chrome, Safari and Firefox that adds an inspector pane to help you debug, develop and understand your AngularJS Applications or Ionic Application.

When you hover over a scope in the inspector, it will highlight the DOM element that the scope is attached to Clicking on that model will console.log that model and its contents. So that means every time you select something in the pane it will output the associated data on the console. You can add the Chrome Extension from the Chrome Web Store.

Lets take an example. In my previous post Adding Search Bar in the Header of Ionic App I have created an contact application, now using ng-inspector I want to know the values which I am getting. One thing to note that ng-inspector will not work with ripple, it will say "Page does not include AngularJS", so you need to run the application directly into the browser.

So when I clicked on values [...] to view its contents, all the Object are shown in the Console. Similarly you can get the information of any objects or functions using ng-inspector.

The features of ng-inspector includes :

1. Scopes - See whole scope hierarchy in your Ionic Application. Click on the scopes in the pane to console.log their assign DOM Nodes.
2. DOM Highlighting - As you mouse-over the scopes in the pane, their DOM nodes are highlighted in the page.
3. Controllers, directives - It identifies and displays along with the scope the Controllers and Directives that triggers its creation.
4. Models - See all the scope models, their types and values. Click the model to console.log() their values.  

Please Like and Share the CodingDefined.com Blog, if you find it interesting and helpful.

No comments:

Post a Comment