Welcome New Firebug 2!

Posted in Software Testing Tools, June 10, 2014

firebug2Firebug 2 has been released and it’s good time to go over some features that have been introduced in this version as well as over some extension that can help analyze web applications.

Firebug 2 is great achievement of entire Firebug community that is composed from contributors around the world. Firebug look and feel has been improved and we focused a lot on usability and clean user experience. First, let’s check out brief list of new features.

  • Syntax Highlighting
  • Pretty Print
  • DOM Events Inspector
  • Searching in the HTML Panel
  • Code Auto Completion
  • JavaScript Expressions Inspector
  • Console Log Grouping
  • Inspect JavaScript Function Return Value
  • Show/Hide Firebug Panels
  • Display Original CSS Color Values
  • Quickly create new HTML attribute
  • Inspect Registered Mutation Observers

Does it sound interesting, if yes read the detailed list of features.

Let’s focus on two scenarios and extensions (compatible with Firebug 2) that allow exporting data from Firebug. Firebug is collecting a lot of meta-data about the current page and some of them might be quite useful especially when running automated testing systems (e.g. Selenium) for web applications. Such data might be used for further analyses to figure out why given web page is slow.

HTTP Traffic

One of the most important aspects of web applications is page load performance. It’s large topic these days and represents important part of performance analyses. The more dynamic web pages are the more developers and testers need to watch HTTP traffic and possible impact on overall page performance.

In order to observe network activity Firebug is offering a Net panel.

Net panel

The Net panel collects a lot of information about the network traffic including timing and all data sent over the wire. These are nicely displayed in the UI, but in some cases data itself are actually more interested than the way they are presented to the users. Quite often, testers want to automatically export pure HTTP traffic data to analyze them by other tools and do it e.g. for every page loaded by Selenium during automated test suite run.

In order to export Net panel data you need to install an extension called simply NetExport. This extension appends a button into the Net panel toolbar and offers features related to automatic export of collected data.

NetExport

The format used for exported data is based on JSON and called HAR (HTTP Archive). This format is largely supported by many HTTP analytics tools. You can see list of HAR adopters.

Here is a brief list of features you might be interested in:

  • Net export allows manual data export
  • There is an option for auto export for every loaded page
  • Exported data can be stored locally or sent to a remote server
  • Exported data can be auto-compressed

You can also learn more about how to automate page load performance testing with Firebug, NetExport and Selenium.

Logs

Another piece of data that might be useful for web application analyses are application logs. Various logs appearing in Firebug Console panel can provide valuable information about how healthy given web application is and what has been happening during its life time. Various errors, warnings or simple logs (including location information) can be very descriptive.

Again, it might be useful to collect this data automatically for every page that is loaded when a test suite is running.

In order to export Console panel data you need to install an extension called simply ConsoleExport.  This extension appends one button into the Console panel toolbar and offers features for automatic export of collected data.

ConsoleExport

(most of the features are controlled through preferences, so the UI is minimal)

Here is a brief list of features you might be interested in:

  • Console export allows manual data export
  • Logs can be exported as HTML or XML
  • Log exporting can be automated
  • Exported data can be sent to remote server.

You can learn about how to automate sending individual logs to remote server.

About The Author: Jan 'Honza' Odvarko, Firebug team leader

Jan Odvarko is long time developer with focus on visual tools. He has deep passion for software architecture and user interface design. Jan is currently leading the Firebug project.

Post comment

Яндекс.Метрика