When I switched to developing WordPress sites exclusively, I needed a tool to help me find the places in the code where I could go to change background and text colors. That’s when I found Firebug and it became one of my “Best Web Design Tools”. I still use it every day.

Anytime you want to look under the hood of a website and see the exact lines of code that are creating the page element you are looking at, FireBug is THE tool for the job, and it’s now one of the modern classics, a tool fit for every developers bag.

OK lets get into it. When you are looking at a web page with a browser, you are actually looking at a rendition. Older programming languages were compiled… that is they were assembled and written into an executable file. Web languages are not compiled, they are rendered at the time they are displayed and they are known as markup languages. The web page you are looking at could be HTML, CSS, PHP, ASP, and a number of other popular WWW oriented programming languages, or any combination of all of the above. You can go to “View, Page Source” using FireFox to look at the code at the time it was rendered. So what you are looking at is the final combo of what could be many files… .htm, .html, .css, .php, and so forth. It’s very hard or near impossible to figure out where a line of code originated sometimes just by looking at the source in the browser. That’s where Firebug shines.

Firebug is a free add-on that bolts beautifully to the Firefox browser. Once installed, you can drag on some text on a web page, right click, and click on “inspect element” to start Firebug. There are basically 2 panes, the left one being the exact lines of code in the currently executing HTML or PHP file generally, and on the right pane you will see the styles that are currently inherited and in play from various style sheets (your .css files).

You can also use Firebug to see exactly how many pixels wide and high your layout elements are. I worked on websites for almost 10 years before I discovered a tool that could do that and Firebug is incredibly valuable just for that one feature alone.

Another bolt on that I use frequently that works in the Firebug console is a tool called YSlow from Yahoo actually. YSlow sill tell you the load size of a web page and it further breaks down the page into the individual code and image sizes so you can quickly find over sized offenders. I don’t ever go over 1.2 MB on my homepages right now to eliminate the possibility that an oversized page might not be looked at favorably by search engines.

If you work on websites try Firebug and Yslow and tell me if they are worthy of me calling them the one of the Best Web Design Tools.