Ionic app not working on device/simulator

Question

It was working fine in the simulator yesterday but now it's acting goofy. I happened to stumble on a way to get it working in the simulator though:

Normally to simulate the app on ios I run

$ ionic run ios

Which now shows the app but the "broken" version of it.

However, if I run

$ ionic run ios --livereload

Then my app works as expected! Unfortunately the ionic view app displays the broken version. Chrome (via ionic serve) shows the working version so I'm using that to develop now but I need to get this fixed. What's the troubleshooting process at this point?

Answer 1

Even though this worked on the web along with --livereload the issue all along was with a script href url.

The problem: The google maps js link was using "//url.to.site" so I had to manually prepend "http:" and voila.

How to properly debug ionic + angularjs apps on iOS devices

Debugging this was terrible until I came with up a good solution. Beware: this requires OS X or some serious hacking skills.

Here are the steps in order:

1. $ ionic build ios
2. Open TheApp/platforms/ios/TheApp.xcworkspace in Xcode
3. Build/Run the app in xcode to device OR simulator
4. Open Safari w/ Developer Mode enabled (Preferences > Advanced > Show Develop menu in menu bar)
5. In the Safari menu select Debug > [Name of iOS device] > index.html
6. While the Inspector window is active, hit CMD+R (refresh) and you'll be able to watch your console.logs from the beginning of the page load.

EDIT Shortcut: You can skip steps 1-3 if you use $ ionic run ios --device

This is awesome because now you can step through your code on an actual iOS device! I hope this will save some of you heaps of time. Best of luck!

For Android Devices

Thanks to @sajclarke I found this article: https://developer.chrome.com/devtools/docs/remote-debugging