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 (http://getfirebug.com). 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.
Warning:
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.
Note:
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 http://www.jsconsole.com.
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
Settings→Safari→Developer→Debug Console. With the debug console
activated, you will find a new 60-pixel-high toolbar below the top
toolbar of the browser.
Note:
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.
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 Tools→Advanced→Developer 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 http://www.mobilexweb.com/go/dragonfly.
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
http://www.mobilexweb.com/go/adb.
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 http://www.mobilexweb.com/go/bbdebug.
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.
Warning:
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.
Note:
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 http://code.google.com/p/jsdt.
Another option is Firebug Lite (http://getfirebug.com/lite.html), 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.
