Firebug – An Incredible Free Web Development Tool
Tuesday, October 20, 2009

When I started building and editing my Wordpress blog, I came to realize that it’s slightly more complicated and difficult than editing a plain html or php file. Wordpress uses a combination of php files and CSS code and ties them together to create your site.

Needless to say I was a little bit confused, and moreover I had never edited anything in CSS. I did quite a bit research in the Wordpress forums, and eventually someone in the forums recommended Firebug to me.

Firebug is application which you can install into your Firefox browser. Once it’s installed, open it by clicking the little bug in the bottom right corner of the browser. Mousing over any part of your page will highlight the html code used to create that part of the page. You can then find the corresponding CSS code, edit it in firebug, and the changes you make appear in real time, i.e. changes actually appear right on your page. If you’re new to CSS (or html… or whatever) this is INCREDIBLY useful… it really helps to visualize how the webpage is put together.

Note that Firebug does not actually change your website (this will only happen if you edit your actual website file), therefore no need to worry about making mistakes.

Also note that this is not only applicable to Wordpress sites… that is simply my personal experience.

  • Share/Bookmark