Using Firebug for troubleshooting Browser issues

Introduction

At the browser level, you can do a lot of testing on both performance and checking how elements are displayed. Jaspersoft recommends a Firefox plug-in named Firebug. This is an excellent tool only available for Firefox but Chrome, IE7 and IE8 have similar tools.

You can use Firebug to troubleshoot performance issues, such as executing reports, dashboards, or any other page in the JasperReports Server application. That way, you can tell whether slow performance is due to slow server responses, or slow browser processing. For example, some JavaScript-heavy pages can appear to take a long time to load, and the root cause may be that the JavaScript (or some other browser-side component) is slowing down the browser from showing the page to the end user.

Overview

When Firefox is installed and opened, Firebug will appear at the bottom right of the browser, right below your page. Firebug ships with several tools:

• Console which allows to test some jasvascrit on the page. This a very powerful and the simplest way to select an element on the page view its properties and check the behavior when you change something.
• HTML allows to view the source code of the HTML page
• CSS gives you access to all the Stylesheet files used by the page displayed and allow to modify it
• Script gives access to all the javascript from the page and eventually makes possible to change it
• DOM is focusing on objects and properties of each of them
• Net gives all the information the user need regarding the order elements are downloaded and rendered and how long it took for it.

On each of those 6 sections, a search filter makes it easy to go directly to what you're looking for.

Performance

The most useful tool performance-wise is Net. If you activate it before rendering a page, let say one of your reports, then on opening your report, 'Net' will display in detail every single event which happens to open the page and the timing for each element.

You can thus very easily and very quickly identify what is slowing down the report rendering. And if the page renders very quickly but it takes a long time to be able to view the report, then you can conclude that you need to investigate server side issues.

Net also provides more information on each call. An important point when troubleshooting performance is the size of each element.

Net gives you all that for each element. A large element will naturally take more time to load, so this might be another clue to improve your performance.

User Interface

Firebug is a great tool for performance but it also provides a multitude of functionality to customize the UI in any aspect, though you will need some knowledge about CSS and HTML to use all its power.

Either by right clicking directly on an element on the page (report) or by clicking on the "Inspect Element" button, you can select an element (a title, a picture, a chart, an element in the table) and it will automatically highlight the HTML code in the Firebug section at the bottom of the page.

Then for that element all aspects of the appearance will be displayed on the right panel of firebug either as CSS in the styles tab, or as the result of that CSS in computed tab, or in a more graphical way especially for margins and padding in Layout tab.

Changing anything in the style, the padding, the alignment will show in real time how it will be displayed on the page. If your satisfied with result, you can then copy all the modifications you've made right into your theme. See our User Guides for more information on themes in JasperReports Server 4.0 and greater.

Resources

To learn more about Firebug, have a look at these online tutorials:

• http://www.evotech.net/blog/2007/06/introduction-to-firebug/
• http://www.w3resource.com/web-development-tools/firebug-tutorials.php

or watch those videos:

• (including a demo showing how to check performance)
• (focused on page style and appearance and also performance)
• http://www.youtube.com/watch?v=2xxfvuZFHsM (JavaScript debugging)