programming4us
programming4us
MOBILE

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

- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire

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 SettingsSafariDeveloperDebug 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.

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 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.

Other  
  •  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
  •  
    Top 10
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
    - Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
    - Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
    - Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
    - Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
    - Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
    REVIEW
    - First look: Apple Watch

    - 3 Tips for Maintaining Your Cell Phone Battery (part 1)

    - 3 Tips for Maintaining Your Cell Phone Battery (part 2)
    programming4us programming4us
    Celebrity Style, Fashion Trends, Beauty and Makeup Tips.
    programming4us
     
     
    programming4us