Tools

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.

Extensions

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 css Firefox and Google Chrome Extensions for Web Developers

Firebug

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 Firefox and Google Chrome Extensions for Web Developers

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.

Extensions

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.

 Firefox and Google Chrome Extensions for Web DevelopersLorem 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

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.

 Firefox and Google Chrome Extensions for Web Developers
Tavis J. Hampton is a librarian and writer with a decade of experience in information technology, web hosting, and Linux system administration. He currently writes for web server hosting company 34sp.com and LanternTorch.Net, which offers writing, editing, tech training, and information architecture services.
 Firefox and Google Chrome Extensions for Web Developers

Latest posts by Tavis J. Hampton (see all)

Comments are closed.

6 thoughts on “Firefox and Google Chrome Extensions for Web Developers

  1. Thanks for a list of more extensions. I figure Chrome will continue to pump out extensions, as the extensions are why I use Firefox some.

    Btw, people still use Explorer?

  2. Google Chrome is a wonderful web browser of choice for web designers and web developers. With Google Chrome extensions, you can add more features

  3. The most important feature released in Google Chrome 4 is the support for extensions. Chrome extensions are easier to create than Firefox extensions because they're nothing more than web pages that use Chrome's APIs

  4. i'm using both google chrome and firefox both with lots of extensions, both are great browsers and equally good for web developers and SEO'ers but google chrome is faster, clean, and good looking :)

  5. Google chrome and Mozilla Firefox is far way batter then internet explorer because these both Mozilla Firefox and Google chrome are offering wide range of extensions which makes the user comfortable and easy to work internet explorer is limited but these both have rich features to attract nay customer.

  6. View Source is the easiest way to see how a page is constructed. But a lot of people, though, especially those with no background in IT, tend to get intimidated when they see what shows up in View Source.