Firefox is the best web browser available, there’s no doubt about it. Even though it’s been beaten in the performance category by Chrome, it still has its great stability, security, and most importantly, a very large database of add-ons (some of which actually provide most of said security) and themes.

The Web Developer Toolbar is hands-down the most functional (and best by definition) add-on for Firefox that web developers and designers can find. And it’s completely free.

But most of the people using it are just scratching the surface of its full capabilities. I used it for 2 whole years and I was amazed when I finally discovered some of its most advanced features, neatly hidden under the big drop down menu or add-on settings window.

Chances are, you too still don’t know the true power of this fully armed and operational add-on, so here are some of the features you might’ve missed.

Display Line Guides (Located under Miscellaneous). This is a great feature that allows you to quickly check the alignment of any elements on a web page. It’s very useful and allows you to use as many vertical and horizontal lines as you want. No more opening a web page in your editor (like Dreamweaver). Just do it directly in the browser!

View Image Information (under Images). Of course, the Images menu has a lot of great information about all the pictures on a web page, but if you want a very quick overview of all the images on a page, there’s no other better feature than “View Image Information”. It opens a new tab listing all of the pictures on the page, together with other useful information like file size and format, server path and dimensions.

View Color Information (under Information). A web designer needs to look at color information a lot of times. It’s part of the work process, after all. This is the reason there are hundreds, if not thousands of tools specifically for this purpose (Colorzilla being one of the best and also a Firefox add-on). But there’s no need to use a third party utility or even add-on when you have the Web Developer add-on. Using the View Color Information feature, you can easily view a list of all CSS colors and samples in a new tab.

Display Element Information (under Information). There is another, better way to see the code of any element on the page, besides selecting it and clicking “View Selection Source”. It’s the Ctrl+Shift+F keys combination. Use it, and then click on any element on the page to view all the information available about it and even see its ancestors, which can be useful if you want to recreate a more unique copy of it.

View Page Information (under Information). This feature gives you a great way to view a lot of information about a page in a new, separate tab. You can see everything from general page information to detailed information about all the forms, widgets and images on the page (including size, path, dimensions, POST type, etc.).

Show Passwords (under Forms). Under the Forms menu, there is a nifty little tool that shows you any passwords hidden under the “*” symbols, which are stored in Firefox’s password manager. While it is pretty useful when you forgot a password and want to find it out, it’s a bit unsettling, as you can’t stop thinking that someone may use a similar trick to get your passwords and usernames for themselves, effectively compromising your security.

Populate Form Fields (under Forms). This is a very useful feature when testing the forms on a website. Instead of manually thinking up something and filling the fields, you can let the Web Developer Toolbar do it for you, with random information. You can also test the form’s mail sending capability by using your own email under the Options menu.

Small Screen Rendering (under Miscellaneous). This is a great feature that helps you see how your web page will show up on a mobile device like the iPhone or an Android phone (which usually have a higher resolution). It can help you design your page with those users in mind and place a “mobile version” link where they can easily see it or create an actual design specifically for mobile devices.

Mark All Links Unvisited (under Miscellaneous -> Visited Links). Yet another useful feature, the “Mark All Links Unvisited” is great when you need to see how the links look on a site when they haven’t yet been clicked, which would be impossible under normal circumstances without deleting the entire browser’s history. It can also be useful when you want to take a screenshot of a site and don’t want it to have links of different colors (that would also tell the viewers exactly which ones you actually visited).

View Speed Report (under Tools). This is a great feature that tells you how fast will a page load at certain speeds (fiber, dial-up, ADSL and others) and give you recommendations on how to improve that speed (nothing out of the ordinary, just your usual reduce HTML and image size, use compression, etc.).

Edit HTML (under Miscellaneous). This is a neat feature that lets you edit HTML the same way you can edit CSS in the Web Developer add-on. It’s great for testing quick fixes and viewing what would happen with different code, in real time, without having to open a third party tool.

There’s a lot more hidden under the hood of this wonderful Firefox add-on, and you and I really need to explore every single option and menu – I’m sure there’s something more I’ve missed (especially due to developers adding new features with every release .