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