Programming the Mobile Web : Testing and Debugging (part 3) - Client-Side Debugging

2/15/2011 11:34:29 AM

4. Client-Side Debugging

JavaScript debugging is one of the most painful activities in mobile web development. Every browser has a different JavaScript engine, and sometimes code that works on one device doesn’t work on another.

Typical desktop JavaScript techniques should be used first to debug logic problems in our code. This includes using the developer tools from Chrome, Safari, or Internet Explorer, or the classic Firebug for Firefox ( But just because everything works in a desktop browser doesn’t mean that it will work in a mobile browser. Rich Internet Application techniques are the worst problem areas.


One problem we will have is that if a JavaScript error is encountered, many devices don’t show any notice and the code simply ends its execution.

4.1. Browser-based solutions

Some mobile browsers offer developer tools for JavaScript debugging or console logging features.


There is a free and simple web application that allows us to evaluate JavaScript on a mobile browser for testing purposes. To try it, just point your browser to

4.1.1. Safari on iOS Debug Console

Safari includes a debugging console that we can activate (both in simulators and on real devices) by going to SettingsSafariDeveloperDebug Console. With the debug console activated, you will find a new 60-pixel-high toolbar below the top toolbar of the browser.


The Symbian browser has script error logging disabled by default. You can activate it from the Settings menu inside the browser.

Clicking this toolbar opens a full-screen Console window, as shown in Figure 9, where you can see advice, warnings, errors, and console output, which you can filter into HTML, JavaScript, and CSS categories. For better detail reading, use landscape orientation.

Figure 9. When you activate the debug console you will see the console toolbar (left), which you can click on to access a details list (right).

From JavaScript, you can send messages to the console using the log, warn, error, and info methods of the console global object available in the iPhone browser. All of these methods receive a string. The difference between them is the icon used to show the text. For example:

console.log("This text will appear on the Console");

4.1.2. Opera Dragonfly

From Opera Mobile 9.5, we can debug mobile web applications using the remote debugging tool Dragonfly. To use this tool you will need Opera 9.5 or later on your desktop. You can open Dragonfly by going to ToolsAdvancedDeveloper Tools and checking the Remote Debug option.

When you’re done, enter opera:debug in your Opera Mobile browser and specify your desktop IP address (public or private, if you are connected using WiFi to the same LAN). You will then have access to the same debugging features (DOM, CSS, and JavaScript) that you would if you were debugging a local desktop file.

You can also debug Opera widgets with this tool. Complete instructions and tips can be found at

4.1.3. Android Debug Bridge

Android doesn’t have as nice a console output as Safari on iOS, but we can still read the console errors and even use the same console object using the Android Debug Bridge (adb). adb is a command-line application available in the tools folder of your SDK.

You can find more information on how to use this console at

4.1.4. BlackBerry web development tools

BlackBerry offers two plug-ins that can be used to develop and also to debug, profile, and package web applications. Both provide JavaScript debugging with breakpoints, Ajax requests visibility, and time-to-load reporting for web content. You can download the BlackBerry Web Plug-in for Eclipse and BlackBerry Web Plug-in for Visual Studio from

4.1.5. Widget debuggers

The BONDI SDK for widgets offers a remote debugging feature that can be used from the Google Chrome Developer Tools. WRT plug-ins for Aptana Studio and Visual Studio also support debugging over the emulator (remember that it is not the real engine). The LG SDK and the BlackBerry web development tools have great debugging tools for widgets, too.

4.2. JavaScript solutions

There are some scripts that work as a kind of debugger, including DOM and CSS inspectors and some that work for JavaScript debugging, too. The mobile compatibility for these tools is complicated, though, because of the lack of space on the screen to show all the information. There are also some Ajax-based solutions that will work better, allowing you to view the debug results and panes from a desktop.

Creating a simple log console is easy, using a floating div or another visual element to show messages sent by a console.log call.


Using alert windows for logging and debugging is annoying and a bit intrusive. Try to use another solution.

For example:

if (console==undefined) {
var console = new Object();
console.log = function(text) {
if (document.getElementById("console")==undefined) {
document.getElementsByTagName("body")[0].innerHTML =
"<div id='console'></div>";
document.getElementById("console").innerHTML += "<p>" + text + "</p>";

With some CSS to the console and console p selectors, you can see a console. With some scripts, you can also create an object browser and a console JavaScript execution engine using eval.


You can check whether window.onerror is available and catch every error before blocking all the rest of the script.

The JavaScript Debug Toolkit (JSDT) is an Ajax-based JavaScript debugging tool that works with mobile devices as a desktop standalone application or an Eclipse plug-in. It is available at

Another option is Firebug Lite (, a plug-in that makes some Firebug tools available on non-Firefox browsers if you add a JavaScript file and a CSS file on your website. It works in many mobile browsers and widget engines (including Symbian, Safari, Android, and Palm), but the navigation is very complicated when the Firebug Lite view is open.

  •  Windows Phone 7 : Working with Controls and Themes - Adding Transition Effects
  •  Windows Phone 7 : Working with Controls and Themes - Understanding Frame and Page Navigation
  •  Windows Phone 7 : Working with Controls and Themes - Panorama and Pivot Controls
  •  Programming the Mobile Web : Widgets and Offline Webapps - Platforms (part 5) - Windows Mobile & BlackBerry
  •  Programming the Mobile Web : Widgets and Offline Webapps - Platforms (part 4) - Windows Mobile & BlackBerry
  •  Programming the Mobile Web : Widgets and Offline Webapps - Platforms (part 3) - webOS & Android
  •  Programming the Mobile Web : Widgets and Offline Webapps - Platforms (part 2) - iPhone, iPod, and iPad
  •  Programming the Mobile Web : Widgets and Offline Webapps - Platforms (part 1) - Symbian/Nokia
  •  Programming the Mobile Web : Widgets and Offline Webapps - Standards
  •  Mobile Application Security : BlackBerry Security - Networking
  •  Mobile Application Security : BlackBerry Security - Local Data Storage
  •  Themes on Windows Phone 7 Devices (part 2) - Changing the Theme & Detecting the Currently Selected Theme
  •  Themes on Windows Phone 7 Devices (part 1) - Applying a Theme
  •  Programming the Mobile Web : Mobile Widget Platforms
  •  Programming the Mobile Web : Geolocation and Maps - Showing a Map
  •  Mobile Application Security - BlackBerry Security - Permissions and User Controls (part 2)
  •  Mobile Application Security - BlackBerry Security - Permissions and User Controls (part 1) - RIM Controlled APIs
  •  Windows Phone 7 Development : Working with Controls and Themes - Introducing the Metro Design System
  •  Windows Phone 7 Development : WebBrowser Control - Saving Web Pages Locally
  •  Programming the Mobile Web : Geolocation and Maps - Detecting the Location (part 3)
    Top 10
    Windows Server 2003 : Domain Name System - Command-Line Utilities
    Microsoft .NET : Design Principles and Patterns - From Principles to Patterns (part 2)
    Microsoft .NET : Design Principles and Patterns - From Principles to Patterns (part 1)
    Brother MFC-J4510DW - An Innovative All-In-One A3 Printer
    Computer Planet I7 Extreme Gaming PC
    All We Need To Know About Green Computing (Part 4)
    All We Need To Know About Green Computing (Part 3)
    All We Need To Know About Green Computing (Part 2)
    All We Need To Know About Green Computing (Part 1)
    Master Black-White Copying
    Most View
    Epic Moments in Sports (Part 1)
    iPhone 3D Programming : Blending and Augmented Reality - Blending Recipe
    HP X2301 : Micro Thin, Macro Sights
    Advanced ASP.NET : Understanding Caching
    Amateur Astronomy Applications (Part 1) - WorldWide Telescope, Stellarium
    How To Buy…SSD Drives (Part 2)
    Macro Marvel by Peiling Lee
    Under The Surface (Part 1)
    Microsoft .NET : Design Principles and Patterns - Object-Oriented Design (part 1) - Basic OOD Principles
    Hosting a Multi-Tenant Application on Windows Azure : Selecting a Single-Tenant or Multi-Tenant Architecture
    Google Nexus 4 - Features Of A High-End Smartphone For Half The Price
    Developing an SEO-Friendly Website: Content Delivery and Search Spider Control (part 2)
    SQL Server 2008 : Explaining Advanced Query Techniques - Managing Internationalization Considerations
    Frequently Asked Questions About UAC
    Windows Server 2008 : Harnessing the Power and Potential of FIM
    Parallel Programming with Microsoft .Net : Dynamic Task Parallelism - An Example
    Microsoft XNA Game Studio 3.0 : Displaying Images - Using Resources in a Game (part 3) - Sprite Drawing with SpriteBatch
    Windows Server 2003 : Active Directory - Understanding Operations Master Roles
    Windows 7 : Using Windows Defender (part 3) - Using Windows Defender Tools & Troubleshooting Windows Defender
    iOS 6 Beta Review (Part 1)