The Web Developer Extension is a plugin extension for the Firefox browser. It’s a great tool for web designers or for anyone who owns and manages their own website. Here are some of the Web Developer’s features:
- It has a Cookie function which allows you to clear, delete or view a cookie. It’s great for troubleshooting authentication. You can also clear session cookies, delete domain cookies and delete domain paths.
- The CSS section allows you to edit CSS on the fly without uploading styles to the server. If there are multiple CSS regardless of type whether they be inline, print or embedded. You can enable or disable one type or several types or any other combination. You can also enable the CSS box model.
- The Forms section has a feature which allows you to manipulate form elements, remove maximum lengths, view passwords, enable form fields, auto complete, clear radio buttons, populate form fields, etc.
- The Images section allows you to disable images, display alt attributes, image dimensions, file sizes, image paths and find broken images. In addition you can also hide images, background images, make it full size, invisibile or replace images with Alt attributes.
- The Information section allows you to display abbreviations, access keys, anchors, block sizes, div orders, element information, id and class details, link details and a whole bunch more. You can also display table depth and table information, title attributes, topographic information and a lot more.
- The Outline section will display frames, headings, links, tables, block size elements, deprecated elements, positioned elements as well as outline current elements and custom elements. It can display element names when outlining.
- The Resize section allows you to display different window sizes, e.g. 800×600, 1024×768, 1280×1024 or any custom size you want. You can display windows size or windows size in the title. In addition, it also has a zoom in and a zoom out feature.
- The Tools section allows you to validate CSS, feed, HTML, links, section 108 and WAI. It has a DOM inspector, an error console and a Java console. It can display page validation, validate local HTML or CSS.
- View Source allows you to display HTML source code, view a frame or from a generated source.
- Finally, Options allows persist features.
If you are running Firefox, you can download the Web Developer extension from Firefox’s website. Double click on the downloaded item and the Firefox browser will automatically add the extension for you. A restart of your Firefox browser is necessary for the extension to work. You can validate the extension is working by clicking Tools – Add-Ons form your Firefox menu. Check the Web Developer Toolbar on your Firefox browser.
Playing With CSS
The added benefit of having Web Developer Tool is the ability to edit CSS on the fly. If you want to try a different font, different size, different color, background, borders, margins, padding, practically anything to do with CSS, you can make the changes in the Web Developer tool and see the changes instantly. There is no need to upload your new CSS code to the server every time you want to try something new. The Web Developer tool saves you time when playing around with CSS.