Home > Tutorials and Resources > Useful Browser Add-ons and Extensions

Useful Browser Add-ons and Extensions for Web Developers

By B Lingafelter          tools

Here are the most useful browser add-ons and extensions available for web developers, organized by browser, for Firefox, Chrome, and Opera.

Essential Firefox Addons:

To install, first open this page in Firefox. The links in this list will take you to the page that contains the Install Now button for each extension. Firefox must be restarted before you can use a new addon; however you may install several before you restart Firefox. For tips on copying extension files to your flash drive, check Installation Tips below.

  1. Web Developer Toolbar - This popular extension from Chris Pederick, adds a menu and a toolbar with a variety of very useful web developer tools.
  2. HTML Validator - Adds HTML validation inside Firefox. The number of errors on an HTML page is seen on an icon in the status bar when browsing. Ater installing, choose the Serial option to use both the SGML parser and HTML Tidy.
    For Mac and other platforms, go to http://users.skynet.be/mgueury/mozilla/download_090.html to grab appropriate download file.
  3. HTML5 Outliner - Displays the HTML5 document outline of the current published web page.
  4. Headings Map - for use in testing your document outlines, creates an HTML5 document outline in new left panel.
  5. Firebug - Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. I also suggest CodeBurner for Firebug which extends Firebug with HTML and CSS reference information.
  6. FireFTP - The FTP client for Mozilla Firefox (works with version 32.0). NOTE: If you get “not compatible” message with Firefox version 31.0, grab previous version or update Firefox.
  7. Pencil - Enables you to do GUI prototyping and create simple color sketching of design layouts Note: While there are stand-alone versions for Windows, Mac, and Linux, the lighter weight Pencil Firefox Extension is recommended.
  8. Dummy Lipsum - Generate "Lorem Ipsum" dummy text (from http://www.lipsum.com).
  9. ColorZilla - Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.
  10. Rainbow Color Tools - Color tools for web development. Color picker and eyedropper, plus saving colors and trying out colors with drag and drop.
  11. Juicy Studio Accessibility Toolbar - Enables developers to examine WAI-ARIA live regions roles and properties, examine data tables, and determine if the colour contrast is sufficient.
  12. WAVE Toolbar - Provides an easy-to-use, yet powerful set of tools for evaluating the accessibility and usability of web content for people with disabilities. From http://wave.webaim.org/
  13. Better Privacy - Super-cookie safeguard (even deletes Flash cookies, which contribute to slowing down performance)

Firefox Installation Tips

You may grow so accustomed to some of these extensions that you'll miss your favorites in Butler labs and wish they were portable. Well, they are.

  1. To carry them with you, just right-click the Install Now button and save the .xpi file for each of your favorite extensions to a folder on your flash drive.
  2. To quickly install on another computer, open Firefox and choose Tools > Addons.
  3. Drag one or several selected .xpi files from your flash drive and drop them onto the Addons window.
  4. Usually, you are required to restart Firefox to complete the installation.
  5. That's it--piece of cake. This is the technique I use for lab computers locked with Deep Freeze.

Essential Chrome Extensions

To install, first open this page in Chrome. The links will take you to detailed description and Install button.

  1. Web Developer Toolbar - Now available for Chrome, this popular tool from Chris Pederick adds a menu and a toolbar with a variety of very useful web developer tools.
  2. HTML5 Outliner - Generates a navigable HTML5 page outline with heading and sectioning elements, but only for published documents.
  3. DevDocs - All-in-one API documentation browser with a fast, organized, and searchable interface. Supports many languages including HTML, CSS, and JavaScript.
  4. Adobe Edge Inspect - If you use Adobe's Edge Inspect CC, this extension allows you to connect multiple iOS & Android devices to your computer wirelessly. Synchronously browse, inspect & debug websites on your connected devices, and even take screen shots.
  5. Chroma - Pick a color, choose a shade. If you are in dire need of a superb color picker, you’ve found it! You know the RGB, but need the HEX? Know the HEX, but desperately need the RGBa? Chroma comes to the rescue.
  6. Gradient Creator - CSS3 gradient generator. Drag & Drop GIMP .GGR files into your browser to view them! Export your gradient into CSS or SVG.
  7. IcoMoon - Browse vector icons to download them or make a font/icon-font. You can import your own vectors too.

Essential Opera Extensions

To install, first open this page in Opera. The links will take you to detailed description and install button.

  1. Web Developer Toolbar - Now available for Opera, this popular tool from Chris Pederick adds a menu and a toolbar with a variety of very useful web developer tools.
  2. HTML5 Outliner - Generates a navigable HTML5 page outline with heading and sectioning elements. Works on both local and published documents.