Powered by GoodBarry

“Ninja Training for Web Designers”

Web Designer's Guide to Firefox Web Developer Add-on

by Larz 27-Mar-2008

We shall not fail or falter; we shall not weaken or tire...Give us the tools and we will finish the job.

- Sir Winston Churchill

Woah woah woah, what's with the quote...Anyway, Web Developer is a Firefox Add-on that helps you fix any webpage related problems, and test to see if the webpage is accessible; it's a must have for any web designers/developers. In this guide I've listed what Web Developer can do and how it can make you more powerful. By the end of this guide you will acquire x-ray vision like Superman, but in a very geeky way.

By the way, this guide is based on Web Developer 1.1.4, so if you're using a newer version of Web Developer Add-on, chances are that you're some kind of advanced robot from the future.

Lastly, What I think is or isn't a useful feature is my opinion as I can't speak for everyone.

What you need


Disable

Lets you disable stuff on a webpage.

Disable Cache By disabling cache you'll be viewing the latest version and not something that is cached in memory.
Disable Java This disables Java applets.
Disable Javascript By disabling Javascript you can see if the webpage still functions without Javascript. If pages can only be reached via Javascript then search engine spiders won't be able to get there.
Disable Meta Redirects Stops webpage from using meta reload or meta redirection.
Disable Minimum Font Size Disables minimum font size, so you can make fonts smaller than minimum font size.
Disable Page Colors Imagine a world without colors, and then imagine a webpage in that world.
Disable Popup Blocker Disables popup blocker.
Disable Proxy Disables proxy.
Disable Referrers Gives you additional privacy by not telling the current website which website you came from, when you're following links from site to site.

Cookies

Useful when you're programming a website with cookies, otherwise move along, nothing to see here. (I'm going to skip this one.)

CSS

This is the most important item if you're a web designer/frontend developer.

Disable Styles Lets you disable any CSS styles.
Display CSS By Media Type Lets you see what your website looks like on a handheld device or a printed page.
View CSS Lets you view all the CSS files that's linked to that page.
View Style Information Lets you select individual elements on a page and shows you its style properties and its 'location' at the top.
Add User Style Sheet Lets you add your own style sheet on your hard drive and apply it to the page, so you can try things out without stuffing anything up. Very ninja indeed.
Edit CSS Lets you edit the CSS of the page and see the changes in real time (Note: this does not affect the CSS files on the actual web server :p). This way you can play with the styles until you turn into some kind of zombie. If you like the changes and would like to keep them you can save the CSS by clicking the Save icon and if you want to load your own CSS click on the...yup that's right, the Open icon. Too easy.
Use Border Box Model Don't worry about this one, this is IE5/IE6 related and they're becoming more irrelevant day by day. (Death to IE6.)

Forms

Lets you do all kinds of sexy things with forms.

Display Form Details Lets you see the Form elements and its attributes.
Show Passwords Shows what you're typing while you type your password. I highly recommend you install a rear-view mirror once this feature is activated.
View Form Information This is kind of like "Display Form Details" except it's much easier to read as the attribute values are in table cells.
Convert Form Methods Don't need to know this one unless you're programming.
Convert Select Elements To Text Inputs Don't need to know this one unless you're programming.
Enable Auto Completion So you don't have to enter your login details every time you go to the site.
Enable Form Fields Enables form fields that aren't enabled in the first place.
Clear Radio Buttons Clears radio button, not sure why you want to do that, but yeah.
Make Form Fields Writable Makes form fields writable if they're unwritable in the first place.
Populate Form Fields This is useful if you're testing a form and you're sick and tired of completing 432480392 form fields. If you actually need the form to be sent to you, you can change the default email address in Options menu -> Miscellaneous.
Remove Maximum Lengths Removes maximum lengths from form fields so you can write essays in each field.

Images

Lets you do all kinds of sexy things with images.

Disable Images Lets you disable all images, external site images or image animations.
Display Alt Attributes Shows you the alt attribute value of all images on the webpage. Use alt attributes wisely; if it's loaded with keywords it will be treated as spam and may hurt your search engine ranking. Read more about alt attributes here.
Display Image Dimensions Shows you the dimension of all images on the webpage.
Display Image File Sizes Shows you the file size of all images on the webpage.
Display Image Paths Shows you the URL of all images on the webpage.
Find Broken Images Shows you all the images that are broken.
Outline Images Outlines all, or certain images.
View Image Information Lets you view all of the images plus their dimensions, file sizes and alt attribute values; this is a sneaky way to learn how other designers use images to construct their webpages.
Hide Background Images Lets you hide background images because you never know what's behind those background images.
Hide Images This is like "Disable Images" but faster.
Make Images Full Size Makes images full size if a different size is defined by width and height attributes. Won't work for images with width and height defined in CSS.
Make Images Invisible This is like "Hide Images" which is like "Disable Images". Are you as confused as me?
Replace Images With Alt Attributes This shows you what your webpage looks like to people with browsers that can't/won't display images.

