MegaZone (zonereyrie) wrote,

  • Mood:
  • Music:

KBlogger: Firefox Extensions

Well, after last week's huge entry I decided to do something a bit lighter this week. I've talked about how much I love Firefox and one the reasons is the ability to install extensions to add more features to the browser. This is the list of extensions I currently have installed:

I'm not going to talk about all of these. I'll cover those I find useful as a web developer, the others are more just general usability. You can always check them out on your own, live a little.

First up I'll cover Listzilla, mainly because it is the useful version that created the list of extensions above. Well, actually, it created this version, I edited it a bit to use in this entry. I find it very useful, especially if you ever need to reinstall - you have a list to work from.

I mentioned HTML Validator (based on Tidy) in a past entry. Since I'm lazy, I'm just going to reuse what I wrote then. This embeds the Tidy engine right into the browser and it will validate every page you load. Down in the lower right-hand corner a green check means the page is valid, a yellow '!' means there are warnings, and a red 'X' means there are errors. I find this visual cue extremely useful as I'm developing pages. I should ALWAYS see a green check, if I'm doing things right, so the second I see something else I know I've goofed. Hover over the icon and you'll get a tooltip that gives a little more information, and it updates View Source to to have multiple panes which show the warnings and errors. You can even use Tidy to clean up the errors for you, right in the browser.

FirefoxView and IE View are simple, but useful. FirefoxView adds a new item to the right-click menu in IE - View This Page in Firefox. IE View installs the similar View This Page in IE item to the right-click menu Firefox, as well as Always View This Page in IE to the Tools menu. These are very useful when testing pages during development, if you're doing your main work in Firefox (you are, right?), you can easily open the page to check it in IE.

Image Zoom is a simple tool, and what it does should be obvious. You can zoom images in and out within a page. I like to turn on the option to right-click and use the scroll wheel to zoom in and out, very handy to check details, or maybe just see how things would look with a resized image.

While we're talking about images, another useful tool is ColorZilla. I mainly use the 'eyedropper' mode. This allows you to place the eyedropper over anything in the page - image, text, etc - and it will display the color of that item and allow you to copy it. This is nice for matching the color of text, or other items, to an image in the page. It also has another useful feature - you can zoom the entire page from 20% to 1000%. Useful for checking alignments, etc, and it also makes it easier to pick colors from small items. It also has color palettes and is useful as a general color tool.

LiveHTTPHeaders does what the name says. When you activate this extension a window opens which will show the headers for every request from and response to your browser. I find this very useful for debugging server and network issues.

View Cookies is pretty obvious, it adds a 'Cookies' tab to Page Info from the Tools menu. This will show you all of the cookies for the current page.

Tweak Network Settings can speed Firefox up a bit, and when you spend the day loading and reloading pages, a little bit can help. I just use the built in 'Power' profile, it increases the the maximum simultaneous connections and enables pipelining.

Venkman is the JavaScript Debugger that was part of Mozilla Suite, now available as an extension to Firefox. This is a full-featured debugger for JavaScript, and if you develop any client side JavaScript, you want this extension. It is especially useful for complex JavaScript applications.

Checky adds a sub-menu to both the Tools and right-click menus. From this sub-menu you can access a plethora of validation services, for HTML/XHTML, CSS, RDF/RSS, WAI/508, Links, Viewer, Search Engine optimization, and more. It is an entire developers toolbox in one extension, a Swiss army knife of validators, helpful tips, etc.

Web Developer is an extension targeting, take a wild guess - right, web developers. Now this is a swiss army knife! I use this constantly! It adds a new tool bar to Firefox with a slew of features. You can disable many features of the browser to test the page with different options on or off. There are options to play with CSS (including editing the CSS on the fly), forms, images, and more. There are validation tools, including the two I use the most - Validate Local CSS and Validate Local HTML. They do uploads to the W3C validators, very useful when working on pages that aren't on an Internet facing server. Another useful tool is Resize - this will resize your browser to the set pixel sizes. I've set three sizes in mine - 800x600, 1024x768, and 1280x1024. This allows me to check pages in the various popular resolutions with a simple click. Very nice. Another great tool, Outline, really needs a visual. This link shows a default web page. This link shows the same page with Outline Block Level Elements on. There is also a View Source button right on the tool bar, which makes it quick and easy. Combined with the above mentioned HTML Validator and the additions it makes to the View Source screen, it is doubly useful. If you only install one of these extensions, this is the one! I could probably make an entire entry about all of the features it has... maybe I will at some point.

I'll throw a couple of quick ones in here. ChromEdit provides an easy way to edit some of the built in files for Firefox. I mainly use it for one thing. After I install it I go to the Edit User Files option it adds to the Tools menu, and then to the userContent.css tab. I make two changes to the file - uncommenting two of the values:

 * example: turn off "blink" element blinking
 blink { text-decoration: none ! important; }

 * example: turn off "marquee" element
 marquee { -moz-binding: none; }

That kills blink and marquee elements on any page I view. Ah, that feels good. And, finally, Preferential adds Advanced Preferences to the Tools menu. It is a little bit like using about:config in the location field (go ahead, try that), but more structured. Basically it exposes all of the settings in Firefox, not just the ones with GUI controls in the default menus. This gives you a lot of control over the browser.

The above links are two the home pages of the extensions, which is where you'll find the latest versions. However, by default Firefox has a restriction on the sites it allows you to install extensions from, which is a good thing. So you'd have to allow each of these sites to install these extensions. There is another option, the official extensions site has nearly all of these extensions, and it is already in the permitted list. However, you may find that the official site may lag behind the project pages in having the latest versions. But if you're more comfortable with not trusting all those sites, this is the safer option. At this time there are 544 extensions for Firefox listed at the official site, so you may find some others useful to your situation. Most extensions are very simple, with a single purpose, others, like Web Developer, are extension with many features.

Huh, didn't I say this was going to be a 'lighter' entry? This turned out to be a bit longer than I thought it would, and I still feel like I should say more about these useful extensions. Maybe in the future, and maybe I'll talk about why I like the others which are more about general use than developing. If you have any questions about these, or you want to promote your favorite Firefox extension, just leave a comment.

I hope everyone enjoys the weekend. See you next week.

Tags: firefox, geek, kblogger, software, web
  • Post a new comment


    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded