Some great Web Developer extensions (that are updated for Firefox 1.5rc3)
November 22nd, 2005 | Published in Firefox, Web Development, Work | 23 Comments
I recently tested all of the following extensions on Firefox 1.5rc3 and OS X. Your mileage may vary.
Web Developer extension
This extension has long been a mainstay for web developers, and I’m extremely happy that it’s being actively updated to work with the latest Firefox releases. When installed, the Web Developer extension adds a toolbar that gives you quick and easy access to a huge number of useful utilities, ranging from viewing and editing CSS through one-click CSS, HTML, and Section 508 validation. It is absolutely indespensible for serious web development work.
View Source With
The ViewSourceWith extension allows you to specify any external application with which to view the source of a web page. If you’re not a fan of the standard View Source system in Firefox, this extension gives you the freedom to use the application of your choice.
Measure It
If you’ve ever needed to know exactly how many pixels it is from point A to point B on a web page, Measure It is here to save the day. This little extension allows you to “pull” a ruler from any point to any other point within the browser window to get precise pixel measurements for height and width. It’s turned on and off with a simple click in the bottom left-hand corner of the browser. Very handy for those pixel-perfect layouts.
View Rendered Source Chart
This is easily one of my favourite new-to-me extension discoveries. View Rendered Source Chart creates a beautifully formatted and shaded rendering of your page source (including dynamically-generated source, static source, and JavaScript output) that clearly and cleanly displays the nested elements. I’d say this is a must-have extension for developing today’s complex page structures.
Link Checker
Fast, simple, visual link checker. This is an absolute godsend of an extension for maintaining web pages and fending off the nefarious demons of link-rot.
UrlParams
Essential for testing and debugging form submissions or other URLs that contain a number of name-value pairs, this extension stays continually updated while you surf. In a nicely designed and compact sidebar, the extension displays the bare URL (without parameters), the referring URL, GET and POST values, the ability to add more name/value pairs to a set, and the option to submit or resubmit (in current window or new tab) the URL values.
Screen Grab
Requiring Java (JVM), you can take full “screen shots” of entire web pages with this extension. Unlike normal screen shots that only capture what’s displayed within the confines of the browser window, Screen Grab will capture an image of the whole page from top to bottom.
EditCSS
While still imperfect, EditCSS is a quick and easy way to view and play with the CSS files for many pages. The CSS file is loaded into an editable area in the sidebar, and the main window is dynamically updated to instantly show the results of your changes and additions. This is a handy extension for CSS debugging and experimentation.
View Cookies
Adding a new tab in the “Page Info” dialog (accessible on any page via the right-click context menu), View Cookies displays all of the cookies and cookie values associated with a page. This is an obvious boon for tracking and debugging cookies during development.
There are many other incredibly useful web developer extensions out there, but not all are updated to work with the latest releases of Firefox at this point. I’ll update my list and do another post like this after Firefox 1.5 is released. If you know of other web developer extensions that are updated for Firefox 1.5, leave a comment here.
November 22nd, 2005 at 10:43 am (#)
I don’t use it personally but I know a lot of web developers use ColorZilla.
Other web dev extensions I personally use:
Inspect Element
SEOpen
Console2
IE Tab
November 22nd, 2005 at 10:49 am (#)
Oh, by the way, View cookies is awesome, it really ought to be integrated with Firefox core.
November 22nd, 2005 at 9:49 am (#)
Oh, by the way, View cookies is awesome, it really ought to be integrated with Firefox core.
November 22nd, 2005 at 11:28 am (#)
You missed out on the most excellent HTML Validator (based on Tidy). It’s unique in that it allows you to validate your pages completely offline and integrates superbly. It’s compatible with Firefox 1.5 Release Candidates.
Homepage:
http://users.skynet.be/mgueury/mozilla/
Mozilla Update page:
https://addons.mozilla.org/extensions/moreinfo.php?id=249
November 22nd, 2005 at 11:54 am (#)
This’d make a great devmo article.
November 22nd, 2005 at 1:00 pm (#)
Thanks for the note about View Source With! Very useful. Been searching for an external editor xpi for my bookmarks-home-page for some time.
November 22nd, 2005 at 12:00 pm (#)
Thanks for the note about View Source With! Very useful. Been searching for an external editor xpi for my bookmarks-home-page for some time.
November 22nd, 2005 at 1:35 pm (#)
I don’t understand the choice for EditCSS… The webdeveloper toolbar has this functionality built-in and there it actually works (very well)! Other than that, some great stuff (I use most of them already).
November 22nd, 2005 at 2:55 pm (#)
Rather than using EditCSS, I’ve been using: http://www.sitevista.com/cssvista/
It shows CSS changes on demand with both IE and FF
November 22nd, 2005 at 5:47 pm (#)
re: Bruce’s suggestion of the HTML Validator extension, if you’re using the Web Developer Toolbar, the convenient source window (with line highlight) resulting from error links from the javascript console is *horribly* mangled. The preferences for the validator extension are non-functional on OS X (1.5), so I can’t tell it to turn off validation of source windows (shouldn’t that be the friggin’ default?).
Not sure what’s conflicting, but you can imagine how fast I uninstalled the validator. The W3C validator via the toolbar is more than sufficient for my needs.
November 22nd, 2005 at 6:16 pm (#)
Sure would be nice if one of the most important extensions ever written could be updated to work with Firefox 1.5: venkman! There are hacks on the net for making it work, but that shouldn’t be necessary for anything as important as the javascript debugger.
November 23rd, 2005 at 3:09 am (#)
Seth, have a look here, you’ll be happy:
– http://getahead.ltd.uk/ajax/venkman
– http://developer.mozilla.org/webwatch/?p=105
November 23rd, 2005 at 3:13 am (#)
LiveHTTPHeaders is a very useful tool, that enables to display, resubmit and modify HTTP requests and headers. Version 0.11 has been updated for Firefox 1.5.
See http://livehttpheaders.mozdev.org/
November 23rd, 2005 at 2:13 am (#)
LiveHTTPHeaders is a very useful tool, that enables to display, resubmit and modify HTTP requests and headers. Version 0.11 has been updated for Firefox 1.5.
See http://livehttpheaders.mozdev.org/
November 23rd, 2005 at 10:52 am (#)
Christophe, in the message you were replying to, I said that I already knew about the hacks that are available to run Venkman. I have it installed on three of my machines already.
There are two problems with it, though: you can only run it once per session (if you close Venkman, you have to restart Firefox in order to open it again), and you shouldn’t have to install a hacked version of a core tool like venkman.
November 24th, 2005 at 4:59 am (#)
In my opinion the extension “View formatted source” is quite superior to “View rendered source”. Like the other, this extension displays the source after scripts execution, but it also re-formats the source, allows code folding and also displays in a tooltip CSS rules applied on the node
“View formatted source” extension is available here
November 24th, 2005 at 3:59 am (#)
In my opinion the extension “View formatted source” is quite superior to “View rendered source”. Like the other, this extension displays the source after scripts execution, but it also re-formats the source, allows code folding and also displays in a tooltip CSS rules applied on the node
“View formatted source” extension is available here
November 24th, 2005 at 5:24 am (#)
This extension is a step closer to being a development platform. There’s already editable CSS – It can only be another small step to make HTML editable too. We’re ready for a full IDE extension now!
November 28th, 2005 at 2:00 pm (#)
I’ve been collecting a list of Firefox Web developer extensions for sometime myself. Thanks for turning me on to a few I wasn’t aware of.
Visit: http://loadaveragezero.com/drx/extensions
November 28th, 2005 at 11:09 pm (#)
I use Launchy (http://gemal.dk/mozilla/launchy.html) instead of View Source With.
it works the same way, but allows me to view web pages in IE/opera/etc with the same ease.
November 28th, 2005 at 10:09 pm (#)
I use Launchy (http://gemal.dk/mozilla/launchy.html) instead of View Source With.
it works the same way, but allows me to view web pages in IE/opera/etc with the same ease.
February 13th, 2007 at 9:41 am (#)
[...] Font: Some great Web Developer extensions [...]
March 21st, 2009 at 6:41 am (#)
FirteFTP!!
This is one of the best!
As a developer I was struggle with all FTP software open extra window and jumping between all of them was a hassle.
Since I start using FireFTP my life become easy and speeding up my developing was a great thing to do!
Thanks
Amit