9 Practical Ways to Enhance your Web Development Using the Firefox Web Developer Extension

Feb 4 2008 by Jacob Gube | 43 Comments

Whether you’re a front-end graphics designer or a back-end web programmer, if you’ve worked long enough in the field of creating web-based solutions, you’ve no doubt heard about an extension for the Mozilla Firefox web browser called (simply enough) the Web Developer extension. If you have no clue what I’m talking about, here’s a brief overview from Webs Tips to get you familiarized with this wonderful tool.

A screenshot of the Mozilla Firefox Web Developer tool

This article lists some practical, everyday uses of the Web Developer extension to help improve your web-building methods. I’ve tried to stay away from the more common and basic uses of the Web Developer extension like troubleshooting layout issues with the Information > Display Div Order option because I feel these have been discussed quite enough in other places. New users, don’t run away quite yet, I think this guide will help you get a rapid jump start into applying this tool into your daily development routine.

So without further ado, here’s nine highly pragmatic uses of the Web Developer extension for Firefox.

1) Change XHTML on-the-fly without changing your web files.

Unfortunately for many developers, we don’t all have the luxury of testing servers and sandbox environments. I for one, confess to developing on live websites even during peak web traffic times.

If you’d like to lessen customer support requests due to an inadvertent display:none; property assignment on the log-in box — use the Web Developer extension to effortlessly check your XHTML modifications before you commit them to the server.

Here’s an (extreme) example of how I was able to change a few of reddit’s XHTML markup.

The original front page:

Screenshot of reddit's front page before editting XHTML markup.

And here’s the modified version:

Screenshots of reddit's front page after changing some XHTML markup.

As you can see in the above picture, I changed the top three stories (to something else I’d much read about) and modified the background color to pink (I have an odd affection towards hot pink for some reason).

You can achieve the same results by using the Miscellaneous > Edit HTML Markup option which will open up the Edit HTML tab panel displaying the XHTML of the web page. Unfortunately, the window isn’t color-coded and the Search HTML function doesn’t quite work properly (yet).

A screenshot of the Edit HTML Panel, Displayed on the left of the page.

Tip: You can change the position of the Edit HTML panel by clicking on the Position icon (right next to the Edit HTML tab on the above screenshot).

To change the CSS styles of the page, use the CSS > Edit CSS option, which will allow you to edit the styles used on the web page.

2) Measure things quickly with the Ruler Tool.

Raise your hand if you’ve ever print-screen’ed, and then copy-&-paste’d the screenshot onto Photoshop just to determine dimensions of certain page objects (like the width of an image) with the selection tool. *Raises hand in shame*

With the Ruler Tool (enable it via Miscellaneous > Display Ruler Tool), you can speedily size-up objects inside the web browser. It’s a great tool in conjunction with outline options such as Information > Display Div Order option or Information > Display Block Size option, allowing you to detect the amount of padding and margin between elements.

Screenshot of the Mozilla Firefox Web Developer extension Ruler Tool.

3) See how web pages look on a non-traditional web browser.

Nowadays, tons of people have mobile devices that lets them view web pages in non-traditional ways. Determine whether your pages render correctly (or close enough) on portable device screens by using the Miscellaneous > Small Screen Rendering option. This saves you from going out and purchasing a Blackberry or a Trio with an internet dataplan just for cross-browser checking.

How the Gamespot website looks on normal browsers:

A screenshot of Gamespot.com viewed through Mozilla Firefox web browser.

What it will look like on a Small Screen Rendering device…

A screenshot of Gamespot.com rendered in a Small Screen Rendering Device as simulated by Mozilla Firefox Web Developer extension.

4) Find out how optimized your page is.

Use the Tools > View Speed Report option to automatically send your page to WebSiteOptimization.com, a site that provides a plethora of information about your web page load times like how quickly your page loads and how many HTTP connections are being used among a ton of other things.

There are built-in tools in Adobe Dreamweaver and Flash (if you even have access to them) that simulates download speeds, but nothing beats a free, comprehensive and actual live speed report.

Screenshot of the result of Six Revision's front page speed report from Web Optimizer

5) Populate web form fields instantly.

Don’t you hate it when you have to fill in your custom-built web form for the nth time because you’re testing it? You can quit tabbing and entering junk information on your form fields and switch to using the Form > Populate Form Fields option in the Web Developer extension.

In the example below, you can see that it populates most web forms somewhat intelligently – It was able to guess the email field — but missed the phone number field.

Screenshot of eBay's registration form automatically filled about using the Forms - Populate Form Fields option of Mozilla Firefox Web Developer extension.

6) Find all the CSS styles that affect an element.

For most fairly-proficient CSS developers, it’s quite easy to find the exact selectors that style an element’s properties – fyi: #selector { property: value; }. This is especially true when you’re the original author and/or the styles are contained in one stylesheet.

