Debug Ionic app on IOS?

Question

My HTML5 app is packaged by Ionic (using Cordova) and loads onto my iPhone like a normal app.

Can I debug whilst connected to the device? I know with Android you have logcat and in the browser I have dev tools but there are differences between the app on device and the browser and I want to know why.

Any help appreciated.

Thanks

Solution 1

There are three primary options.

1. Debug using Safari. This is good for debugging a hybrid app, but cannot tell you output related to native plugins. http://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787
2. Open the project and build to device in Xcode. This shows the output of the entire device http://cordova.apache.org/docs/en/3.5.0/guide_platforms_ios_index.md.html#iOS%20Platform%20Guide
3. Debug with Ionic CLI. Using ionic run ios -l -c -s with the flags will use live reload and print the logs to the console. http://ionicframework.com/blog/live-reload-all-things-ionic-cli/

Solution 2

Similar to the first answer, here's how I debug on iOS.

ionic emulate ios -lc

Which runs app using simulator and outputs console logs and errors to terminal with live reloading.

Solution 3

i'm using ionic 2 and typescript. you can use debugger keyword to debug on ios like this:

then open safari -> developer -> simulate -> index.html, good luck

Solution 4

You can use Visual Studio Code with the following extension: https://marketplace.visualstudio.com/items?itemName=vsmobile.cordova-tools

Regards, Nicholls

View more solutions

Comments

[Caleb Faruki]

Option #3 was extremely useful for debugging. A lot of errors were thrown in the iOS ionic view app that weren't thrown in web view. I just added comments on my code corresponding with where the errors were thrown.

[jimmont]

Note that using Option 3 running ionic on the device (or 2 building from Xcode) allows Option 1 debugging with Safari too. Run ionic (with the desired options) targeting the device ionic run ios --device then open Safari and under the Develop menu start working with the desired target once it shows the webview. I initially had problems getting this to work from the cli and just reinstalled the platform to resolve ionic platform remove ios then add it again.

[user542319]

I'd add Chome on OS X to #1.