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

Useful Browser Add-ons and Extensions for Web Developers

By B Lingafelter    Updated      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. FireFTP - The FTP client for Mozilla Firefox.
  4. ColorZilla - Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.
  5. HTML5 Outliner - Displays the HTML5 document outline of the current published web page.
  6. Headings Map - for use in testing your document outlines, creates an HTML5 document outline in new left panel.
  7. Privacy Badger by EFF Technologists - Protects your privacy by blocking spying ads and invisible trackers.
  8. AdBlock Plus - Blocks banners, pop-ups, tracking, malware and more.

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.

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.

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.