Web Development

Well being that this is a place where I’m posting information, I will let you know how I use the firefox extension/addon firebug.

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

When I use firebug I am usually using it for modifying templates I’m working on, specially for content management systems such as Joomla!. What I do is open up my Dreamweaver program, sync it to my remote server and start designing. Well, actually I usually have my design finished at that point, but you get the point.

So when I have firefox running and my template open, I hit the F12 button, it pops open my debugger, and I go directly to the inspect tab. I then click on which every spot I’m working on, usually a silly module position that needs a bit of tweaking. Then in the bottom right corner I can move my padding this way and that adding 1 or 2 px to the left or right. When I get it to the right spot, I ALT+TAB to Dreamweaver and make the modifications to the template_css.css file, or whichever template file, right click the put option, and it uploads.

Voila! The modification is done and I was able to make visual changes to my Joomla! template in ‘real time’. I know most people use firebug for hardcore coding and inspection of javascript stuff, but I just don’t know enough about it. I use it for template design and modification.