Using Web Inspector Remote to Debug iOS* Cordova Apps

EmailThis Premium lets you save unlimited bookmarks, PDF, DOCX files, PPTs and images. It also gives you a PDF copy of every page that you save. Upgrade to Premium →

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 explain how to use Web Inspector to debug your application.

Enable "web inspector" on your iOS device

Open "Settings" on your 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, you can use Xcode to install your IPA file on an iOS device for testing:

Start Xcode on your Mac.
Connect your iOS device to your Mac, via a USB cable.
In the Xcode menu, choose Window > Devices and find your device in the list.
Click the Add button (+) below the Installed Apps table.
Locate your IPA file in the dialog that appears and click Open.

You can also use iTunes to install the IPA file onto your device, by following the instructions below.

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 successfully installed your IPA using one of the side-loading steps above.

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 start 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, for example, you start a function manually from the JavaScript* console.

Debugging a built app does not require rebuilding your app to test changes or experiment with your code. The best debugging experience will come from taking advantage of the interactive JavaScript console to redefine functions within your app and then run those redefined functions directly from the console or restart your app, in situ, using the window.location.reload() function. An example of using this technique can be seen in this video, starting at about 18:30. The video is demonstrating the use of the weinre debugger, but the debugging techniques can also be applied to remote CDT and remote Web Inspector when debugging a built app.

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. The Web Inspector session, above, is debugging the app running on the iPhone, below.