How to enable the Web developer toolbar in Firefox [Tip]

This post told you about the Firebug add-on for Firefox that includes a variety of developer tools. Web Developer is another great add-on for website developers. That’s an extension which adds a web development toolbar to Firefox.

This is the Web Developer page on the Mozilla add-ons website. Add the extension to Firefox from that page. Then you’ll find a new toolbar at the top of the browser as in the snapshot below. You can also select the add-on’s options from the Firefox context menu.

web developer

Click the CSS button on that toolbar for further CSS options. Click View CSS to check out the code as below. You can edit the CSS by selecting Edit CSS.

web developer2

Press the Miscellaneous button to edit HTML. Then click Edit HTML to open the HTML code for the page as below. Press the Syntax Highlighting button to add colors to the HTML.

web developer3

The Images button includes numerous image options. For example, you can remove pictures from a website page by selecting Disable Images. That’s a handy option for speeding up browsing. Click Display Image Dimensions to check out the picture dimensions as shown below. The Display Image Paths option shows you the URL for the image, which you can then copy and paste.

web developer4Press the Cookies button for further cookie options. Click Disable Cookies to remove cookies from a page. Select View Cookie Information option for further details.

web developer5

Web Developer also has validation options. Press Tools on the toolbar to open the menu with validation options on. There you can validate HTML in a website page by selecting Validate HTML. That will show you any invalid HTML on the page.

web developer7

To select further add-on settings, press the Options button on the toolbar. That will open the Web Developer Options window shown below. Press the Keyboard button on that window to open a list of add-on hotkeys.

web developer6

So Web Developer is another handy add-on for website developers. With its toolbar you can quickly access a multitude of development options. The add-on is also available for Opera and Google Chrome, and you can add it to them from the extension’s website.

Related Posts