FireFox Add-on – Web Developer Toolbar

The Web Developer Toolbar is the reason I started using FireFox. A couple years ago, I was just getting started with cascading stylesheets (CSS) and web standards, then Matt Heerema showed me this tool. I was hooked.

Web Developer Toolbar inserts an additional toolbar in Firefox. One of the cool things it lets you do is change the CSS your browser uses to display a page. To do this, select the CSS menu in the toolbar, and select edit. You can then change any of the styles on the page. This is much easier than changing the stylesheet on your web server and reloading the page.

I use this feature almost daily when working on web pages. Once I get something working in my browser, I’m able to copy the CSS, and paste it into the real stylesheet on the server. Not until this step will other people see the changes you’re making.

It allows you to do other things as well, such as disable javascript, disable images, and disable stylesheets. By taking these three steps, you are able to get an idea of what GoogleBot will see when it accesses your page.

Another thing it will do is outline certain elements on the page. For example, you can have it outline tables, or depreciated html tags, or a host of other elements. This can be invaluable when helping others troubleshoot issues on their web pages.

The last feature I’ll mention is the tools menu, where you can do things like verify that your CSS is valid, that the HTML is valid, and that your page passes Section 508 validation. You can also get a speed report for your web page.

I’ve just scratched the surface of what the toolbar can do for you. If you work on web pages, either as a developer or designer, I think you’ll find the Web Developer Toolbar has many useful options for you.

Advertisements

2 comments so far

  1. Stephen Judd on

    Another great one is Firebug…a must have if you’re doing any javascript work

  2. Brian Webster on

    Agreed. Firebug is an add-on I need to learn more about, especially being we are started to do more in javascript.


Comments are closed.

%d bloggers like this: