Inspect Your Ionic App With ng-inspector

ng-inspector is a browser extension built for debugging AngularJS apps. It's available for Chrome, Safari and FireFox. Since Ionic is built on AngularJS you can also use it for Ionic apps.

It opens a pane in the browser, that shows the hierarchy of scopes. You can use this pane together with the console, so every time you select something in the pane, it will output the associated data to the console.

Screenshot ng-inspector

For instance, in the screenshot above I clicked on the first b object to view its contents, this is the feature I probably use the most when I'm debugging an app.

After that, I clicked on the scope below it. as you can see, this outputs the DOM node it's attached to. In this case, it's an ion-item directive.

This extension is a very helpful tool especially if you're just starting out with Ionic/AngularJS. The only thing that's a bit annoying is that the pane displays over the view, so you can't see the whole view of your app.

Read More

Differences between ng-inspector and angularjs-batarang

Follow me on Twitter @ashteya and sign up for my weekly emails to get new tutorials.

If you found this article useful, could you hit the share buttons so that others can benefit from it, too? Thanks!

comments powered by Disqus