Ionic app not working on device/simulator
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
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:
$ ionic build ios- Open
TheApp/platforms/ios/TheApp.xcworkspaceinXcode - Build/Run the app in xcode to device OR simulator
- Open Safari w/ Developer Mode enabled (Preferences > Advanced > Show Develop menu in menu bar)
- In the Safari menu select
Debug>[Name of iOS device]>index.html - While the Inspector window is active, hit CMD+R (refresh) and you'll be able to watch your
console.logsfrom 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