There are some debugging situations that simply cannot be satisfied by the features found on the Intel XDK Debug tab. In those cases, if you own a Mac and an Apple developer account, you can utilize Web Inspector in Safari to remotely debug an iOS Cordova app in a way that is analogous to using Remote Chrome DevTools with an Android device running a Cordova app. This process requires that you use a Mac and that your iOS device is attached to the Mac via a USB cable. Some configuration of Safari on your Mac and on your iOS device is required to make this work, and is described below.
Additional instructions regarding the use of Web Inspector with a USB-attached iOS device can be found in this Apple document titled Safari Web Inspector Guide. The instructions below will only get you connected and started, they do not attempt to explain how to use Web Inspector to debug your application.
Enable "web inspector" on your iOS device
- open "Settings" on the iOS device
- choose "Safari"
- choose "Advanced"
- set the "Web Inspector" button to "on" (make it green as shown in the image below)
Enable "device debug" in Safari on your Mac
- select "Preferences" from the Safari menu
- choose the "Advanced" tab
- check the "Show Develop menu in menu bar" option (as shown in the image below)
Build your app using an ad-hoc provisioning file and download the IPA to your Mac
Normally, if you were going to debug your app, you would build with a "dev" provisioning file. Unfortunately, the Intel XDK build system does not support dev builds, at this time, so you must build with an ad-hoc provisioning file and then download the IPA. In the next step you will "re-sign" that IPA with a dev provisioning file that you obtained from your Apple developer account.
Re-sign the app you just built with a dev provisioning file
The easiest way to do this is with a free open-source app named iReSign. You can download it directly from this GitHub repo and move the iReSign.app folder to your /Applications folder (or wherever you like to store such utilities...). See the README.md in the iResign GitHub repo for basic instructions. This app does require that Xcode is installed on your Mac.
Attach the iOS device to your Mac via a USB cable
Open iTunes and select the USB-attached iOS device so you can see the apps that are on the device.
Drag the IPA file you re-signed to the iTunes icon on your Mac's "Dock."
Make sure you select "install" next to the name of the app you dragged to the iTunes Dock icon. It should appear in the list of apps shown for the iOS device in iTunes. Once you select "install" the button should change so it says "will install." In the image below we are going to install for debugging an app named "HelloCordova."
Sync iTunes with your iOS device
This is necessary to install the re-signed app onto your device. You "sync" iTunes with your device by pushing the "Apply" button in the lower right corner of iTunes. Do not remove the USB cable from your Mac, the next step requires that your iOS device remain connected to your Mac via the USB cable.
Start debugging the app on your iOS device
First, start the app on your iOS device; an icon for the app to be debugged should have appeared after the sync step above. Then, start debugging with Safari on the Mac:
- select "Develop" from the Safari menu
- select the "name of the attached device"
- select the "name of the app to be debugged"
- select "index.html" (see the image below)
Safari Web Inspector will startup on your Mac and you'll have a full debug environment (similar to Chrome Dev Tools) that is connected to the app running on your iOS device. For difficult debugging situations, especially those where the app crashes immediately on start, you may have to change the logic in your app to pause any action until you, for example, start a function manually from the JavaScript console.
Notice in the Web Inspector image below, the <p> tag is highlighted. See the scr
