Awesome Things That Firefox’s Web Developer Extension Can Do

Apr 16 2008 by Jacob Gube | 21 Comments

photo provided by Benny Mazur (Bennimoto) of flickr - Windows and Firefox

Chris Pederick’s Web Developer extension for the Mozilla Firefox browser is one of the best tools in a web developer’s arsenal.

About a couple of months ago, I wrote an article about it entitled "9 Practical Ways to Enhance your Web Development Using the Firefox Web Developer Extension" and I’d like to follow up on that by showcasing even more things you can do with the Firefox Web Developer extension.

1. Determine server information of a website.

Ever wondered what your favorite website uses for their server technology? If so, you can quickly view the website’s HTTP response headers by using "Information > View Response Headers".

The following example shows Digg’s response headers:

We can see in the above example that Digg uses an Apache server and PHP 5. Additionally (at least for the page I tested) they served compressed files (gzip).

Heading over to Microsoft’s homepage, we can see that they – in turn – use an IIS 7.0 server and the ASP.NET framework:

Firefox Web Developer Extension - Information > View Response Header

2. Use a "magnifying glass" to zoom into parts of a web page.

You can use the "Miscellaneous> Display Page Magnifier" option to get a window that allows you to zoom in and out of the desired areas of a web page.

Tip: As a shortcut, you can use the scroll button of your mouse to increase or decrease the level of magnification.

Here’s a sample from People’s magazine using the Page Magnifier tool.

Firefox Web Developer Extension Micellaneous > Page Magnifier option

3. View a website’s color palette.

If you’ve ever wanted to see a visual representation of all the colors used by a website (not including images) You can use the "Information > View Color Information" option of the Firefox Web Developer extension, which will open a new tab displaying Color Information.

Here’s Mozilla.org’s color scheme:

Firefox Web Developer Extension - "Information > Color Information" option

4. Preview the "Print" and "Mobile" version of a website.

Some websites choose to include a print version or mobile version for their content by providing an alternate stylesheet like so: <link rel="stylesheet" type="text/css" href="myprint.css" media="print" />.

If you’d like to preview how a website will look when printed or when viewed using a mobile device, use the "CSS > Display CSS by Media Type > Print" or "CSS > Display CSS by Media Type > Handheld" option of the Firefox Web Developer toolbar.

The example below shows A List Apart’s normal stylesheet and print stylesheet.

Normal stylesheet:

Firefox Web Developer Extension option - "CSS > Display CSS by Media Type > Print"

Print stylesheet:

Print stylesheet of A List Apart

The print stylesheet takes out the logo and the primary navigation.

5. See the dimensions of all images.

You can see all image dimensions on a web page by using Firefox Web Developer extension’s "Images > Display Image Dimensions" option. You can see this option in action below (using GameSpot’s home page).

Gamespot's home page with Firefox's Web Developer Extension Images > View Image Dimension option turned on.

From the above picture, we can what the dimensions of the images in pixel units (we can also see that they’re using a 1×1 px spacer, interesting).

6. See the sizes of block elements.

A quick way to debug layout issues pertaining to spacing is to use the "Information > Display Block Size" option of the Web Developer extension to see if something is adding unintended padding and margins to your block elements. Block elements include div‘s and forms as well as elements with the display:block attribute.

Here’s an example of the option turned on for Yahoo!’s home page.

Firefox Web Developer tool - Display Block Size option turned on for Yahoo's home page

7. See if your page degrades nicely without CSS and do a simple accessibility test.

A key design feature that a website must have so that it can be viewed by the most amount of people is that it must look decent and readable with CSS turned off.

You can turn off all styles by using the "CSS > Disable Styles > All Styles" option. This also allows you (somewhat – and shouldn’t be a replacement to real accessibility testing) to see if your website is accessible via assistive technologies (you can see how the document flows and if you’re displaying important information).

For a very crude and quick accessibility test, you should also turn off all images and replace it with their alt tags by using the Images > Replace Images With Alt Attribute option.

Here’s the normal StumbleUpon home page.

StumbleUpon's Homepage before CSS is turned off

Here it is without any styles:

StumbleUpon after CSS is turned off

You can see that the logo is an image replacement so that screen readers can still use the logo as a "home" link and read the name of the site.

We can also see that the mark-up complies with current web standards, putting the primary navigation in a list, and the page title "Welcome to StumbleUpon" enclosed in a header <h#> tag.

8. Quickly find CSS errors on a page.

The Web Developer extension indicates if a page has CSS errors in the rightmost part of the toolbar as shown below.

CSS errors - button.