Information

This is like the CIA of webpages, it shows you all the hidden informations of webpage elements.

Display Abbreviations Displays <abbr> and <acronym> and their title attribute values.
Display Access Keys Displays Access Keys. Read more about Access Keys here.
Display Anchors Displays any Id's on the webpage.
Display Block Size Displays dimensions of any divs and forms on the webpage.
Display Div Order Displays the order of any divs on the webpage.
Display Element Information (Mac Command+Shift+F, Windows Ctrl+Shift+F) Displays element information such as attributes, position, dimension, style properties, ancestors and children, once the element is selected. This makes the element very nekkid and makes it very useful for CSS shenanigans.
Display Id & Class Details Labels any Id's and classes on the webpage.
Display Link Details Displays any href attributes on the webpage.
Display Object Information Identifies any objects on the webpage.
Display Stack Levels Displays z-index values of positioned elements.
Display Tab Index Displays tab index of form fields.
Display Table Depth Labels the levels of nested tables (e.g. Depth = 4, means that the table has 3 nested tables.)
Display Table Information Displays summary attributes of table elements.
Display Title Attributes Displays title attributes of any elements.
Display Topographic Information Shows you the element boxes and where they're at on the layers of stacks.
View Anchor Information Displays a list of Id's in alphabetical order, each Id links back to it's place on the webpage.
View Color Information Displays a list of colors used in the CSS; you can use it to keep track of the colors used or reuse a certain color because you can't remember the hex decimal code for 1208930988 colors.
View Document Outline Displays the hierarchy of headings, also shows whether HTML headings have been used (for SEO). This feature unleashes your inner information architect.
View Document Size Displays list of files associated with the document; sizes of its images, objects, scripts, style sheets and the total size of the document. Very useful for webpage optimization.
View Javascript Displays all the javascript used on the webpage.
View Link Information Displays a list of link URLs on the webpage.
View Meta Tag Information Displays meta tag information in a table which makes them easier to read as opposed to try to read them in the source. This is the Keyword bandits favorite tool ;)
View Page Information

Shows you all kinds of technical information on the webpage such as:

  • Render Mode
  • Cache Mode
  • Encoding
  • Date modified
  • Referring URL (the webpage that lead you to the current webpage)

You can also access this feature via the green tick icon near the end of the toolbar.

View Response Headers Displays some kind of super advanced language which translates to the date, size and type of file that the server is sending back to the client and also data about the server itself. Do you need to know all this? Most probably not.

Miscellaneous

This is like a group of elite ninjas that doesn't belong in any group because they're too elite, they're so elite that they've decided call their group Miscellaneous to water down the eliteness.

Clear Private Data Clears all kinds of private data such as cache, history and HTTP authentication. My friend told me this is porn addicts' favorite feature.
Display Line Guides Lets you add and drag line guides around to help you build grids that helps you line things up and design better, but really, you should've designed with grids in the first place :p
Display Page Magnifier Lets you look at parts of your webpage at microscopic levels.
Display Ruler Lets you measure whatever's on the webpage and it's also great for CSS positioning *wink*.
Show Comments Displays any comments on the webpage. This is great if you like to find secret messages on webpages.
Show Hidden Elements Exposes all style="display: none" elements and displays them on the webpage, but style="visibility: hidden" elements remain hidden; this some how implies that they are the true ninjas but it's questionable.
Show Window Chrome displays the toolbars, address bar, etc if they're not being displayed in windows.
Edit HTML Lets you test and tweak by editing the html of the webpage without actually touching the webpage. Changes can be seen in real time. To say this feature is useful is an understatement.
Linearize Page Displays the order of content based on its order in the soure code i.e. the order that search engines read in. Some people think this can be used for SEO; personally I think if you have The Best Content Ever the order it's in isn't really that important.
Make Frames Resizable Makes the frames resizable in case you want to resize the frames.
Small Screen Rendering Shows you what the webpage approximately looks like on a mobile device.
Visited Links Lets you turn visited links on or off. This is good if you want to test the styles of visited links or reset all links to unvisited.

Outline

This menu contains items that let you outline certain HTML elements, this is like being able to see other people's bones and stuff so you can see straight away which bone is fractured or something.

