Start tracking your progress
Trailhead Home
Trailhead Home

Debug Hybrid Apps

Learning Objectives

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.

Debug a Hybrid App on iOS

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

    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.

Debug a Hybrid App on Android

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/.

retargeting