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)
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 a development provisioning file and install the IPA onto your iOS device
It is important that you build your app with a "Development" certificate and a matching "Development" mobile provisioning file. You need to import your "Development" p12 certificate into the Intel XDK certificate management tool. Make sure you then select that certificate from the pulldown in the iOS tab in the Build Settings (on the Projects tab) before you build your app. Also, be sure to select the matching mobile provisioning file in the same Build Settings section for your project.
An example of a "Development" mobile provisioning file is shown below. Note that in this example the provisioning file is a "wildcard" provisioning file, which means that it can be used with any App ID (because the provisioning file's App ID is '*'). The app you build with this "Development" provisioning file (and the matching "Development" certificate) can only be installed onto those devices that are part of the authorized "Device" list (there are seven authorized devices for the certificate shown below).
Alternatively, you can re-sign a previously built app with a development provisioning file
If you choose this route, the easiest way to re-sign your app 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.
Install the Built App onto Your iOS Device
If you imported a "Development" certificate into your Intel XDK certificate management console and used that certificate and the matching "Development" mobile provisioning file to build your app, you can most easily install your app by sharing the app via the build tile. Using the share feature on the iOS build tile from the Build tab allows you to email your built app to your device. From the iOS device, open the shared email with the native email app on your iOS device and select the OTA link to download and install the built app onto your device.
If you downloaded the IPA file directly to your Mac, use iTunes and the following instructions to install the app onto your device.
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 the app named "HelloCordova" for remote debugging over USB.
Sync iTunes with your iOS device
This is necessary to install the built app onto your device with iTunes. 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 if you used the sync step above or if you successfully installed using the OTA link sent via the share link on the Build tab.
To 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 will have a full debug environment (similar to Chrome DevTools) for the app that is running on your USB-connected 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 above, the <p> tag is highlighted. In the screenshot below you can see the highlighted <p> element, it is similar to debugging a browser window with Safari Web Inspector. The screenshot below was taken from an iPhone* that was attached via USB to a Mac running the Web Inspector session shown above connected to the app running on the iPhone, below.
