9. iOS Development with Cordova

For developers building Cordova applications for the iOS platform, Apple provides a suite of tools used to design, package, and deploy iOS applications. Even though the Cordova CLI takes care of most of the process of creating, managing, and testing iOS applications, there will be times when you want to have more control over the process. The CLI can launch a Cordova application in the iOS simulator, but when you encounter problems with an application and you want to know more about what’s going on, you need to use the development tools that Apple provides.

In this chapter, I show you how to use Xcode, Apple’s tool for iOS development, to run and debug Cordova applications for iOS devices. I also show you how to use the Safari browser to debug Cordova applications.

cordova prepare ios

Instead of having to import the Cordova project into the IDE as you do for Android and BlackBerry, the Cordova CLI creates a project that can be opened directly in Xcode. Simply start Xcode, open the project, and go to work. When the project opens, you should see a screen similar to the one shown in Figure 9.1. From here, you can run the application in any of the iOS simulators as you would for any other iOS application.

Figure 9.1 Cordova Project Open in Xcode

When you run an iOS application in Xcode, the IDE opens a console window at the bottom of the screen where you can see messages generated by the simulator as well as the Cordova application. Using the application from Listing 6.2, you can see the output from the code that uses the console object written to the IDE console screen in Figure 9.2.

Figure 9.2 Xcode Console Output Window

Notice that the Warning and Error messages are tagged with additional text so you can identify them more clearly. Unfortunately, Xcode doesn’t color-code them as the Android IDE does; perhaps Apple will add more robust capabilities in the future.

Greater debugging capabilities exist when working with a physical device; refer to the next section for additional information.

Once you’ve completed the setup of your device, you can connect it to the computer running Xcode with a USB cable and run the application on the device directly from Xcode. In this environment, Xcode provides the same debugging capabilities for a physical device as it does for the simulators.

The first thing you must do is enable the developer menu in the desktop version of Safari for Macintosh OS (this process doesn’t work on Windows and probably never will). Open Safari application preferences and select the Advanced tab, as shown in Figure 9.3. Enable the checkbox at the bottom of the figure labeled “Show Develop menu in menu bar.”

Figure 9.3 Safari Preferences on Macintosh OS X

With that change in place, close preferences, and you should see a new Develop menu option in Safari.

Next, you need to open Settings on your iOS device and select the Safari option, then click the Advanced option at the bottom of the Settings screen. On the screen that appears, enable the Web Inspector option, shown in Figure 9.4.

Figure 9.4 Safari Advanced Settings on iOS

With those settings in place, launch the simulator or connect the device to the computer with a USB cable, then launch the Cordova application. You can run the Cordova application from Xcode or preload the application on the device and run it manually from the device’s home screen.

With the Cordova application running, switch to your desktop computer and fire up the Safari browser (remember, this works only on Macintosh OS X) and open the Develop menu. You should see your simulator or iOS device listed in the menu that appears. Figure 9.5 shows an example: my iPhone, appropriately named “John’s iPhone,” appears as an option in the menu. You can also see the HelloCordova application running; select the index.html file, as shown in the figure.

Figure 9.5 Connecting the Remote Web Inspector to the Cordova Application

Safari connects to the remote application, then opens a new window, shown in Figure 9.6. From this new window, you have access to the code running within the Cordova container and the ability to interact with different parts of the application.

Figure 9.6 Safari Remote Web Inspector Window

Figure 9.6 shows the contents of the index.html file. You can expand the different parts of the page and even edit the contents on the fly. Right-click on any of the divs within the HTML file, and you can select an option that allows you to edit the content. In Figure 9.7, you can see that I’ve inserted a new paragraph tag into the file while the application is running.

Figure 9.7 Updating HTML Content in the Web Inspector

In real time, on the device, the Cordova application will update to show the new content, as shown in Figure 9.8.

Figure 9.8 Modified Cordova Application

Very important to Cordova developers and something that’s not available on most other platforms is the ability to set breakpoints and step through the JavaScript code in a Cordova application. Figure 9.9 shows the application’s index.js with some breakpoints set.

Figure 9.9 Web Inspector JavaScript Debugger

Figure 9.10 shows an evaluation window you can use to evaluate expressions. When you type any object value or expression and press Enter, the log evaluates the expression and displays the results. In this example, I’m retrieving the value of the document.title variable.

Figure 9.10 Web Inspector Log

Although I’m not quite sure why you would need this ability, you can also execute the JavaScript alert() function remotely, which displays the alert on the connected device’s screen, as shown in Figure 9.11.

Figure 9.11 Remote JavaScript Alert Displayed in a Cordova Application

I’ve only skimmed the surface of what you can do with the Web Inspector. Before you go too far with iOS development for Cordova, spend some time with this tool to understand all it can do for you. You’ll likely save time and frustration by using a tool like this for your testing and troubleshooting.