Tools of the Trade – Firebug for Firefox

By gareth - Last updated: Thursday, November 26, 2009 - Save & Share - Leave a Comment

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 Add-on for Firefox

Firebug Add-on for Firefox

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.

For the more advanced user, Firebug also sports a Javascript console and an efficient debugger with breakpoints, etc, for easy debugging of your Javascript code, and a tab listing the DOM properties for your page for easy reference.

You can add Firebug to your Firefox browser for free, just follow this link.

DeliciousFacebookDiggRSS FeedStumbleUponTwitter

Write a comment


Web Design © Copyright BeVivid Limited 2014

VAT Reg Number: 986356662. Registered in England, Number: 05020602. Registered Office: BeVivid Internet Consultants Limited, The Gateway, 11 Monkmoor Road, Shrewsbury, SY2 5AG.

home   about   design   web   marketing   contact   sitemap   news & events   site credits & useful resources   Internet Web Design News   Spanish property   Shrewsbury Shopping


BeVivid also offer web design services in the following areas:
Web Design Shropshire | Web Design Warwick | Web Design Bridgnorth | Web Design Clun | UK Coverage


Powered by Wordpress