Web Inspector from BlackBerry PlayBook OS 2.0 can improve performance, bug fixing and experience building

Java Development

BlackBerry® developers can use the Web Inspector utility to help to debug and profile web application content running on a BlackBerry® PlayBook™ tablet. I discussed this earlier in a blog post entitled “Debugging BlackBerry web applications using Web Inspector,” and BlackBerry remains the only mobile development platform in the market with this feature. This powerful debugging tool can be used to test and troubleshoot HTML5 content, running either in the browser or within an application created using the BlackBerry® WebWorks™ SDK. Instructions about how to debug BlackBerry web applications using Web Inspector can be found in developer support documentation.

The BlackBerry® PlayBook™ OS 2.0 software upgrade provided major enhancements to the web developer platform, and I wanted to highlight some of the key improvements to Web Inspector that are now available in OS 2.0 as well. These enhancements can make it easier for developers to fix bugs, improve performance and create positive experiences for their users.

Quick access settings menu

A settings panel is now available to help developers configure how information is presented within Web Inspector. Developers can define default formats for colors, text indentation and word wrap behavior.

Network panel

The new networking panel displays helpful information about HTTP request and responses made by your application. This includes network traffic logging about documents, style sheets, images, scripts, XmlHttpRequest, fonts and even web sockets.

Click on any resource displayed on the left side panel to view its request and response HTTP headers as well as a preview of the actual resource.

Context Menu

Right-clicking on any panel in Web Inspector will now display a new context menu. This menu contains items that are relevant to the current window. For example, within the “Elements” panel developers can edit or copy selected HTML elements, while in the Network panel, developers can copy link addresses as well as HTTP request and response headers.

Note: Access to the system clipboard is restricted by JavaScript®, so in order to implement this copy feature, Web Inspector will instead open a new tab or window in your browser and display the selected information in plain text. If you have popup blocking enabled, you may not see this new tab or window.

Console window auto-complete

Another great improvement is that Web Inspector has been designed to respond to what you type in the console window. Often the console is used to make dynamic calls to JavaScript loaded on the page. This can be a helpful practice for checking variable values or running debug code.
To see this in action, start typing some JavaScript from within the console window, such as the example shown in the following screenshot. After each period, you should be prompted with a drop-down list of available method or property names for the current JavaScript object you have provided.

Custom User Agent

Web Inspector can now be used to change the value of the user agent header. This header is often used by web servers to detect which browser is currently being used to access a web page, and provide custom content targeted to that browser. Open up the settings window and select the “Override User Agent” checkbox. You can then select from a list of default user agent values, or provide your own.

See the “How to detect the BlackBerry Browser” developer article for more information about the format of the user agent header on the BlackBerry web platform.

JavaScript “pretty print”

Minifying JavaScript is an excellent way of improving web page performance by reducing unneeded bandwidth. However, it can become very difficult to debug minified JavaScript as finding the right place to set breakpoints can be challenging.

When JavaScript is minified, all whitespace and comments are removed. This often results in an entire library being displayed as a single line of code.

Fortunately for BlackBerry developers, Web Inspector now provides a “Pretty print” feature, which can be found at the bottom of the status bar in the Scripts panel. When clicked, it will automatically re-format all JavaScript using appropriate indentation and whitespace.

Don’t forget to use Web Inspector as part of developing and testing your HTML5 and BlackBerry WebWorks applications. It can save you a lot of time and frustration in tracking down a bug, or finding ways to optimize your web content.

Try it out for yourself, and let us know how it helps with your BlackBerry development.

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