Inspect Your Ionic App With ng-inspector

18 May 2015Ionic, Debugging

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

WRITTEN BY
profile
Ashteya Biharisingh

Full stack developer who likes to build mobile apps and read books.