FireBug: Fantastic HTML Designer's Tool

Working on a new template and need help? Come here for support.

Moderator: Help Desk Team

FireBug: Fantastic HTML Designer's Tool

Postby Admin » June 21st, 2009, 2:39 pm

FireBug (for FireFox)

No web designer should be without this tool.


It's basically a souped-up "View Source"... One of my favorite features is the Right Click -> Inspect Element feature, which will give you all of the CSS properties of a particular element (such as a div, an img, an input, etc). You can download it now from one of the links above.

Also of note are Internet Explorer 8's built-in "Developer Tools" (hotkey F12) which provides tools similar to FireBug.
User avatar
Site Admin
Posts: 1442
Joined: August 17th, 2005, 11:10 pm

Re: FireBug: Fantastic HTML Designer's Tool

Postby AyaneSensei » June 21st, 2009, 3:08 pm

I personally never found any use for it.
Not that it matters now, since I don't even use Firefox.
User avatar
Posts: 270
Joined: June 11th, 2008, 5:36 pm

Re: FireBug: Fantastic HTML Designer's Tool

Postby Pyroman » June 21st, 2009, 4:43 pm

I use it quite often for fixing broken templates, as it lets you live edit a webpage. For example, if I wanted to test what changing the width of an element did, I don't have to go and reload the whole template, I can just use firebug.
That being said I don't 100% trust it, and always double-check when I am done, but it is fantastic for just messing around with code in real time.

I also adore that it supports the various random bits of CSS3 that have become common place, such as opacity filters and rounded corners, and it even cleans your CSS for you. By which I mean, if you have all of your margins declared as seprarate properties, it will move them all into one.

At first I didn't see much of a use for it, and found it a little annoying to use, but now I have gotten the hang of working around the interface I think it's fairly indispensable. Especially on Smackjeeves where you would otherwise have to go through the whole template submitting process again.
User avatar
Posts: 1118
Joined: January 28th, 2006, 12:40 am
Location: Australia

Re: FireBug: Fantastic HTML Designer's Tool

Postby Arwym Starlight » July 6th, 2009, 5:47 pm

Firebug is very useful, and a real time saver, once you get the hang of it. It's definitely perfect for testing out different effects and other things before applying it permanently to your design. :)

By the way: while I think that Firefox 3 is very annoying (very buggy in my case), the Mozilla Firefox browser in general is the best choice for any web developer/designer. I suggest that you get used to making your designs look especially right in that browser (not saying that you should ignore the other browsers, though), since it's the most faithful to the web standards, judging for what I've seen and read. Internet Explorer is every web designer's worst nightmare (thus regular users suffer as well), so every time you can, try inviting others to use Mozilla Firefox.
User avatar
Arwym Starlight
Posts: 30
Joined: May 18th, 2006, 9:49 pm

Re: FireBug: Fantastic HTML Designer's Tool

Postby Bratchan » December 31st, 2009, 10:54 pm

I use this for debugging alot. Another good one is Web Developer. It allows you to see the CSS and HTML in different pages so you can have an over view.
I sell WebLayouts for Smackjeeves! Only $35 email me - Bratchan[at]! This layout will be unique only to you!
User avatar
Posts: 37
Joined: March 13th, 2007, 10:56 pm

Re: FireBug: Fantastic HTML Designer's Tool

Postby JCM » January 22nd, 2010, 7:26 pm

You should also note that Google Chrome has this enabled by default. It's definitely helped me out in the long run, as I try to design a lot myself.
Posts: 804
Joined: August 4th, 2008, 1:46 pm

Return to Template Development & Support

Who is online

Users browsing this forum: Bing [Bot] and 2 guests