Debugging BlackBerry web applications using Web Inspector

How-to

With the recent launch of the BlackBerry® PlayBook™ tablet, there has been a lot of excitement and activity around developing Web content for the platform as well as using the BlackBerry® WebWorks™ SDK to produce fully-featured standalone BlackBerry® applications.

I wanted to share details about some of the available debugging and profiling tools that you can use to improve the quality of your content by troubleshooting bugs, tuning changes, and optimizing performance.

Web Inspector for the BlackBerry Tablet OS

Web Inspector

The Web Inspector tool is a debugging and profiling development tool for web content that is included as part of the WebKit rendering engine. It is widely considered one of the most comprehensive and powerful utilities that web developers can use to troubleshoot and optimize their web content. It includes a variety of features and capabilities, such as inspection, profiling, console integration and more.

A common challenge that mobile web developers have historically experienced is that the Web Inspector tool is easily accessible for use with content loaded directly within WebKit-powered desktop browsers (such as Google® Chrome or Safari), but not necessarily for content loaded on a mobile device. I’m very happy to share that you can now use the Web Inspector tool to debug and profile live web content and/or BlackBerry WebWorks applications running on a BlackBerry PlayBook tablet or simulator. In fact, the Web Inspector tool for PlayBook is one of the only detailed ways to see inside a live mobile browser.

How do I enable the Web Inspector tool for content loaded in the BlackBerry Tablet OS browser?

  1. Select the “Privacy & Security” tab from the “browser options” screen on your BlackBerry PlayBook tablet.
  2. Switch the “Enable Web Inspector” to On.
  3. When prompted, enter your BlackBerry PlayBook tablet device password.

Web Inspector

How do I enable the Web Inspector tool for a BlackBerry WebWorks application?

  1. Use the –d command line operator when using the bbwp.exe utility to build your application.

bbwp.exe c:\sandbox\myApp\myApp.zip –d

Tip: You can enable the Web Inspector flag while building a signed version of your application; however, it is not recommended. By using both of these command line arguments together, it may allow remote access to the production version of your application.

How do I use the Web Inspector tool to load live content from the BlackBerry Tablet OS?

  1. Open a desktop web browser such as Chrome, Firefox, Safari or Internet Explorer.
  2. In the address bar, enter the IP address of the target BlackBerry PlayBook tablet and port 1337 (e.g. http://198.168.1.7:1337).
  3. You will be prompted with a list of page titles for content that has been loaded into memory by the Web Inspector tool (such as browser content or a BlackBerry WebWorks application).
  4. Click on any of the page titles to begin using the Web Inspector tool to debug and profile your Web content.

What about BlackBerry Smartphones?

Beginning with BlackBerry 7 handheld software, all handheld software going forward will have support for Web Inspector.

There is also a variety of alternative debugging options available for you to choose from that can assist in the troubleshooting and tuning of application content running on existing BlackBerry smartphone device software.

Additional debugging options

Some additional utilities that can be used to debug and profile web or BlackBerry WebWorks content running on BlackBerry Device Software version 5.0 and BlackBerry® 6:

Weinre

Weinre (Web Inspector Remote) is a server-based solution created by Patrick Mueller that is very similar in function to WebKit Web Inspector, except you can view and modify live debug info running from your mobile web content using a desktop browser. This can be quite powerful as it is designed to allow you to invoke remote JavaScript® from the console, as well as dynamically modify page content at runtime such as HTML or CSS. You can even use Weinre to troubleshoot blackberry.* JavaScript APIs.

Firebug Lite

Similar to Firebug, a developer plug-in for the FireFox browser, Firebug Lite is a JavaScript framework that is designed to be used to add debugging & profiling capabilities to web applications, including those for BlackBerry WebWorks. Developer Levi DeHaan has posted in the BlackBerry Web Community Forums about using Firebug Lite as part of your BlackBerry WebWorks application development.

Jsconsole.com

JSConsole.com is a remote service created by Remy Sharp that can be used to configure your BlackBerry WebWorks content to load a remote JavaScript file that shares output from console.log(). By doing this, you can view console output generated by your BlackBerry WebWorks application from your desktop browser, and troubleshoot applications running on either a live device or simulator.

More Info

Happy debugging!

About Adam S.

Adam is a Team Lead on the Developer Relations Team at BlackBerry. He manages technical relationships with ISVs as well as incubating the developing community ecosystem. Adam specializes in producing applications based on web and native technologies.

Join the conversation

Show comments Hide comments
+ -
blog comments powered by Disqus