Firefox and Chrome
Mozilla Firefox and Google Chrome are both very attractive web browsers for technology specialists and web designers. This popularity is due to the browsers’ free and open source distribution, their unique features, and their extensibility.
It is the extensibility, in particular, that wins the browsers points for web designers. With the right extensions, web designers can turn their browsers into web development applications, affording them with a wide range of design and analysis tools.
Firefox Built-in Features
First, we will take a look at some of the built-in features that ship in each browser, and then preview some of the numerous extensions available for web development.
Mozilla Firefox
View Source
The primary built-in feature for Firefox is “View Source“. On any website, right click on the current page and select “view source” from the menu.A new window will open showing the complete HTML code of the site.
View Source includes syntax highlighting, word wrap, the ability to go directly to any line, searching, printing, and the ability to reload the page to pick up any changes.
With View Source, you can also view the source code of a particular selection. Simply select a portion of your website, right click, and click “View Selection Source”.
View Page Info
Right click on a web page and click “View Page Info” to see information about the current site. “Render Mode” information will tell you if the browser is able to load the page according to web standards. Other information like Encoding and Size are also useful for usability evaluation.
The “Media” tab will show you the address of every image or other media on the page and give you a preview of it. To view info about a specific image, right click on the image, and click “View Image Info“.
Extensions
DOM Inspector
DOM Inspector gives the user a thorough outline of the entire web page.It displays the source code in an expandable tree, and clicking on any source element provides more information, such as associated styles/classes. Selecting any one element will also highlight the actual area in the browser window.
View Source Chart
View Source Chart is a colorful way to view the DOM information of a page, and it is also a good way to learn how HTML works. Each element is color coded and provides a very visual experience for viewing DOM structure.
Web Developer
Web Developer is an add-on toolbar that provides a plethora of features for web designers. Features include design and analysis tools for CSS, forms, images, and more.
Firebug
Firebug is a web development suite of tools that includes an editor, debug tool, and monitor. With it, web designers can edit any web page directly in their browser.
Chrome Built-in Features
View Source
Like Firefox, Chrome includes a built-in “View Source” Feature. Two of the major differences are that that Chrome’s View Source opens in a new tab rather than a separate window, and it shows line numbers by default.
Inspect Element
Thanks to its Webkit engine, Chrome ships with a built-in DOM inspector. A Right click on a page or highlighted portion and click “Inspect Element”. Elements are displayed in tree form, complete with syntax highlighting. In the right column, the selected code’s style is displayed. Inspect Element also includes a scripts inspector.
Web Developer
A port of the Firefox extension of the same name, Google Chrome’s version of Web Developer provides most of the useful web development features found in its parent. Rather than install as a toolbar, the Chrome version maintains Chrome’s low profile by installing as a tool button. Clicking on the button expands a floating menu over the page.
Speed Tracer (by Google)
Speed Tracer is a sophisticated tool used to identify and fix performance issues. It provides both numbers and visual representations of data. Speed Tracer examines Javascript, layout, CSS, DOM event handling, network resource loading, timer fires, XMLHttpRequest callbacks, painting, and more. Data is collected in real time, as you are navigating through a site using a simple “record” button.
Lorem Ipsum Generator
Need to stick some dummy text into a site you are working on? Lorem Ipsum Generator makes it easy to insert random Latin text into your pages until you are ready to put in real content.
Pendule
Pendule is another web developer tool for Chrome which competes with Web Developer. Like Web Developer, Pendule provides tools for many aspects of a site, including CSS, Javascript, forms, images, and accessibility.
More Options
This is, by no means, a complete list of web design extensions for these browsers. The extension sites for both browsers list numerous others, many of which you may find helpful.
If you still cannot find the exact tool you need, you can also search for free online tools. Both Firefox and Chrome are available for free download, as are most of their extensions.