If you use Selenium, or some other web testing tool that can use XPath for element selection, Firebug provides a handy tool for testing.
In the console, it adds a new function $x. It takes an xpath as a parameter, and will return the item (or items) that match the xpath. You can then hover over the returned result to verify that the item you’re looking for is the one selected.
For debugging javascript, viewing the DOM by selecting items, seeing the style applied etc, here are 2 great tools.
2. For IE, check out Internet Explorer Developer Toolbar
Firebug is more powerful, but at least if you want/need to check something in IE, there’s an option.
Why would you care? The first time I used it was for stylesheet changes. Imagine you’re modifying a stylesheet but the element isn’t getting the style. Open the document in Firefox, inspect it, and you can see the styles applied in order, and by file. It will also show those that are defined, but are overridden at a higher level.
Ever wanted to test some javascript against a page, but don’t want to have to keep modifying the source page? Again, open up Firefox and enter the javascript in Firebug. It runs it right there, and shows the results. Once you get it correct, you can cut-and-paste it into your code.
My list of Firefox extensions as of today.
Tab Mix Plus – Gives much better control over Tab appearance and functionality, as well as including a Session Manager. Well worth the download
FireBug – For all your web page development tasks. CSS, Javascript, Ajax development. Layout problems etc. Well worth checking out and installing if you do ANY web page development with CSS or Javascript.
Download Manager Tweak Extension – Allows the download manager to be opened in a tab, and a few other minor enhancements.
Image Zoom – for zooming in and out on images.
Feed Your Reader – Will re-direct RSS feeds to your favourite reader. I use this to ‘feed’ them to Feeddemon
IETab – If you want to open a window in Firefox, but it really needs IE, then this extension is for you. Used the IE control inside a Firefox tab.
CSE HTML Validator – if you use the CSE HTML Validator, this plug-in lets you use it on a loaded page. Can have it validate all pages you load, or only when you do a View source. Note, the plug-in works with the free version too.
Old:
Web Developer Extension – Essential if you do any web development. Allows for quick selection of information, and selective control over stylesheets, cookies and other items related to web page design.
For opening pages in Firefox that require IE.
Looks like a great tool for web page development. Allows for instant mods to current page to test it under various conditions, or analyze information on the page.
Allows for easy zooming of images. Firefox (and other browsers) allow ‘zooming’ on text (i.e. making the text larger) via the view menu, and this extension provides something similar for images. Now you can zoom in on an image to see it larger. Obviously if you zoom too much, the quality degrades, but I find this feature handy.
The homesite for this extension is here
Provides even more level of control over how new windows will be created. Firefox 1.0 added some of this by allowing you to tell it to create new windows as new tabs instead, but Tabbrowser Preferences takes it to the new level. I have it set to open all new windows as tabs instead, in the background and have Firefox hopefully not take focus from the program that sent it. This allows me to click on links in email newsletters without having Firefox come to the front, but also without having to manually create a new tab for each one. I can now open all the links I’m interested in, and read them later.
And here’s the link.