If you are a web developer and you haven't heard of Firebug you need to get it now! It is a free Firefox addon that lets you traverse the contents of any web page, view the CSS, view the javascript, debug your scripts and edit them live. Basically, everything you could want from a development tool. And the best part is that it's free!
All you need to do to use it is download it/install it (if you are not using Firefox you can download the Lite version (installation instructions are on that page too) which will allow you to use a version of the tool in any other browsers), restart your browser (Firefox users), then either hit F12 or right-click on the element you want to inspect and click 'Inspect Element'.
You will see that a window has appeared at the bottom of your browser with a load of code (hopefully) and the element you inspected should be highlight. From this view you can see and CSS applied to that element (in the right hand pane) as well as any CSS properties it has inherited styles from. You can also make changes to the CSS here (live on the page) by clicking any of the properties or values and updating them. This is one of the greatest features of Firebug, although it is not limited to this. If, for example, you are having some slight issues with sizing you can resize anything you need without having to change your CSS, upload, then refresh the page!
You can also run JavaScript code on the live page (using any JavaScript libraries that are loaded on that page too!) by first clicking on the Console tab in Firebug, then just type your JavaScript code in the right hand pane. Click run to run your code et voila! As an example, if you have a script that isn't working correctly you may find an error in the Console detailing the issue. You can copy the problematic code into this pane and change it until it works, then just copy it back to your file. Instant, in-browser debugging.
There are also plenty of add-ons available for Firebug, including YSlow by Yahoo!, Google Page Speed, Firecookie and FirePHP, to list a few. This allows you to instantly debug all aspects of your web page as you are building it and without having the monotonous task of changing, saving, uploading, reloading everytime you want to move an element a couple of pixels into position, or check that a cookie has been set correctly (or even remove a cookie).
Firebug really is the greatest tool for developers to debug their web sites and gain insight into the way other developers build theirs!
I'm going to mention another method of debugging that I read about today that has already become invaluable and is so unbelievably easy to inplement! Consider the following CSS:
* { outline: 2px dotted #F00 }
* * { outline: 2px dotted #008800 }
* * * { outline: 2px dotted #FF0 }
* * * * { outline: 2px dotted #000066 }
* * * * * { outline: 1px solid #F00 }
* * * * * * { outline: 1px solid #008800 }
* * * * * * * { outline: 1px solid #FF0 }
* * * * * * * * { outline: 1px solid #000066 }
When placed in your CSS file this little snippet of code will highlight the hierarchy of your web page (without affecting positioning as borders would) showing you the depth of each element in your page. It's so simple and useful (and could easily be extended with javascript) that it will appear in all of my new style sheets to help with future development. And if you find this a little obtrusive, or you have too many elements that you can't see what on earth is going on, try:
* :hover { outline: 2px dotted #F00 }
* * :hover { outline: 2px dotted #008800 }
* * * :hover { outline: 2px dotted #FF0 }
* * * * :hover { outline: 2px dotted #000066 }
* * * * * :hover { outline: 1px solid #F00 }
* * * * * * :hover { outline: 1px solid #008800 }
* * * * * * * :hover { outline: 1px solid #FF0 }
* * * * * * * * :hover { outline: 1px solid #000066 }
This version of the same CSS will only show you the hierarchy of your elements when you hover over them, which is a little easier on the eye but just as useful!
So there you go. If you have any of your own tips or tricks for debugging your CSS and/or JavaScript let me know in the comments and I may include them later on!
Please note: all comments are moderated before they are published on this page.
Comments (be the first)