Search the site:
(New search engine!!)

Design tools in Firefox


To install the Web Developer extension do this:

  1. In Firefox click Tools > Extensions.
  2. Click Get More Extensions and you will be taken to the download page.
  3. Select "Developer tools" from the web menu.
  4. Download "Web Developer" (when this is written the current version is 0.8)
  5. Restart Firefox.

You will find this new tool bar:


Here are a few examples of what's hiding under those menus:

Disable:
With a single mouse click you can now disable things like JavaScript, referrer logging, and styles when you test a page. It can be very interesting to see how the page looks without the CSS!







CSS:
More useful options! Why not check other designers CSS and see if there is something to learn?



Forms:
Testing forms can be a difficult task, these options will make things easier.









Images:
Just being able to see all image dimensions on screen is worth a lot!











Information:
No more searching after cookies, and check out the ID and class option!!












Misc: All the typical things you have to clear while testing, stored in one place.










Outline:
Check table cells, blocks and elements in the live page!







Size:
Simple size options, like constantly displaying the window size.






Validation:
If this isn't cool, what is?!










Options:
Not very exiting...






If you don't think this is enough there are many other extensions for Firefox that you can download . Good examples are the "User Agent Switcher", HTML validation based on TIDY and "Linkification". There is also a very interesting JavaScript debugger! Read more about the debugger here.

- Michael Ahgren