Firebug 2 has been released by the Firebug team today and it’s a good opportunity to go over some features that can help web developers and testers in testing their web sites quickly and effectively.
Searching for elements within the page
One of the new features introduced in Firebug 2 is related to element search in the HTML panel. Selenium developers especially often need to find an element that corresponds to specific CSS selector, XPath or regular expression or, the opposite, find what XPath or CSS selector should be used to target a given element. These tasks can be simply performed using Firebug.
When you want to search for DOM elements within the current page, select the HTML panel and use the search field at the right side of the main toolbar.
There are three different expression types the user can use for searching:
- Plain text – Search by a keyword
- CSS selector (new in Firebug 2)
- Regular Expression (new in Firebug 2)
The following screenshot shows what it looks like if you use CSS selector to find an element:
Using regular expressions requires the Use Regular Expression option to be set:
To get XPath or CSS selector for an element, it is easy as clicking on the element and picking one of the available actions in the context menu.
There are the following options:
- Copy XPath – Copies absolute XPath of the clicked element to the clipboard
- Copy Minimal XPath – This action is available if the element has an ID attribute. In such cases, the XPath can be optimized into: //*[@id=”<element-id>”]
- Copy CSS Path – Copies CSS selector of the clicked element to the clipboard
Note that you can right-click on an element anywhere in Firebug UI to get these copy actions. It can be on a logged element in the Console panel, in a Watch side panel in the middle of debugger stepping, or for example, inside the DOM panel:
Analyzing page load Performance
Another scenario where Firebug can be useful to web page testers relates to page load performance analyses. Basic network monitoring is done through the well-known Net panel that intercepts HTTP traffic done by the current page. It displays various information about timing as well as data sent over the wire:
There are resources you can read to see what features are available in the Net panel and how to use them. You can start with these:
Less known are Firebug extensions that you can install in order to get more features related to page load performance analyses. The best ones (and compatible with Firebug 2) are:
- Page Speed
YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high-performance web pages. YSlow grades web pages based on one of three predefined rule sets or a user-defined rule set. It offers suggestions for improving the page’s performance, summarizes the page’s components, displays statistics about the page, and provides tools for performance analysis, including Smush.it™ and JSLint.
YSlow gives you:
- Performance report card
- HTTP/HTML summary
- List of components in the page
- Tools including JSLint
Page Speed is an open-source Firefox/Firebug add-on. Webmasters and web developers can use Page Speed to evaluate the performance of their web pages and to get suggestions on how to improve them.