I don't spend a lot of time messing around with customizations, plugins and toolbars, but there is one plugin I don't think I could live without. It's the Web Developer Toolbar for Firefox.
To use it, all you have to do is, well, of course you have to install Firefox. But once you're up and running with that, just visit the plugin site and click "install." It takes just a few seconds. Then, go to View --> Toolbars and make sure the "web developer toolbar" is checked. When you do, you'll see something like this:
"But I'm not a web developer," you might say. "Why would I want to use this?"
Though a lot of the functionality on the toolbar is pretty much only useful to web developers, there are a few very cool things that even non web developers might find handy. And, if you're like me, and you're not really a web developer but more of a web development enthusiast, then you will really like this thing.
Here are a few of my favorite features:
- Disable styles: With one click you can turn off style sheets and see how the site looks with no styles employed.
- View CSS: With one click you can view all CSS associated with the page you are on.
- Resize window: You can resize the browser window you are using to see how the site will look in various screen widths.
- View source: You can quickly view the source markup for the page. OK, you can do this just by right-clicking on the page too so no big deal here, really.
- Display ruler: I really like this one. It lets you click and drag a box on the screen and then it gives you the dimensions of the box. So you can very quickly figure out how big an image or item on the site is.
- View color information: This displays a palette of all colors on the page with their hex numbers so you can quickly see what colors are being used on the site.
The Web Developer Toolbar for Firefox has a lot of other great features, too. I highly recommend checking it out.
Posted on
Fri, November 9, 2007
by Tim Wall