Firefox and Google Chrome Extensions for Web Developers

  • 7.2K
Firefox and Google Chrome Extensions for Web Developers

The browser wars are heating up again. While Internet Explorer once held a near monopoly in the web browser market, other browsers like Mozilla Firefox and Google Chrome are slowly chipping away at Microsoft’s empire.

One of the prominent features of these two alternative browsers is extensibility. Rather than being limited to the features that ship with the browsers, users can easily install extensions that add limitless functionality and enhancements. Furthermore, extensions are easy to create, and many users will create extensions and then share them freely with the world.

Web developers spend most of their time working on the web, and both Firefox and Chrome offer a wide range of extensions to help make web development and website evaluation easier. I have compiled a brief list of some of the outstanding Firefox and Chrome extensions for web developers, as well as some of the helpful built-in features of the browsers.

Mozilla Firefox

Built-in Features

View Source

This is the easiest and most basic way to see how a site is constructed. Simply right click on any page and click “View Source”, and the source code for the page will appear in a new window. It will then display the HTML code for the site. For dynamic sites, this is a good way to make sure the final code is appearing as you intended it to when you wrote your web application.

To view only part of the source code, highlight the portion of a page you want to view, right click, and click “View Selection Source”.

View Page Info

This feature is a great way to find out important information about a site. For example, “Render Mode” will tell you whether Firefox was able to render the site according to web standards or “quirks” rendering. “Media” gives you information about each media item (images, video, etc.) on the page.


DOM Inspector

DOM Inspector provides a complete outline of a website, highlighting each portion of code and the part of the page that the code represents in the browser. It uses an expanable tree to show you each part, which is helpful in determining the hierarchy of code. It also provides information about tags, such as any CSS classes or IDs associated with them.

View Source Chart

A more colorful way to view DOM page information, View Source Chart displays each element in color-coded graphics, providing a visual experience for viewing DOM structure. This is also a good way to see how HTML works, as it displays tags within their proper hierarchy.

Web Developer

Web Developer is like the Swiss army knife of development extensions. It is a toolbar with all sorts of development goodies for testing, analysis, viewing of particular elements, and a whole list of CSS, HTML, forms, images, and other tools.

Web developer toolbar: disable CSS


This is a web development suite that includes an editor, debug tool, and monitor. You can use it to edit any page directly within your web browser.

Firebug Load Time

Google Chrome

Built-in Features

View Source

The view source feature for Chrome is essentially the same as the one for Firefox. One major difference is that Chrome opens the source code in a new tab instead of a new window, and another key difference is that it displays line numbers for the entire document.

Inspect Element

The Webkit engine, which powers Apple Safari, Google Chrome, and some other browsers, ships with a built-in website inspector. To use it, right click on any page and click “Inspect element”. Like DOM Inspector for Firefox, it will display a tree of HTML tags. Click any tag to expand its tree and see nested tags. If you highlight one, it will display other helpful information about the tag, such as classes and IDs.


Web Developer

Web Developer for Chrome is a port of the same extension for Firefox with most of the same features. Instead of using a toolbar, however, it maintains Chrome’s low profile by using a tool button. When you click the button, it opens a hovering bar over the page.

Speed Tracer (by Google)

Speed Tracer records analysis information about a website in real time, helping you identify portions of a site that need tweaking to increase performance. It displays data in both numerical format and in charts and graphs. The extension analyzes Javascript, CSS, layout, DOM event handling, timer fires, network resource loading, painting, XMLHttpRequest callbacks, and more.

generatorLorem Ipsum Generator

Filler text is a good way to fill out a site with text, even if you have not yet created real content. Lorem Ipsum text refers to random Latin words strung together into paragraphs to create filler text for websites. This simple extension automatically generates the filler text.


Pendule is an alternative to the web developer extension that provides tools for many aspects of a site, including CSS, Javascript, forms, images, and accessibility.

Other Options

There are many other extensions for both browsers, such as HTML and CSS validators, that can help make your web development and troubleshooting efficient and productive. For more extensions, you can search the extension database for both browsers. The browsers, and most of their extensions, are free.

Tavis J. Hampton

Tavis J. Hampton

Tavis J. Hampton is a librarian and writer with a decade of experience in information technology, web hosting, and Linux ... [Read full bio]