But what if you were working on someone else’s project… and the project in question has 1,000+ lines of pure CSS goodness, split into several external stylesheets (because Bob a.k.a. “Mr. Modularity” likes to keep things “simple“)? Another scenario you might encounter is being tasked to theme a content management system like Drupal or WordPress and you’re not quite sure where all the external stylesheets are.

For example, the Yahoo! home page has over 2,400 lines of CSS, spread over several external stylesheets and inline styles (Bob, you built this page didn’t you?).

Screenshot of Yahoo! front page with CSS - View Style Information of Mozilla Firefox Web Developer extension being used.

If you’re tasked with revising this page, you have two choices: (1) look through, understand, and hunt down the styles you need or (2) decide that you’re smarter (and lazier) than that and so you use the CSS > View Style Information option of the Web Developer extension. With this option enabled, clicking on a page element opens up the Style Information panel which displays all the styles that affect the element.

7) View JavaScript and CSS source code in a jiffy.

One of the ways I troubleshoot rendering issues is by looking at how other web pages do it. JavaScript and CSS are often divided into several files — who wants to look through all of them?

Using the Information > View JavaScript and the CSS > View CSS options instantly displays all the JavaScript and CSS in a new browser tab. This has the side benefit of being able to aggregate all the CSS styles or JavaScript in one web page allowing you to use the Find tool of the Mozilla Firefox browser (keyboard shortcut: ctrl + f for PC users).

8) See how web pages are layered.

It’s often very helpful to determine which page div’s and objects are on a higher plane. Using the Information > View Topographic information gives you a visual representation of the depths of the page elements — darker shades are lower than lighter shades of gray.

Original web design…

Screenshot of before using View Topography Information.

Using the Topographic Information option renders the page to this:

Screenshot of a webpage with Information - View Topographic Information enabled.

9) See if your web page looks OK in different screen sizes.

I use a monitor size between 19 – 22 inches (wide screen). This can be problematic because many of our visitors use smaller monitors. Short of switching to a smaller LCD screen to simulate the user experience, I just use the Resize > Resize window option. It helps test whether my fluid layout works well in smaller windows (sometimes you forget to set min-widths for div elements and it jacks up the layout in smaller screen sizes), or if your fixed-width layout displays important content without user’s having to scroll.

Be sure to enable the Resize > Display Window Size in Title option to help you determine the exact dimensions, and also for documentation purposes when you’re taking screenshots of your webpages.

Screen shot of drupal.org with the width of the page set to 800 pixels.

So there we are, nine ways you can employ the Mozilla Firefox Web Developer extension to better your web development experience. I don’t claim to be an expert, but I certainly know enough about the Web Developer extension to improve my web-building speed.

Do you have other tips and strategies on how to further utilize the Web Developer extension? What are the ways you use Web Developer extension in your job? Share them here.

Related links:

43 Comments

Mohsin

February 6th, 2008

Nice info there Jacob. And thanks for the link. :)

Jacob Gube

February 14th, 2008

Igamuska,

The lack of a comprehensive guide/tutorial on the Web Developer tool was the primary reason I wrote this article. I’m working on a “quick start” tutorial that’s more comprehensive and is geared towards new users. I understand that the guide I wrote here is targeted towards people who’ve used and installed the Web Developer extension already.

In the meantime, here’s a couple of worthwhile web pages to read:

Evaluating Website Accessibility Using Firefox Web Developer Extension:
http://www.ariadne.ac.uk/issue44/lauke/
- Shows you how to use the Web Developer extension to determine whether your site is accessible for users using assistive technologies (i.e. screen readers). Developing pages that are screen-reader friendly also has a similar benefit of making your web pages more accessible via non-traditional browsers (such as mobile devices).

Using the Web Developer Toolbar for Firefox to Decipher Your Moodle Theme CSS
http://newschoollearning.com/blog/using-the-web-developer-toolbar-for-firefox-to-decipher-your-moodle-theme-css/
- Short guide on how to use the Web Developer extension to understand the CSS of Moodle (an open source e-learning suite). Although it’s for Moodle, the concepts illustrated in the guide are applicable to any project that’s similar in nature, like working with Content Management Systems (CMS) or blogging platforms like Drupal, WordPress, Joomla!, etc.

Just a plug for my RSS feed and my email notification: if you’re interested in similar stories like this, I highly recommend subscribing to my RSS feed or email notification (top right of the page). It’ll let you know whenever I post new stories and it’ll give you a snippet of what the story’s about.

Thanks for the kind comments! :)

Jacob Gube

February 14th, 2008

Nebz,

I use firebug too — and one of my co-workers uses it extensively to debug his web app, and we both love it. I just chose to write about the Web Developer tool because it’s less documented t(I guess) than Firebug.

