Debug Hybrid Apps

After completing this unit, you’ll be able to:

• Debug hybrid iOS apps on a device with Safari.
• Debug hyrid Android apps on a device with the Google Chrome browser.
• Use your device to debug Android apps running on your development machine.

Wondering how you can debug hybrid apps in iOS? You use Safari to communicate between your development machine and a real or simulated device. For debugging purposes, you treat your hybrid app as a Web app.

1. Open Safari on the desktop.
2. Select Safari | Preferences.
3. Click the Advanced tab.
4. Click Show Develop menu in menu bar.
5. If you’re using the iOS simulator:
   • If Xcode is open, press CONTROL and click the Xcode icon in the task bar and then select Open Developer Tool | iOS Simulator.
   • Or, in a Terminal window, type open -a iOS\ Simulator.
6. In the iOS Simulator menu, select Hardware | Device.
7. Select a device.
8. Open Safari from the home screen of the device or iOS Simulator.
9. Navigate to the location of your web app. Tip You can scrape the address from the Xcode debugger output window. For example:

   2016-05-19 12:16:31:410 MyTrailHybridLocal[86657:5137538] INFO|SFHybridViewController|Setting 
   file:///Users/johndoe/Library/Developer/CoreSimulator/
   Devices/22222222-3333-aaaa-dddd-42424242424B9/data/
   Containers/Bundle/Application/66665555-5555-3333-
   1111-B9B9B9B9/MyTrailHybridLocal.app/www/index.html 

   is the “home page” URL for this app.
10. In Safari on your desktop, select Developer | <your device>, and then select the URL that you opened in Safari on the device or simulator. The Web Inspector window opens and attaches itself to the running Safari instance on your device.

Wondering how you can debug hybrid Android apps? You can do that with real or simulated Android devices by with the Google Chrome browser. For current instructions, search for “Remote Debugging” at developers.google.com/web/tools/.

• Debugging Hybrid Apps that are Running on a Mobile Device
• Remote Debugging on Android with Chrome (developer.chrome.com)
• Getting the Most Out of Simulator (iOS Developer Library video)