Firefox is probably one of the most used browsers on the net nowadays and the extensions they continue to add on to it will continue to make it so. The plug-ins that continues to come out for it is extremely useful in that you can choose which you want and which you don’t. One I find extremely useful is WOT as this tells me a sites reputation prior to my entering it. Thanks Firefox.
One of the Tools that they have added to their arsenal is that of the web developer’s extension.
This tool was developed by Chris Pederick and he is to be congratulated on what he has thought of in the lines of help for the developer. It’s a very useful tool for all even the total amateur and in actual fact teaches you a whole lot about how a website is put together. It’s something I would recommend to anyone who has interest in web design of any description. It is what I would call the spies tool of websites. You can see how it is put together what kind of coding they use. What servers they use and the kinds of code languages are used. You can see how they space and size items and elements. In fact if you spend some time just scrolling through it on various web sites you will find out so much more than you ever realized.
Find the Headers and servers
Determine what type of server a site uses. This is simple to do when you type into the add on the terms “Information > View Response Headers”.
You can also magnify areas on a page to see items more closely by using the display page magnifier. You can also just scroll over sections you want increased and the mouse will enlarge them automatically.
If you are want to check what the actual colors are that are used on a particular website you can use the view color tool and it will give you all the colors listed together with the code number for that colors. Very useful when you like the look of a color combination on a page and want to use something similar in your design.
There is also a section where you can use your mobile to view how people will see a on phone section.
You can see the dimension of your or others photos and whether they are using spacers or not. In addition you can see the sizes of the blocks of elements that they use by using “Information > Display Block Size”
What about CSS?
Try turning off the styles. “CSS > Disable Styles > All Styles” I know my computer seems to do this every now and again for Yahoo and it goes all out of zinc. It makes a huge difference as it shows to the world on the net.
Errors on Page
If there are errors on a page you can find out by using the error console. If there are none you will get the tick if they are there if they is a red !
Your photos if you are using WordPress will use a default alt attribute unless you actually name them. This tool reminds you that you need to do it on any items that haven’t got them yet.