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.
Assuming you’ve used the Cordova CLI to create a project and added the iOS platform to it, working with a Cordova application in Xcode is pretty straightforward. When you have your web application’s content all ready, issue the following CLI command to copy the web application source code over to the iOS project folder:
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.
iOS applications are written in Objective-C, a variant of C that was used by NeXT to develop applications for the NeXTSTEP operating system back in the 1980s. Xcode lets you edit HTML5 source files, but because iOS applications are written in C, Xcode doesn’t have the ability to debug web applications running in the Cordova container. You can use weinre or the console
object to help debug applications, as described in Chapter 6, “The Mechanics of Cordova Development,” to debug your iOS applications.
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.
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.
There are a few differences between debugging on a simulator and debugging on a physical device, so at some point in your development process, you are going to want to run your app on a device. Apple has some pretty sophisticated processes you must follow before you can run an application on a physical device. As there are hundreds of books and websites dedicated to iOS development, I’m not going to dig into the details here. You can find detailed instructions on the Apple Developer’s website at http://tinyurl.com/op9lvv3. You have to follow the instructions provided there before you can work with a physical device.
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.
Beginning with iOS 6, Apple added some capabilities to Safari (on both the desktop and in iOS) that allow a web application to be remotely debugged in the desktop Safari browser. The cool thing about this capability is that it works with the UIWebView
used within a Cordova application. You can find detailed information about this remote debugging capability on Apple’s web site at http://tinyurl.com/c9yqebs.
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.”
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.
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.
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 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.
In real time, on the device, the Cordova application will update to show the new content, as shown in Figure 9.8.
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.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.
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.
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.
In this chapter I’ve shown you how to test and debug your iOS Cordova applications in an iOS simulator and on a physical device. Using these tools should help simplify the development process and allow you to more quickly identify issues with your applications.
44.200.94.150