9 Practical Ways to Enhance your Web Development Using the Firefox Web Developer Extension
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.
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:
And here’s the modified version:
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).
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.
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:
What it will look like on a Small Screen Rendering device…
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.
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.
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?).
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…
Using the Topographic Information option renders the page to this:
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.
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.
42 Comments
Mohsin
February 6th, 2008
Nice info there Jacob. And thanks for the link. :)
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
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! :)
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.
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.
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!
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!
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.
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?
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).
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
lava
lovecss
juliend2
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 !
Leave a Comment