How do you use firebug?

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.


Comments

One Response to “How do you use firebug?”

  1. Norm Says:

    Can Firebug be used to track HTTP GETs including the request header and the responses from the server including the response header. Will it show all the HTTP GEts done when an HTML page is being loaded and the page references resources that require HTTP GETs?

    Thanks,
    Norm

Leave a Reply

You must be logged in to post a comment.