The Firefox Web Developer Toolbar is one of the most useful tools you can have for web design. This is a short introduction that will show you some ways that you can use it when making web sites. To use the toolbar you have to be using the free Mozilla Firefox Browser. After you have the Firefox browser, you can download the Firefox extension called the Web Developer Toolbar.
Web Developer Toolbar Overview
After you install the Web Developer Toolbar, you have to close all your Firefox browser windows and restart Firefox. You will then see the Web Developer Toolbar under the Firefox navigation buttons. The toolbar is the part that says "Disable", "Cookies", "CSS", "Forms", "Images", and so on. This page was written using the Web Developer Toolbar version 1.0.2, but it should be similar even if you are using a different version. In the screenshots I am using Firefox 1.5 with the Brushed Theme, which is why my Firefox might look different from yours. The functionality is the same though.
Using the Web Developer Toolbar
After you install the Web Developer Toolbar you will see the menu items across the top of the browser, from left to right:
- This menu contains my favorite feature of the Web Developer Toolbar: Edit CSS. When you activate this feature, you can edit the CSS of a web page in a sidebar in real time and see your changes updated on the web page as you type them. For example, maybe you want to see what your site would look like with a different color and font. In the image below, I am quickly checking what this page would look like with a green header background, just by editing the CSS in the sidebar. As soon as the sidebar is closed, the changes are discarded.
Another useful feature in the CSS menu is Disable Styles which allows you to remove all the CSS from a web page.
- A useful item on this menu is the Form Information option. It will tell you information about the forms on a web page. You can also use the Populate Form Fields option to automatically fill out your forms when testing your site. Other options on the Forms menu include: display form details, show passwords, view form information, convert form methods (e.g., from GETs to POSTs or vice versa), Convert Selected Elements to Text Inputs, Enable Auto Completion, Enable Form Fields, Clear Radio Buttons, Make Form Fields Writable, Populate Form Fields, and Remove Maximum Lengths.
- You can use these options to display the dimensions and file sizes of images on a web page. You can hide the images on a page, or show the image paths. You can outline images without alt attributes, making it a quick way to find where you might have missed something.
- The information menu has a lot of options on it. You can find out more information about the structure of your page with Display Id & Class Details, and Display Element Information. Those are both useful because they visually display the CSS class and ID names on a web page, which then makes it easier to use the Edit CSS option to experiment with the look of the page. An image of the Display Id & Class Details is shown below. You can also use the Information menu to check how many layers of nested tables a page has with the Display Table Depth feature. You can view the palette of a web page by choosing View Color Information. If you want to know how large the files on a page are, choose View Document Size. Another useful tool is View Response Headers.
- Some useful items on the Miscellaneous menu are Small Screen Rendering which can give you an idea of how your site might display on a portable device like a PDA or cell phone. You can also overlay line guides on a page, or display a ruler in order to get pixel-perfect measurements of the layout. You can even edit the HTML in the sidebar and watch the web page update itself in real time.
- These options will outline elements of a web page, allowing you to find certain things that you might be looking for. Examples of things that you can outline are frames, headings, table cells, tables, block level elements, external links, and even custom elements. These are very useful for figuring out why a page doesn't display correctly.
- See what your web page looks like at different resolutions such as 800x600, or choose a custom size. You can also zoom in or out on a web page.
- View Source
- This gives you another way to view the source of a page, although it is faster to just use the keyboard shortcut Ctrl-u. The real power of this menu is activated after you go to the options menu. You can set Firefox to view source in an external editor, including setting a custom keyboard shortcut. For example, you could keep the normal shortcut to view source with Ctrl-u, and add another shortcut to view source in SciTE (or another favorite text editor) with Ctrl-Shift-u.
- This menu item allows you to customize the Web Developer Toolbar.
Once you have downloaded the Web Developer Toolbar you will consider it an essential part of your web design toolkit. If you make web sites, I highly recommend downloading the toolbar and experimenting with it.