Help me love debugging Ionic Apps


I want to love making and debugging Ionic Apps.

I use Linux, have 2 android phones, and have the emulator installed (it’s not that bad).

ionic run android
When I run my apps on my phone, bugs cause WSOD (white screen of death), so it’s not awesome for debugging
It’s a bit slow for iteration, but ok it could work with a debugger.

ionic emulate android
Ok, about 2x slower than on the phone. There’s a bug in snapshots, but whatever. Same problem though WSOD and no debugger.

ionic run browser
Ok, this doesn’t work on linux. I patched a version of run that works. It looks diff enough from 2.0 code that I skipped a PR. Here I’m getting platform errors:
“Uncaught module cordova/confighelper not found”
“TypeError: Cannot read property ‘dataDirectory’ of undefined” is coming before “adding proxy for File” which may be my root cause.

I tried out ripple, but it’s on Cordova 3.0, so I’m guessing it’s no longer best practice?

I want to work with ngCordova and specifically $cordovaMedia

Help me love this! Cause I’m really struggling now. Thanks :slight_smile:

Why are you not using ionic serve for developing in the browser?

And for debugging on Android you can just use Chrome.

When I run ionic serve the cordova variables don’t appear, making it practically useless for testing and debugging my app. It’s useful for prototyping the UI, but that’s about it.

I’m trying to use the cordova media plugins.

I was hoping the browser platform had a shim but it doesn’t help. I’m not sure what the browser platform does.

Thanks for the link on chrome remote debugging.


That’s a reasonable expectation, but it all depends on each specific plugin. I can see that the cordova-plugin-media says it supports browser in the README, but there’s no browser folder in src

In my experience you’re better off writing your own fallback implementations for when running without cordova in ionic serve.

Hi EncodedMirko,

Ok, I got remote debugging setup.

The media plugin isn’t recording or playing audio on Android 4.4. I made some test repo’s on Github and filed a couple bugs for it:

But, I’m not sure if anything will come of it.

Is this common for Cordova plugins? I thought Media would be a super common one? I’ll try again with MediaCapture, but it seems weird.

What’s you’re pattern for the fallback implementations? Do you have an example? I’d guess in Angular if ($ionicPlatform.platform() === ‘browser’) { //stuff }. Or is there a better way? Putting something after ‘cordova.js’ seems like a possibility too.

Thanks again!


Right now I just check if window.cordova is defined or not. It’s not when running with ionic serve. Not sure if that’s the best way, but works for me.

why can’t you debugg while emulating?
You can use ddms:

of course the fastest way to debugg most of your issues would be using “serve”.

You can also use livereload when running in the emulator; check ionic help emulate for the available options.

1 Like