I prefer Safari for my casual web browsing on the Mac, but for web development, nothing beats Firefox. (Firefox beats IE hands down on Windows.) Firefox’s openness and the Firefox plugin architecture means that there is little that you cannot find out about a web page with a Firefox add-on. I’ve tried a bunch of different Firefox extensions for web development. Here are the ones that I find most useful and that I use on a regular basis.
DOM Inspector
Yes, yes, it comes installed with Firefox, but lets not forget the basics. The DOM Inspector allows you to see what is actually going on in your web document. The DOM Inspector lets you browse DOM nodes, style sheets, or Java Script objects. You select a node by either drilling down, by searching, or by clicking on it. Although, the UI for selecting a node with your mouse is just plain lousy. Once you’ve chosen your subject, the DOM inspector can show you the box model information for that node, the style sheets associated with the node, the computed CSS styles, or the Javascript object.
Web Developer Extension
Chris Pederick’s Web developer extension has been out for a long time and is the plugin I am most familiar with. This is really the swiss army knife of web developer tools. It is so feature packed that I am still finding new things that it does. Unfortunately, the UI is also so cluttered that I am still finding new things that it does.
This add-on can slice and dice a web page every which way. It can outline a variety DOM elements, for example drawing an outline around all block elements on a page. This can be nice for lining things up. The Display Line Guides option is also a good way to verify alignment, not to mention Display Ruler, or Display Page Magnifier for fine detail.
This extension has dozens of reports, each one geared toward diagnosing a particular kind of problem. Some of them are external, such as sending your URL to a validation service. Some are internal, such as showing a dump of all of the page’s active cookies. Unfortunately, many of these option open up in a new tab, taking the focus off of the page that you are trying to work with. It can be hard to tell which options do this. There is an option for having the tabs open in the background, but this is not the default.
The View Style Information option is particularly nice. You can point to any element on the page and the extension will display the element tree along with ids and classes. If you click on an element, it will display only the style rules that apply to that element. This beats the drill down approach in the DOM inspector, although it doesn’t show box model information or computed style information this way.
The web developer extension can change things as well as inspect them. You can go into a mode where you can edit your CSS or HTML in real time for immediate feedback. This is great for testing out small changes. For the PHP developer, the extension has a variety of options for manipulating cookies and forms. There are also a variety of ways to enable or disable certain elements on the page.
Install Web Developer Extension
Tamper Data
Tamper Data is live HTTP headers on steroids. Tamper data records the HTTP request headers and HTTP response headers for each request that the browser makes. Not only that, It allows you to “tamper” with the requests before they are sent out, editing headers or form values behind the scenes. Tamper data can present a graph of the requests involved with loading a web page. Tamper data is great for security testing and page loading performance tuning.
FireBug
FireBug, ah what can I say but wow! According to their web site:
Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
Firebug has considerable overlap with the extensions I’ve mentioned so far. It doesn’t necessarily duplicate all of their functions, but the ones it does, it does really well. It goes way beyond in some cases. There is really no point in me talking about Firebug’s features, because the website already does such a good job at it. They’ve impressed this jaded old developer.
If you haven’t tried this one yet, seriously, go get it right now.
ColorZilla
ColorZilla adds a small eyedropper tool to the bottom left corner of the window. You can use this tool to inspect colors on the current web site. Double clicking it brings up a color picker and some other color related tools.
Multiple Profiles
Ok, I lied. There are a few situations where I use FireFox for casual browsing. Some web sites just won’t work with Safari, or don’t work well with Safari. For these, I pull up Firefox. I don’t want my casual browsing tools to clutter up my web development experience and I don’t want my web development tools to clutter up my casual browsing experience. The solution is to create multiple profiles in FireFox. I have one for web development and another for normal surfing. I have safari ask me to select a profile on start up. This extra step would be annoying for a primary browser, but it doesn’t seem too bad for a secondary browser.
Setting up my Mac series
Firefox is not mac specific, but this is actually the latest installment in my setting up my Mac series.
- How to Transfer Mac OS X Application Data between Computers
- Free Software for Mac OS X
- FireFox Extensions for Web Developers
- UPCOMING: Configuring Boot Camp and Parallels
Feed
Subscribe to this blog…
Thank you for the list, there are some new ones in there which I have not heard of before which I must investigate. I’d also like to reconmend Sage the news feed reader:
http://sage.mozdev.org/
I am developing a news feed generating module for a web framework which I am working on, which can generate the same feed in RSS, RSS 2.0 or Atom format, so having Sage installed is proving to be invaluable while testing because it supports all of these formats, and it also has a nice clean interface.
I’ve found most of the web developer firefox extensions quite poor, incomparison to their IE equivalents.
HttpWatch instead of Tamper Data.
Microsoft IE DOM Explorer provides most of DOM Inspector, Web Developer Extension, and ColorZilla.
Microsoft Script Editor, a full (java)script editor & debugger.
Thanks for the list. ColorZilla is one that I’ve never heard of. It will probably save me some time. I’ve used all the others you mention for quite a while. I have to say, FireBug is by far the best. If you jumped on the Web 2.0 bandwagon like I have and develop RIAs, this is a must!
My addition: XPather, CSSViewer, Live Http Header and EditCSS. I find Microsoft Script Editor is poor
Thanks for the links,
I’ve only ever really used firebug. I love it for my AJAX development.
I’ll try all the others right now
Thanks again
Dougal
Hello, just wondering if you could help me out…
I’m an amateur web designer and I’m looking for a particular php script but I’m not sure what category it’s under or what its called. I hope you are able to help me out!
There is a main page containing the layout called index.php. There is a php code in the script in the area where pages can be embedded.
Other pages are then embedded using the query string. For example, if I had a page of content called contact.php, I can embed contact.php in the main layout by typing http://www.blahblah.com/index.php?page=contact
Do you recognize this script? I will appreciate your help very much. Thanks!
I also use Live HTTP Headers, User Agent Switcher in addition to WebDev, FireBug. Gotta love them!
I’ve been maintaining a similar list for over a year now. Many are also mentioned here and in the comments, but there are some others you might be interested in.
Thx, you have discover me few tools i need.
I use the web developer extension a week to two, and I’m very glad to have it. Very useful..
You have got to be kidding.
CSSViewer, XML Developer, FireBug
Firebug is an excellent tool I must say, going to try out ColorZilla too. Sounds like the plugin I have been waiting for forever. Yey, finally
Blue – A Free Web Directory
Great list of extensions folks.
I have been trying to find a way to use multiple profiles in Safari.
Can you elaborate on how you do it?
Thanks!
In my opinion, firebug is nearly unbeatable. Everything the web-developer needs.
Why I use Firefox…
The reasons why I use Firefox over Internet Explorer…
I use Firebug and occasionally, Web Developer. Web developers using Firebug might find the two features very useful that are disabled by default:
a) Net Panel: shows you the download time of the items on a page. It clearly shows you the requests sent by the browser (e.g.
GET /images/watermark.png) and responses sent by servers (e.g.302 Moved Temporarily), download time, processing time and so on. Bonus: It will also show you the requests made via ajax and the responses.b) Console: Javascript console, shows errors (syntax errors or otherwise) and allows you to evaluate code in real time (e.g.
>>> googlemap1.getCenter( );and>>> googlemap1.setCenter( new GLatLng( 10.1, 20.2 ) );)Thanks for the list of new tools.
You truly said that Firefox is the best option in windows environment. It is very helpful to web developers .
The firefox is very useful. thanks for your share
Sweet , I can’t get enough from you guys and continue that great work that really inspires me to create.
Thans for your share, i like firefox extension
?????? ??? ?????????????? ??????, ????????, ????????
Nice, exactly what I was looking for!
fbTWms dkbmgtsrkvkx, [url=http://keanvukjpeqj.com/]keanvukjpeqj[/url], [link=http://zlxmeaxmliel.com/]zlxmeaxmliel[/link], http://uaziwsxfwedm.com/