And these are just 9 ways you can use the Web Developer tool. I skipped the more common uses like validating your XHTML, Section 508 compliance, and WAI, turning off images so that you can easily copy/paste web page text content to a Word document, figure out Div Order, Block Size, clear sessions/cache short-cut keys (which is so key when you’re developing session-based apps, saves time/hassle), and tons, tons more.

igmuska

February 14th, 2008

Great info, Jacob!

I have just started using the tool, learning its functionality by trial-and-error.

Are there any tutorials on furthering my knowledge and increasing my use of it anywhere?

Jacob Gube

February 14th, 2008

Josh C,
I know that feeling! I work closely with several web developers / web designers who all use this extension to a certain extent, and there’s just so many things you can do with it that you get turned off exploring it… so you just rely on your co-workers to say “hey, did you know you can use the Web Developer extension to do so-and-so”.

The other (free) tools I use regularly are Notepad++ and Firebug, if anyone’s wondering.

And to credit just some of the co-workers/friends that inspired this article:
Tyler – for encouraging me to try out the Web Developer extension a year or two ago.
Nathan – for the random Web Developer extension tips.
Rob – for the Ruler tool suggestion.

Nebz

February 14th, 2008

The only things i find usefull in Web Developer Extension is the shortcut to clear cache… for other things i use Firebug…

TN

February 14th, 2008

I LOVE this plugin. If you’re a web developer and you don’t have it, then get it now. It’s one of the most valuable plugins I’ve ever come across, and one of the most valuable free apps I use.

Thanks for the tips. Always something to learn about it.

Ched

February 14th, 2008

Thanks for the list. I’ve had Web Developer for years now, but there’s so many different things to turn on/off, it can be a little overwhelming to take full advantage of its features.

Evan Meagher

February 14th, 2008

Great article. I didn’t know about the small screen rendering or ruler options. Thanks!

Jacob Gube

February 14th, 2008

Davida F,

About the Topographic tool: the z-index concept applies to it, yes, but to be technical the z-index CSS property only works on positioned elements (or objects, whatever your preferred term is). Let’s think of a web page as a 3 dimensional object… elements on your monitor screen that are farther from you appear darker than the elements closer to you.

So in the following hypothetical example:

<div id=”1”>

    <div id=”2”>

        <img src=”3” />

    </div>

</div>

From farthest away to you to closest (i.e. using the Topographic Information tool – darkest to lighest), div (id=1) is the farthest, div (id=2) is in the middle, and the img tag (src=3) is the closest to you.

It’s simply a way to visualize your web page as if it was a stack of papers (and the individual pieces of paper are the elements on your web page).

As for it’s practical use: say you have a nested div, and you’re wondering which other div’s are affecting the style of that particular nested div (in other words: what div’s are giving the nested div inherited properties), then this would be a quick visual tool to see which divs they may be.

Hope that clarifies it rather than making it even more confusing! :) If you want to chat more about this, feel free to hit me up using the Contact page and we can IM (I use Gtalk).

Josh c

February 14th, 2008

Hey, thank you for this great list. I have been playing around with this tool and everytime I try something new, I think ‘damn, that’s useful.’

Great free tool!

jive

February 14th, 2008

Nice tutorial. I use this extension a lot but still haven’t gotten around to using every little feature.

David

February 14th, 2008

This + Firebug = Webdeveloper heaven

Nataly Short

February 14th, 2008

Very good list.
The java-script-browser was not mentioned here, but it is a very good fire-fox tool that can help to examine the code very quickly !

Davida F

February 14th, 2008

Hi Jacob,

Thanks for the article…I use web developer toolbar on a daily basis, but didn’t know about many of these. Slapped my forehead in v8 style when I read about the ruler function! But I have to admit I’m not understanding the usefulness of the View Topographic information tool? Is it a z-index thing?

spidro

February 14th, 2008

very nice tutorial
web developer+firebug+colorzilla are the most important and useful Firefox addon for any web developer

Prescott Tutor

February 14th, 2008

Excellent story about some of the powerful features of one of the greatest Firefox extensions out there for developers. Thanks.

Marah Marie

February 14th, 2008

I was just asking someone this week how to use Web Dev for what it’s actually intended for, not the nineteen other things I do with it, so the timing of this tutorial is a marvel for me…just when I needed it. Definitely bookmarking it. Thank you.

o2xlc

February 15th, 2008

I have been using this extension for a long time. It’s amazing. I cannot imagine webdevelopment without it.

There is some useful things not mencioned in the article: xhtml&css validation and list of colors used in the page.

Rob @ CSSnewbie

February 15th, 2008

This is a fantastic resource! Thanks for posting it. I use the Web Developer Toolbar daily in my web work, but there are several things here I didn’t know I could do. Kudos on a great review!

