I have asked myself on numerous occasions the following question. "What would web developers do without the Firefox web developer add on?!" The question is really rhetorical unless you have not experienced the power of on screen CSS edits, turning off javascript in a click, the unbelievable Display Element Information function, the quick Validate HTML access and much, much more!

In this post I am going to list a few of my favorite web developer tool functions and the keyboard shortcuts to use them with speed.

• Display Element Information (ctrl/cmd+shift+F) - This tool is especially useful when troubleshooting design issues and trying to target specific HTML elements on a given page. Notice that the tool can be moved around the page and each section of the information being displayed can be callapsed/expanded. Need more specific style information per element? Try View Style Information (ctrl/cmd+shift+Y).
  
  I've used the Display Element Information tool many times to determine actual widths of elements verses the widths that I assume have been applied via CSS. It is not uncommon for content and other unexpected variables to cause elements to increase in width which in turn can break a page.
  
•  Edit CSS (ctrl/cmd+shift+E) - This tool speaks for itself... I almost cannot remember what I did before this tool's existence. I guess maybe at best I was working off of the server or locally and could save and view the results semi instantly. Just remember that if you click on a link or refresh the page you will lose your work.
•  Validate HTML (ctrl/cmd+shift+H), View Source (ctrl/cmd+shift+U), View CSS (ctrl/cmd+shift+C).

Check out the many other useful functions in the web developer add on... Download the Add On for Firefox.

Posted by Wes