Outlines Frames Identifies any frames or iframes on the webpage.
Outline Headings Outlines any headings on the webpage (h1-h6, each with a different color).
Outline Links Outlines any links that are external, with ping attributes or without title attributes on the webpage.
Outline Tables Outlines tables, table captions or table cells on the webpage. Useful when you're trying to solve table layout issues.
Outline Block Elements Outlines block elements such as div, p, blockquote, heading (h1-h6), table, form, ul, ol, pre etc. Useful when you're trying to solve CSS layout issues.
Outline Deprecated Elements Outlines deprecated elements such as font, center, s, u, strike, etc. Useful when you're trying to annihilate deprecated elements.
Outline Positioned Elements

Outlines elements that are:

  • absolute positioned
  • fixed
  • floated
  • relative positioned

Useful when you're trying to solve CSS positioning issues.

Outline Current Element Lets you select the element you want to outline. This is useful when combined with other outline functions plus an HTML trail appears when you hover over an element.
Outline Custom Elements Lets you outline any element picked by you, because that's how you roll. Did I mention you also get to choose your favorite outline color, very fancy.
Show Element Names When Outlining Displays names of outlined elements. If only this can be turned on by default...

Resize

Lets you resize the browser window to see what the webpage looks like in various screen sizes and make good design decisions.

Display Window Size Displays the dimension of the window and viewport (viewport is what you see minus the window, toolbars, etc).
Display Window Size In Title Displays window dimension and viewport dimension on the title bar.
Resize Window Resizes the browser to a desired size.
Edit Resize Dimensions Save your preferred window dimension so you can use the same setting over and over again.
Zoom Lets you zoom the page in and out, but it's a bit buggy, and makes me go poopy.

Tools

Bunch of validation tools, extremely useful for designers who love building standards compliant and accessible websites. From the W3C:

Validation is a process of checking your documents against a formal Standard, such as those published by the World Wide Web Consortium (W3C) for HTML and XML-derived Web document types, or by the WapForum for WML, etc. It serves a similar purpose to spell checking and proofreading for grammar and syntax, but is much more precise and reliable than any of those processes because it is dealing with precisely-specified machine languages, not with nebulously-defined human natural language.

Validate CSS Validates the CSS using the W3C CSS Validator.
Validate Feed Validates RSS feed using the W3C Feed Validation Service.
Validate HTML Validates HTML using the W3C Markup Validation Service.
Validate Links Checks to see if there are any broken links using the W3C Link Checker.
Validate Section 508 (Section 508 is a legal requirement) Checks to see if the website is Section 508 compliant using HiSoftware Cynthia Says.
Validate WAI (WAI is a guideline)

Checks to see if the website is WAI compliant using HiSoftware Cynthia Says.

View Speed Report Shows you how fast the webpage loads using websiteoptimization.com.
Edit Tools Lets you add your own web-based tools to the tools menu.
Dom Inspector

Lets you inspect the DOM (document object model). Great for

  • Learning the structure of a HTML document.
  • Seeing how particular elements on a webpage are nested.
  • Deleting any elements to see what effect it has on the webpage.
Error Console Reports Javascript-related errors/warnings, css errors etc.
Java Console If you don't know what a Java is, you probably don't need touch this.
Display Page Validation Automatically validates the webpage without going to W3C. When this is turned on, an extra toolbar shows up which displays HTML, CSS and Accessibility validation results.
Validate Local Accessiblity Validates local webpages.
Validate Local CSS Validates local CSS files.
Validate Local HTML Validates local HTML files.

View Source

View Source Displays the html source code in a new window.
View Frame Source Not many people use frames these days but yeah, this feature is quite awesome because trying to view source out of frames is an extremely painful if you don't know where to look.
View Generated Source Lets you view the source code with extra HTML that are dynamically generated by Javascript i.e. live changes to the webpage.
Edit View Source With Applications Lets you add applications that you'd like to view/edit the source with.

Options

Where options reside.

Persist Features Use this if you want, for example, your outlined elements to remain outlined even after clicking through different webpages.
Reset Page Resets the webpage, for example, clears all the outlines you applied.
Options

Lets you change:

  • general settings
  • colors and fonts settings
  • dashboard settings
  • keyboard shortcuts
  • miscellaneous settings
  • resize settings
  • tools settings
  • validation settings
  • view source settings
Help Takes you to the Chris Pederick Web Developer webpage. You should check out the forums if you're having problems.
About About this awesome Firefox add-on.

Okay, this is the end of the guide, I hope this will make you more powerful and help you make more dough. Please email me at larz@designersuccess.com if you find any errors, cheers.

Back to Top