Matt Northam

February 15th, 2008

Good stuff.. I also only really use a few common things of the toolbar so it’s nice to see what I’ve been missing out on (specifically, the small-screen rendering that I had no idea existed!)..

Ta!

Jacob Gube

February 15th, 2008

Hey all,

I decided to compile some of the tips there were shared on Digg

importantname

One thing I *always* use in the Web Developer plug-in is Forms –> Enable Auto Completion. I only access my financial accounts from my home computer, but most of them have Auto Complete disabled, e.g.

. By enabling Auto Complete with this plug-in, I don’t have to keep entering my username and pw info every time I go to the site.

lava

My favorite one is View Source > View Generated Source. I use that to see what javascript generated. For example, tumblr lets you embed your posts via javascript, but I wanted to stylize what it put out. I couldn’t find any documentation on that from tumblr, so I checked the generated source and I got the class names from that.

lovecss

‘Disable’, ‘Outline -> Current Element’, ‘Resize’, ‘Miscellaneous -> Ruler’ and the ‘Validate’ options are among my personal favourites.

juliend2

Another thing that speeds up the coding: it’s the ‘ReloadEvery’ plug-in for firefox. I set it to reload every second on my right screen and I code in Dreamweaver on my left screen. As soon as I hit CTRL+S I just look at the right screen to see if it’s OK. No ALT+TAB to switch the window and CTRL+R to reload. A big time saver

Brian Rock

February 16th, 2008

I love the toolbar, too. I usually leave it turned off (I like having a clean toolbar), but I access it often through the right-click menu.

I also love the Outlining features for when I’m working on new CSS layouts. Don’t need to waste time adding background colors to elements to see where they are… just outline all block level elements, outline the current element, and float the mouse around.

The color info is nice too. Makes it easier to figure out what color I’ve used, or if I want to use a color I found on another website for something.

Phil From Loreauville

February 18th, 2008

THANKS!
Like many here I have been using the Web Developer Extension, but never realized it’s full potential. I had the few tools I was used to and pretty much stuck with them.
And, I confess, I had been using Firebug for many, many things. I guess I sorta forgot about Web Developer.
But, like I said, thanks for the reminder on how useful Web Developer can be,

Christian Watson

February 22nd, 2008

Nice roundup. I wrote something similar a while back – 10 Things You May Not Know About the Web Developer Toolbar.

Between us I think we have most of the bases covered!

Acronyms

March 1st, 2008

It’s also very good with:

1. enabling form fields
2. viewing passwords

However for the element info I prefer to use Firebug

philfreelanceweb

March 3rd, 2008

Great post! i usually used the web developer tool for my designs and tweaking my websites. I also consider the Image and Information menu which is also found usable specially for tweaking such div elements

Jacob Share

March 5th, 2008

Great article. I’d been using another plugin for the Ruler, never noticed that, and I just uninstalled it.

Peter

March 10th, 2008

I also like to disable the CSS to make sure the site degrades nicely.

L.Avila

March 10th, 2008

Very true article. thanks for this. You got my bookmark!

Edwin

April 8th, 2008

Thank you! I allready had this toolbar for a while, but never dived deep into it. I now learned some new interesting stuff and I know there is a lot more in this toolbar. Really a great invention :)

Danhbaweb20.com

July 10th, 2008

Thanks you. It’s very useful to me !

Ven

September 14th, 2008

Badass ext

Ahtesham

September 25th, 2008

plz can any one mail me how can i outline div (only div not all block element) like there is one feature in IE Developer Tool Bar . if there is any way plz send me email at ahtes_ham@yahoo.com

Pedro Rogério

November 4th, 2008

Hi guy,

Very nice good job. Thanks.

Pursaklar

November 25th, 2008

thanks for the tips

ngkong

December 20th, 2008

thanks for the knowledge. i’ve installed web dev for long time. but hv no time to figure out all the features. i used to use javascript debugger, view css and view javascript function.

#2 i’m using JR Screen Ruler for this. (freeware: http://www.spadixbd.com/freetools/jruler.htm)

Tatiane

April 20th, 2009

I’ve been using Web Developer extension for some time now, yet I didn’t take the time to check out all its features. Great article!

Jaspal

November 5th, 2009

Gr8 work … i use firebug very much … but i guess WDT has its own benefits .. Firebag + WDT can make development time considerably short

shiham

October 29th, 2010

thanks man… this is great :)

PBL

November 25th, 2010

Lots of tools doing web page inspection, but none of them let you save changes.

rafael

July 11th, 2011

hi, nice tut, can you tell me how can I make my edit css pane be placed at the left part, when I click edit css, the editor pops up from the bottom and I want it to be on the left.
Thanks. cause thats what im used too

Leave a Comment

Subscribe to the comments on this article.