By clicking on the button, the Error Console pops-up, listing all the errors of the page. If there aren’t any errors, you’ll see a Firefox Web Developer Extension showing no page errors button instead of a Firefox Web Developer extension showing a page without any errors button.

9. Never forget to put alt and title attributes in your images and links ever again.

I like adding lots of images in my articles because it breaks the monotony of my long-winded writing style. This does, however, lead to me forgetting (or neglecting) alt and title attributes quite often.

A quick method I use to double-check my work is by using the Images > Display Image Attributes option and the Information > Display Title Attributes option.

Here’s a screenshot from flickr that showcases the Display Image Attributes option.

Shows the Firefox Web Developer extension - Display Image Attributes option turned on on flickr's homepage

And there they are, some more of my favorite Firefox Web Developer options. If you’ve never used it, try it out by downloading it from Mozilla’s Web Developer Firefox Add-ons page.

What are your favorite options? Let us know via the comment section on this page.

21 Comments

Richard

April 17th, 2008

Has to be the ability to edit CSS + HTML on the fly – so useful for testing.

I use this with Notepad++ (with the FTP addon) to emulate a WYSIWYG editor for those tricky CSS moments – works perfectly!

Prepopulating forms is useful when testing forms, and the show passwords option is a lifesaver when using sites that you haven’t for ages.

Abhijeet from Jeet Blog

April 17th, 2008

Amazing find Jacob! Certainly an extension worth trying out. Especially the last point where it allows to check alt and title attributes for images, is very useful.

Danny Sanchez

April 17th, 2008

My personal favorite feature is the Information>Display Element Information tool. This lets you mouse over block level elements, highlight them in red and click on them to get the class names and inheriting styles. Extremely handy.

deborahgsmith

April 19th, 2008

Been using this extension since its beginning and my favorite is the css and html editor.
Did anyone else support Chris? I hope so. His time spent creating this extension saves us all time. Go buy him a hot lunch, a cold one or a book from amazon here: http://chrispederick.com/donate/

Jason

April 20th, 2008

I find the Web Developer extension to be extremely handy; I tend to use the Display Element Information and the Resize tool when testing with websites. Particularly helpful when you want to develop Greasemonkey scripts.

Web Design Bristol

April 23rd, 2008

I find that this add on is amazing for helping me pick out problems that I have. The links to the validation really help as well some of them are impossible to find without this add on.
I do like using it along side Firebug, as firebug is fast and accessible. With great interactivity to help edit HTML and CSS on screen through the browser to save uploading files all the time.

If they could develop this to be able to help with IE fixes it would be amazing.

Scampf

June 2nd, 2008

I love this program. It’s amazing.

mjamesd

June 8th, 2008

Shift+Control+A to validate local HTML is extremely handy.

Permana Jayanta

December 14th, 2008

CTRL+SHIFT+Y

Help me to understand how people layout their website. So I can learn a lot.

Aaron

December 14th, 2008

I use the ruler tool (miscellaneous >> display ruler) to figure out how big to make the images for a particular webpage. Thanks Chris!

Jeremy

January 12th, 2009

HS, Aaron! That ruler is awesome! I’ve never noticed it before. And thanks Chris for reminding me to look deeper into this tool. I use a couple of these features, but have forgotten to get better acquainted with it.

yulius

February 14th, 2009

i will bookmark this. thanks for info :)

pc donanım

May 2nd, 2009

CTRL+SHIFT+Y ? thx for information…

chipz

June 18th, 2009

CTRL+SHIFT+Y and you just point an element of the page, the web developer will show you a lot..

:)

now im finding of firefox offline validator for css and html..anybody have recommendation?

Jeff

June 23rd, 2009

it s a good information ! it couldn’t be better!!
never forget to install firefox web developer

Andy Towler

July 9th, 2009

Thanks for this – there are a few things here that I hadn’t realised WDE could do :)

Jody

September 9th, 2009

Nothing delights me so much as clear,concise tutorials. I am preparing a post on this FF add-on for my resources-for-beginners site, and this article and its predecessor will provide the basis for my content.

I feel like I’ve done a really good job for my readers when I can find and provide a link to a tutorial this good.

Craig

September 27th, 2010

Another nice list of Firefox Web developer tips to use, Thanks!

ovgadget

March 15th, 2011

Although very late, but I still felt lucky to find your web very useful for me to know a few things related to web. Thank you so much!

Kimberly Vanwright

July 24th, 2011

I am not capable of view this website properly on firefox I feel theres a problem

Fizal

October 14th, 2011

is there any good ones that can edit local html pages ‘inbrowser’
??

Leave a Comment

Subscribe to the comments on this article.