This article covers some of the more helpful and useful web browser addons, bookmarklets and favelets available today to assist the web designer / web developer with their tasks.
Reload CSS Every..
“One annoying aspect of writing a stylesheet is having to reload the page in your browser to see your incremental changes. There are ways to workaround this, but I find them less than ideal so I created ReloadCSSEvery. It refreshes only the CSS of a loaded page every 2 seconds so you can use your CSS editor of choice and see semi-real-time changes in your browser when you save.”
…
“Every 2 seconds the script adds a unique query string to the href of any stylesheet link elements, causing them to reload the file. Note, the script only updates link elements and not “alternative” stylesheets, so pages with styleswitchers or @import-ed stylesheets may not be completly refreshed. “
Pearl Crescent Page Saver
“Pearl Crescent Page Saver is an extension for Mozilla Firefox that lets you capture images of web pages, including Flash content. These images can be saved in PNG or JPEG format. Using Page Saver, you can capture an entire page or just the visible portion. You can control the image capture process via a wide variety of settings, including the image file name and scale (e.g., save at 50% of original size).”
I can vouch for the stability and usefulness of this addon. I’ve been using it for almost a year now with no problems at all, and I couldn’t even tell you how many times I’ve captured screenshots with it.
Accessify Bookmarklet
In my opinion, this bookmarklet is a bit too strict with some of its accessibility checks and often times assigns high priority to what most webmasters wouldn’t really consider a problem at all. However, what it does do well is bring your attention to those things and despite my slight disagreement with its priority calculation, I do appreciate the fact that I was made aware.
Aside from this, the bookmarklet is extremely quick, the UI results window displayed on the webpage you have just checked is aesthetically pleasant, and the bookmarklet outlines the found problems on the website with visual borders and textual explanations.
“The Quick Page Accessibility Tester (oh for a more catchy name!) is bookmarklet/favelet that you can click on at any time which will give you a quick analysis of any web page. It highlights definite issues with your page, warns about possible issues and also highlights areas on the page that might benefit from some ARIA enhancements.”
Slayer Office Favelet Suite
“This is a favelet that combines most of my development favelets. When invoked, a div element will appear in the top left corner of your browser window with a list of all the favelets I’ve included. Simply click the link you want to invoke the favelet.”
Features include:
- Color list
- Document Tree Chart
- HTML Attribute Viewer
- HTTP Header Viewer
- Hidden Field Modifier
- Javascript Object Tree*
- Mouseover DOM Inspector
Among other features.
Web Developer Toolbar
This is my favorite of all browser addons / favelets I’ve ever come across that dealt with web development.
This addon is available for the following web browsers:
- Firefox 1.0-3.5*
- Flock
- SeaMonkey
There are literally too many features to list for this article as I could write an entire article about just this one toolbar, but I will say that everything you would expect and much more is to be found with this web browser addon.
Layout Grid
“This bookmarklet simply applies a layout grid image to the body of the page. I have also created a Layout Grid Overlay Bookmarklet which creates a div, positions it absolutely and then applies the background image to the div. Because the image is transparent, you get a nice overlay effect. By changing the position of the div to “fixed” you can also create a nice Layout Grid Fixed Overlay Bookmarklet which may be useful on occasion.”
