Using design plugins

One can save his/her web developing time with this smart web tool. It's called Web developer extension and is a Mozilla browser plugin - free with an official homepage:

http://chrispederick.com/work/webdeveloper/

Download and install it. Then restart your browser and you'll see a nice toolbar in your browser.

Here are the features I am using when I do check my website projects:

1. Disable images - if you want to see how your site looks without images thus allowing you to make it more accessible.
2. Disable cookies - you can test your web site functionality with or without cookies.
3. Disable CSS - this enables you to look trough your webdsite design without CSS stylesheets - a nice fature for text browser users.
4. Form information - gives you exact information about the webforms that you are using. Don't confuse form names, ids and input element names and ids.
   Short example:
   I was having such strange problem: In my high traffic page I constantly received either empty user feedback forms or none at all. After some debugging here is what I've found:
   The problem was that I was using the same element id and element name in two of my forms(duplicate name fields in different forms).
   I solved this problem by using unique form names for example: feedback1_name, feedback2_name.
   A few months later second problem arrived: again the feedback has stopped - but this time I was using unique id and names.
   After using Web developer plugin and clicked on View Form Information I noticed that there were duplicate names but this time at the form name and input id.
   Here are the Screenshots of the Duplicate entries:
   
   
   
   After making them Unique everythig went back on:
   
   
   


5. Information - Display Typographic information - usefull when you want to check your fonts without the interfering colors. It's also good for aligning different page sections. For precise aligning you could use: Display Line Grids or Diplay Ruler. This way you'll know the exact elements measures like when using Photoshop ruler tool.


6. Resize your browser desktop without need to switch to different resolution.
   

Of course there are many other tricks in this plugin!