Because PhoneGap leverages open web standards (HTML, CSS, and JavaScript), you can start work in a desktop browser and then move on to a native project once the functionality is fleshed out. This way it's possible to speed up our development cycles and spend more time implementing core functionality. You can use the latest versions of any of the major desktop browsers Internet Explorer (IE), Google Chrome, Firefox, Safari or Opera to get started with a PhoneGap app. All of these browsers have Developer Tools for logging and debugging your code. PhoneGap is an intermediary layer that talks with the mobile device and the application; the app resides inside a chromeless browser, and using the PhoneGap API you can connect to phone features such as contact and camera.
The UI layer of a PhoneGap application is a web browser view that takes up 100 percent of the device width and height; think of the UI layer as a chromeless browser. The UI layer is known as WebView. The WebView used by PhoneGap is the same one used by the native operating system; on iOS this is the Objective-C UIWebView class, on Android it is android.webkit.WebView, and on Windows Phone 8 it is the Object.DependencyObject.UIElement.FrameworkElement.WebView class.
Since there are differences in the WebView rendering engines between operating systems it's highly recommended to write cross-browser code.
WebView apps have many of the advantages of native apps (for example, they can access phone APIs/features and discoverability via app stores).
Based upon web standards, PhoneGap doesn't require you to test in multiple browsers. However, it's a good habit to have a common code base and a platform-specific code base optimized for the WebView the app will use. In short, optimizing your apps for each browser is key for best performance across platforms. For this reason let's take a look at the tools each of the major browsers support as well as some debugging techniques. If you target primarily Android and iOS devices you only need to use a WebKit-based browser or the nightly build of WebKit.
WebKit-based browsers support various debugging tools. For example, when encountering JavaScript issues you can launch the Web Inspector or the Developer Tools and start to explore logs and errors using the JavaScript console.
In Chrome you can access the Developer Tools from the View menu (View | Developer | Developer Tools); 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 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:
- Ctrl + Shift + I to open Developer Tools
- Ctrl + Shift + J to open Developer Tools and bring focus to the Console
- Ctrl + Shift + C to toggle the Inspect Element mode
On OS X, press:
.jpg)
.jpg)
I (option + command + I) keys to open Developer Tools
- J (option + command + J) to open Developer Tools and bring focus to the Console
- C (option + command + C) to toggle Inspect Element mode
When accessing the Developer Tools you can switch between tools by clicking on the respective icon:
The Elements panel allows you to see the web page as the browser renders it. When using the Elements panel you can see the raw HTML, CSS, and explore the Document Object Model (DOM). By clicking on the Elements panel and moving around the source of the page, you can identify the HTML blocks and change on-the-fly the CSS selectors value in order to experiment and fix possible rendering issues.
Before diving into the debugging techniques, let's review the WebKit Developer Tools available in Chrome and in Safari.
The Resources panel lets you inspect resources that are loaded/available to the inspected page. It lets you interact with Frame trees containing frame resources (HTML, JavaScript, CSS, Images, Fonts, and so on), HTML5 Databases, Local Storage, Cookies, and AppCache.
Using the Network panel you can explore the components a web page or application is requesting from web servers, how long these requests take, and how much bandwidth is required.
Using the Sources panel you can access all the resources loaded into the page. Use this panel to access the JavaScript, set breakpoints in the code, and explore the stack trace for each error. In order to set a breakpoint, select the script in which you want to set the breakpoint, and then click on the line number you are interested in. When the debug tool reaches the breakpoint, you can see what's happening in your code by exploring the call stack (i.e., the chain of functions and/or methods executed until this breakpoint) and the scope variables, and move in and out of functions.
The JavaScript can be edited directly inside the debugger and you can see your changes on-the-fly by going back and forth using the navigation arrows. If you want the debugger to stop the code execution each time an exception is raised, use the Pause all button at the bottom left of the panel.
The Timeline panel lets you analyze the various WebKit behind-the-scenes activities such as how long the browser takes to handle DOM events, render page layouts, and handle events.
Once you press the record button, you can start to inspect what's happening in the page you are currently viewing.
The Events and Frames icons (available in Chrome) allow you to access two different timeline data views: the first one is based upon time and the second one is based upon frames; you can zoom into each view using the grey vertical controls at the top.
The Memory icon lets you explore the memory usage for a specific web page; in order to be more accurate during the exploration, it's a good habit to force the garbage collector by pressing the Trash icon at the bottom of the panel. Garbage collection is a form of automatic memory management; the collector attempts to reclaim garbage or memory occupied by objects that are no longer in use by the browser's window.
The Profiles tool helps you capture and analyze the performance of JavaScript scripts. For example, you can learn which functions take the most time to execute and then zoom in on possible bottlenecks and understand exactly where to optimize.
The Audits panel is like having your own web optimization consultant sitting next to you. This panel can analyze a page as it loads and then provide suggestions and optimizations for decreasing page load time and increasing perceived responsiveness.
Take a look at the following results when the Apple.com start page is loaded with the Audits panel opened. Also, the web page of Apple can be optimized, so use this tool as a means to improve your page load time and not as a metric. Once the result is acceptable you can move on to your next task.
Last but not the least is the Console panel. From the Console panel, you can enter arbitrary JavaScript code to programmatically interact with your page.
For best results, you may want to optimize the HTML/CSS/JavaScript of your app throughout the Development phase and not just at the end; the same holds true when developing mobile apps. A very useful tool available in Chrome is the Task Manager (Window | Task Manager), which helps you explore memory usage, the image cache usage, the SQLite storage, and more of each opened tab.
You can customize the information available in the task manager by right-clicking on the Task column header.
If you type in the JavaScript console performance.timing you get a lot of useful information stored in the PerformanceTiming object such as the domain lookup time or the time to complete the DOM rendering. This information can help you identify possible bottlenecks in the view of your app.
The performance.memory property lets you know the JavaScript memory usage of your page. When used in conjunction with the timing property, performance.memory lets you know the numbers about your page. Using these numbers you can easily debug your app especially because there are objects you can use to display debug information on the screen.
Firefox is based upon the Gecko open source layout engine used in many applications developed by the Mozilla Foundation and the Mozilla Corporation. New developers tend to prefer WebKit-based browsers; at the time of writing, Chrome has the largest install base market share followed by Internet Explorer and Firefox. Anyway 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.
Note
Chrome also offers a way to build native apps based upon web standards. This technology is known as Google Packaged Apps , you can find more information about it at http://developer.chrome.com/apps/about_apps.html.
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 explore quickly how to use Firefox to inspect and debug your app; as you will see, there are several similarities between the debug tools available in WebKit and in Firefox.
Firebug, which integrates 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 extension you have to go to https://getfirebug.com/downloads/ and install the latest version. Once installed, you can open the extension by navigating to View | Firebug.
The Firebug toolbar gives you access to HTML source code and CSS rules, lets you explore and debug JavaScript functions, and more.
Once the debugger reaches a breakpoint you can:
- Explore the variables defined in the block of code in which you set up the breakpoint
- Explore the stack of function/method calls
- Create watches in order to understand how the content of a variable changes during the execution of the code
The Script console in Firebug is amazing. You can type your code in the right window and then run it and see the results in the console by clicking on the Run button at the bottom right of the panel.
To filter logs use the All, Errors, Warnings, Info, Debug Info, and Cookies selectors at the top of the window.
As mentioned previously, Firefox has three great native development tools: Scratchpad, Inspect, and Responsive Design View. You can access these tools through the menu bar by navigating to Tools | Web Developer.
Think of Scratchpad as a text editor; you can use it to type and execute JavaScript. The difference between Scratchpad and the console is that it looks like a text editor and you can write all the code you want before executing it.
Another useful tool is Native Inspector (Tools | Web Developer). The Native Inspector is very well designed and very fast when executed; when selecting an HTML node, the UI makes what you selected clear and lets you change the CSS selectors and ID values contextually.
The navigation bar at the bottom and style panel is super easy to use and intuitive, even more you can access it from the bar to the 3D view.
The 3D view shows you how many nested elements are in your DOM.
The Responsive Design View tool lets you change the resolution without resizing the browser. You can also use it to simulate device rotation.
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 web page for IE; this is due to the fact that IE in significant areas diverged from the web standards, but things are changing and the preview of IE 10 is getting good scores in various tests.
Note
In order to get a detailed overview of the support of the web standards in each browser, you can refer to the HTML5 Test tool available at http://html5test.com/compare/browser/chrome27/ff22/ie10.html.
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 the 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.