Using Chrome to Debug your Cordova App

It is incredibly easy it is to get full Chrome Developer Tools functionality (including full JavaScript debugging) whilst running your Cordova application on the emulator or even on a real device. It’s not exactly a new feature but this discovery has made testing and debugging our Ionic Framework apps so much easier.

Here’s how to get full debugging and everything else you expect from Chrome Developer Tools / Web Inspector whilst testing your Ionic app on device or emulator:

Firstly, run your Ionic application on the device. LiveReload is optional but highly recommended:

ionic run -s -c -l

Next, Load up Chrome and go to Tools, More Tools, Inspect Devices. Locate the device/app your are running (the app must be built with debugging enabled). Click Inspect.

A Web Inspect window now opens for the application running on your device. This gives you full debugging functionality including the ability to see the network requests your app is making and add breakpoints to your code. No more console.log('dog.log')!