There are an awful lot of pixels on a computer screen, and trying to get every single one to look just right is a core challenge of web design. One of the main reasons I choose to develop websites using Firefox, the world’s second-most popular web browser, is the extraordinarily handy plug-in called Firebug, which helps me to visualise my website project pixel-by-pixel. Using Firebug, I can tweak design parameters, font sizes and image locations without having to upload new files or even so much as refresh the page.
Firebug can be useful for non-developers too. Website owners and casual browsers can learn a lot about the web by using the ‘inspect’ tool, which highlights HTML elements on a page as you hover over them with your mouse. The highlighted element’s HTML code appears in the Firebug panel at the bottom of your browser window and, in this view, you can adjust the code and change the CSS styles with just a couple of clicks. Because this is all done in the browser itself, none of the website’s files need to be updated and your changes are not visible to anyone else – it is all accomplished in the safety of your own web browser. You can use this tool to experiment with layout, spacing, colours and more and see the changes instantly.
Another handy Firebug feature is the ability to get a blow-by-blow account of how your page loads and the components that make it what it is. In the ‘net’ view you can see, to the nearest millisecond, how long each of the images, scripts and other external files take to load into your page – it’s a great way of discovering the bottlenecks in your site; for example, finding which pictures take a long time to load or which files cause the server to respond slowly.
You can add Firebug to your Firefox browser for free, just follow this link.
Web Design © Copyright BeVivid Limited 2013
VAT Reg Number: 986356662. Registered in England, Number: 05020602. Registered Office: BeVivid Internet Consultants Limited, The Gateway, 11 Monkmoor Road, Shrewsbury, SY2 5AG.