You can use the Cordova command-line interface to initialize the project code, after which you can use various platforms' SDKs to develop them further. In the previous chapter, we discussed how to create a new project, add the required platforms, and build them using the CLI.

Apart from creating a project by using the CLI tool, there are several other functions carried out by the CLI of Cordova. As the steps for installing the CLI are already covered, let's move on with advanced CLI usage. Once you create a project, use cd to move into it and you can execute a variety of project-level commands.

The following is the list of the most used CLI commands:

To maximize the benefits of using Cordova, you should know about all the events available. They are called lifecycle events because they are a part of your application throughout its lifecycle. These events are available by default for all applications and it's up to the developer to use them to implement better design. Although there are several events, we will discuss the most important and commonly used events.

document.addEventListener("deviceready", function() {
    // Application starts here
});

PhoneGap is an intermediary layer that talks to the mobile device and the application; the app resides inside a browser, and, using the PhoneGap API, you can connect to phone features such as contacts and camera.

The UI layer of a PhoneGap application is a web browser view that takes up 100 percent of the device's width and height; think of the UI layer as a browser. The UI layer is known as WebView. The WebView used by PhoneGap is the same one used by the native operating system.

Having discussed the basics of PhoneGap and the command-line tools, we will now create a simple application. This is not the typical Hello World example. With the already learned commands and configured environment with npm, let's create a new project:

C:\> phonegap create example1
C:\> cd example1
C:\example> phonegap platform add android

With the completion of the preceding commands, we created a new project called example1 and added Android platform...

WebKit-based browsers support various debugging tools. For example, when encountering JavaScript issues, you can launch Web Inspector or Developer Tools and start to explore logs and errors using the JavaScript console.

In Chrome, you can access the Developer Tools from the Customize menu (click on the Customize menu and then go to Tools | Developer Tools). The Customize menu is available in the top-right corner. When working with Safari, you first have to enable the Developer Tools by opening Safari's Preferences panel and then selecting the Show Develop menu in the menu bar checkbox. You can then access the inspector by choosing Show Web Inspector from the application's Develop menu.

Since the Web Inspector is part of the WebKit codebase, you can use the same shortcuts in Chrome and Safari to access the debugging tools.

On Windows and Linux, press:

Firefox is based on the Gecko open source layout engine used in many applications developed by the Mozilla Foundation and the Mozilla Corporation. It offers good debugging tools and it's evolving quickly, including innovative projects such as Desktop WebRT, which lets you build a desktop web application at runtime that provides web apps with a native-like look and feel along with platform integration APIs on Windows, OS X, and other desktop platforms.

If you are not developing apps for Android or iOS, you can use the Firefox layout engine, which offers some powerful development and debugging tools. Let's quickly explore how to use Firefox/Firebug to inspect and debug your app; as you will see, there are several similarities between the debug tools available in WebKit and Firefox.

Firebug integrated with Firefox puts a great set of developer tools at your fingertips that rivals the features of the WebKit Web Inspector. In order to install the Firebug...

Internet Explorer, at the time of writing, still has a wide install base; it's also the least favorite browser among developers. Virtually every developer has experienced serious issues when optimizing a webpage for IE; this is due to the fact that IE diverges from web standards in significant areas, but things are changing and the preview of IE 10 is getting good scores in various tests. Internet Explorer 11 is even better for developers.

Developer Tools were introduced in Internet Explorer 8, and updated with new functionality in Internet Explorer 9. Developer Tools in Internet Explorer 10 add Web Worker debugging and support for multiple script sources.

You can access Developer Tools by pressing F12 or by navigating to Tools | Developer Tools from the menu bar:

The IE 10 Developer Tools provide a similar user interface to the Developer Tools in Safari, Chrome, and Firefox.