Sign In  |  Join Now Become a member to add links and start earning points!

Quick & Easy CSS Development with Firebug

In the past, I found myself spending countless hours tweaking my CSS and making everything work in Internet Explorer just as it would in Firefox. Everything changed when I found Firebug. In this tutorial, I am going to discuss how to use Firebug to make CSS development faster, and share some tips for a consistent look between browsers.

Materials Needed:

Part 1: Installing and Getting Around Firebug

If you haven’t installed Firebug yet, Please go to the Mozilla plug-in directory, download and install: The link can be found here:

https://addons.mozilla.org/en-US/firefox/addon/1843

Now, the Firebug is installed its time to understand what we’re looking at, and how we can use it. First, lets navigate to Tutorial9.net so we are all working with the same example.

Next click on the little bug in the bottom right corner of your browser (see photo below).

Image Description

You’ll see the firebug window expand. And you’ll see the menu below. In the top menu you will see Inspect and Edit. Click on Inspect. If you mouse over the website, you will see a blue box outline around whichever html object you hover over.

Image Description

Now, when you click an element you will see that the right side of the firebug window show the CSS elements and attributes of that item. For our example we’re going to click inspect and select the tutorial9.net logo.

Image Description

Once you select the element, look in the bottom right hand corner of your firebug window. Here you will see the CSS elements and attributes of those elements that relate to the object you selected in the web site. To the right of each element you will see the Location of the CSS element in the document as well as the line it appears on.

So using our example, The Tutorial9.net logo inherits its CSS styles from ID masthead (#masthead) in Styles.CSS on line 54.

Image Description

So lets Play around a little but:

Move your mouse over the value of the margin property, and change 0 to 38px, Notice when you change the value, the appearance in the live document instantly change as well.

Image Description

Element, Attributes and Properties????

The Red – CSS Element (Class, ID, or Tag)
The Blue – Element Property (Margin, Width, Height, Etc)
The Teal – Property Value

Image Description

Now, if you play with the properties you can preview your CSS in a live browser environment, saving you from jumping back and forth between your doucment editor, browser and ftp server.

Moving on, If you mouse over an element title and right click you have the ability to add a new property, to adjust the CSS element as well.

Image Description

Part 2: Edit YOUR web page’s CSS with firebug

Now that we understand firebug, and what it does, its time to dig into how we can use it to edit CSS in your document.

Open your webpage in firefox. Select the first element you wish to modify. Add/Remove/Modify properties until the element is positioned the way you want. Once you get the look you want, select the properties, select copy, open your document editor navigate to the appropriate line paste the new properties, save and reopen in your browser. You will see the new changes.

In the video below you can see how to I use firebug to adjust various objects in my live document.

Part 3: Firebug and Internet Explorer

Of course, like many — I am not an advocate of Internet Explorer — sad thing is there are still many internet explorer users out there. As a developer, I’ve been in a few instantces where I’ve prepared a website for a client who works for a government agency, and the agency has a contract to only use internet explorer at their offices – So I found that I HAD to build for ie6. I also learned how many people (which there are a lot) that still use IE and how many of those IE users still use IE6.

Of course the Firefox plugin doesn’t work for Internet Explorer, so you have to use ‘FireBug Lite’. Which a very lightweight JS script that you embed in your code while developing, and remove when your all set. Here’s how, In your header insert the following code:

 <script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

If you need to adjust the size of the firebug window you can by inserting the following script, below the one above:

<script type="text/javascript">
	firebug.env.height = 500;
</script>  

For those of you who are developing on your local machine, you can download firebug lite here. Note: you must replace your script with the follow:

 <script language="javascript" type="text/javascript" src="/path/to/firebug/firebug-lite.js"></script>

Working with firebug in internet explorer is a bit different functionaility wise, as once you make change to your CSS, you have to manually run the CSS changes from the firebug consul window. Aside that, Its the same principals as developing for Firefox.

Part 4:The CSS Im using works in Firefox but Not IE

Okay — we’re making progress, but it seems some CSS properties Dont look the same in Firefox as they do in Internet Explorer.

1. Conditional Styles

Since IE is very quirky and non-compliant with w3 Schools CSS standards, often you must create a custom style sheet, that only loads when the user is browsing from that particular version of internet explorer.To do so, simply add the following code to the <head> of your document.

<!--[if IE]>	<link rel="stylesheet" type="text/css" href="ie.css" /><![endif]--> 

In between the tags, you can place CSS code or, like the above example link to an external stylesheet. Any code you place in between the tags will appear if the tags are true. The script below shows a DIV only if the user is using IE6.

<!--[if IE 6]>	<div id="ie6">
		We reccommend that you upgrade to at least Interent Explorer 7
	</div>
<![endif]--> 

Here are a few other Conditions:

  • IE (Any version of Internet Explorer)
  • lt IE 7 (Versions less than version)
  • lte IE 6(Versions less than or equal to version)
  • IE 6 (Only version)
  • gte IE 6 (Versions greater than or equal to version)
  • gt IE 7 (Versions greater than version)

2. Opacity

Did you know you CAN do opacity in Internet Explorer with a Javascript. Many people don’t know how. Its every simple. In Firefox you use the property Opacity. When in IE you use filer: alpha(opacity = value); as show in the code below:

.logo {
	opacity: 0.5;  //For Firebox
	filter: alpha(opacity = 50); //For Internet Explorer
}
<!--[if IE]>	<link rel="stylesheet" type="text/css" href="ie.css" /><![endif]--> 

In between the tags, you can place CSS code or, like the above example link to an external stylesheet. Any code you place in between the tags will appear if the tags are true. The script below shows a DIV only if the user is using IE6.

<!--[if IE 6]>	<div id="ie6">
		We reccommend that you upgrade to at least Interent Explorer 7
	</div>
<![endif]--> 

3. IE6 Scroll Renders Artifact

What happens is IE6 (which again sadly, people still use) is when scrolling vertically down the page, artifacts make the page look all messed up. What is happening is a DIV element that has nothing behind it on the page is rendered bit by bit (for efficiency says Microsoft) as the page scrolls. If the scrolling is anything other than 100% smooth the rendering fails leaving the sorts of glitches shown above. To fix, we have to insert a null object behind the DIV. Simple fix, see blow:

html {
	background : url(null) fixed no-repeat;
    }

4. Min-Width and Min-Height Issues

IE doesn’t understand these commands, so to make this work, you’ll need to use conditions to access customs styles to make it work in Internet Explorer. So Lets say we have a div called wrapper:

#wrapper{
	min-width: 750px;
	width:expression(
		document.body.clientWidth < 750? "750px": "auto"
	);
} 

5. A:Hover, Button:Hover — Hover Issues

:hover enables you to have cool effects for HTML elements like button rollovers, etc. Most browsers have no problem with this, except IE (once again of course) which look at the stylesheets and each individual rule with Javascript.
If :hover rules can be tracked, and .htc can be used to change an elements behavior, then it should be possible to create a behavior that enables :hover for any element in IE.

In my building I’ve found the only effective work-around is using a small JS file. Which you insert like below:

  body {
	behavior: url("csshover3.htc");
}  

You can download the csshover3.htc file here.
Unpacked (9k)

Packed (2.5k)

6. Margin + Centering your Div

When centering DIV tags using either the margin-left: auto; or margin-right: auto; settings, will not work in Internet explorer. Your would have to conditionally add the following code:

#divname {	text-align: center;}

Note: IF YOU MAKE THE DIV CENTER, YOU MUST RE-ADJUST THE INNER CONTENT

#p {	text-align: left;}

7. Margins Too Large

I hate this one the most. Setting the margin attribute for any CSS element in Internet Explorer will often appear with added width, which can seriously mess up detailed layouts. By using the {display: inline;} property/value on the tag containing your margin setting can fix this

<div id="special" style="display: inline; margin-left: 10px;"></div>

8. Lightbox’s (modal boxes) don’t hide Flash underneath

Everyone is using Lightbox script’s nowadays. If ever your running into the problem of a flash element (swf or even a video) and you want the flash element to continue to play… heres how:

<param name="wmode" value="transparent"/>

If your using SWFObject:

	so.addParam("wmode","transparent");

Final Thought:

Dont test User-Agents to detect the users Browser, cause Google will look at that as Cloaking and ban your site, believe me, I know ;)

Got any tips to add that I may have missed? Please share in the comments below!

125 Comments

  1. Add point Subtract point
    Surrey Web Design (1 Point) March 6, 2011 at 6:25 pm

    Great resource! This helped me out a lot getting started with firebug, so I must thank you very much!

    Flag as inappropriate
  2. Add point Subtract point
    bookmarks (0 Points) January 29, 2011 at 9:55 am

    I think it is impassioned. Anyone can carry his burden, however hard, until nightfall. Anyone can do his work, however hard, for one day. Anyone can live sweetly, patiently, lovingly, purely, till the sun goes down. And this is all life really means. ~Robert Louis Stevenson

    Flag as inappropriate
  3. Add point Subtract point
    โหลดเพลง mp3 ฟรี (1 Point) October 1, 2010 at 3:35 am

    thank you for tutorial

    Flag as inappropriate
  4. Add point Subtract point
    โหลดเพลง mp3 ฟรี (1 Point) October 1, 2010 at 3:34 am

    very good tutorial

    Flag as inappropriate
  5. Add point Subtract point
    Derek DeKoter (1 Point) September 23, 2010 at 4:26 pm

    Helpful read! Firebug is saving me a huge amount of time.

    Flag as inappropriate
  6. Add point Subtract point
    Rockstar kid (1 Point) August 12, 2010 at 12:11 am

    i really liked the contents you published.can we use firebug and css editor to edit anyone’s page… i mean friend’s page. can u give me some tips to edit pictures of website using both.. thank u

    Flag as inappropriate
  7. Add point Subtract point
    Samuel Leathers (3 Points) August 10, 2010 at 4:33 pm

    I noticed you mentioned firebug, but no mention of firediff. If you’ve never used firediff, you don’t know what your missing. Firediff adds a “changes” tab to firebug, so after you make all your changes and you forgot what you’ve done along the way, you just scroll through the changes and edit your files as needed.

    Flag as inappropriate
  8. Add point Subtract point

    Excellent tutorial!

    For ie Internet Explorer users visit
    Firebug for IE

    Flag as inappropriate
  9. Add point Subtract point
    Joe Johnson (1 Point) July 26, 2010 at 11:56 pm

    Thanks buddy, this is the first tut I’ve found for Firebug specifically, and I appreciate how you elaborated on how to deal with IE… I’m sure I’m not the only one, but I tend to forget to test pages in IEx (I know, we’re all supposed to…).

    Thanks again. ;-)

    Flag as inappropriate
  10. Add point Subtract point
    Tech & IT News India (1 Point) June 19, 2010 at 2:03 am

    Thank you for a good share. Have a good resource in your blog. Very useful post.

    Flag as inappropriate
  11. Add point Subtract point
    โหลดเพลง mp3 (1 Point) June 9, 2010 at 5:10 am

    Very useful info thanks for sharing

    Flag as inappropriate
  12. Add point Subtract point
    Web Design (1 Point) April 26, 2010 at 8:18 pm

    Very useful info thanks for sharing ! :)

    Flag as inappropriate
  13. Add point Subtract point
    โหลดเพลง (1 Point) March 29, 2010 at 11:23 am

    Great tip , Thank you for your share.

    Flag as inappropriate
  14. Add point Subtract point
    โหลดเพลง (1 Point) March 23, 2010 at 9:26 am

    Thank you for your information.

    Flag as inappropriate
  15. Add point Subtract point
    เพลงลูกทุ่ง (1 Point) March 13, 2010 at 12:02 am

    Thanks for the article useful,Thanks for the article useful

    Flag as inappropriate
  16. Add point Subtract point
    หาดใหญ่ (1 Point) March 12, 2010 at 11:59 pm

    These are GREAT tips

    Flag as inappropriate
  17. Add point Subtract point
    โหลด mp3 (1 Point) March 12, 2010 at 11:57 pm

    Thanks for the article useful

    Flag as inappropriate
  18. Add point Subtract point
    Webb Des (1 Point) March 11, 2010 at 7:14 am

    I can not remember how i used to do css debugging without firebug. It has saved me hours/days on every project. THANKS!

    Flag as inappropriate
  19. Add point Subtract point
    Ольга (1 Point) March 8, 2010 at 2:39 am

    Отличная статья! Спасибо Вам огромное! Только вчера я мучилась с отображением моего сайта в IE6, но теперь я знаю, как его победить!. Ура!

    Flag as inappropriate
  20. Add point Subtract point
    Fixticks (1 Point) February 18, 2010 at 7:25 am

    Someone commented about splitting this article or perhaps adding IE hacks and tricks in the title, there is very very valuable info here not pertaining to Firebug that web designers who need to also target ie6 users need.

    Much kudos for the opacity hack, hovering and the margin thingy.. headaches no more….

    Flag as inappropriate
  21. Add point Subtract point
    Best Buy (1 Point) February 14, 2010 at 5:39 pm

    Great Thank for shar Very intriguing article.Best Buy Products
    ASUS Republic of game
    Toshiba Satellite NoteBook Computer Store Cheap Price.

    Flag as inappropriate
  22. Add point Subtract point
    เว็บโหลดเพลงฟรี (0 Points) February 10, 2010 at 12:35 pm

    Select a New Hologram accessories should use more

    Flag as inappropriate
  23. Add point Subtract point
    online music stations (1 Point) February 10, 2010 at 12:31 pm

    Thanks for the Explorer tip I’ll give this a try. I have been using IETester which is nice but not nearly enough web developer tools

    Flag as inappropriate
  24. Add point Subtract point
    โหลดเพลง (1 Point) February 4, 2010 at 10:40 am

    Thanks for the Explorer tip

    Flag as inappropriate
  25. Add point Subtract point
    เพลงใหม่ล่าสุด (1 Point) February 2, 2010 at 11:28 pm

    Great reading! Thanks for sharing139

    Flag as inappropriate
  26. Add point Subtract point
    โหลดเพลงฟรี (1 Point) February 2, 2010 at 3:33 am

    Great reading! Thanks for sharing132

    Flag as inappropriate
  27. Add point Subtract point
    โหลดเพลงฟรี (1 Point) February 1, 2010 at 5:16 am

    wow Cool tip thank for sharing.129

    Flag as inappropriate
  28. Add point Subtract point
    เนื้อเพลง (1 Point) January 30, 2010 at 11:34 pm

    thanks for sharing. So mush

    Flag as inappropriate
  29. Add point Subtract point
    Music-mp3 (1 Point) November 28, 2009 at 7:15 am

    Art is beautiful much different

    Flag as inappropriate
  30. Add point Subtract point
    mp3free (1 Point) October 28, 2009 at 7:53 am

    Thanks for the article useful

    Flag as inappropriate
  31. Add point Subtract point
    Jason Garrison (1 Point) September 30, 2009 at 10:10 am

    Nice tutorial on Firebug. I’d just make it more clear that you have to copy the style changes from Firebug and paste them into the actual style sheet in order for them to work.

    And don’t forget to install the YSlow add-on to Firebug. It provides a lot of great information you can use to optimize your pages.

    Flag as inappropriate
  32. Add point Subtract point

    Yeah Firebug editing is great and all, but how the heck are you supposed to save your changes afterward? None of the tutes I’ve looked at explain that.

    Flag as inappropriate
  33. Add point Subtract point
    erkasoft (1 Point) September 7, 2009 at 3:06 pm

    I love firebug. I’m using it. Thanks for useful tutorial.

    Flag as inappropriate
  34. Add point Subtract point

    For me Firebug has revolutionized the way I write, edit and troubleshoot CSS. I’m an old-school code-by-hand type of guy and Firebug is an invaluable asset to my development tool belt.

    Flag as inappropriate
  35. Add point Subtract point

    The Firebug lite doesn’t work in ie it is too slow as my ie hangs while using it

    Flag as inappropriate
  36. Add point Subtract point

    Thanks for the Explorer tip I’ll give this a try. I have been using IETester which is nice but not nearly enough web developer tools.

    Flag as inappropriate
  37. Add point Subtract point
    Bogdan Sorlea (1 Point) June 22, 2009 at 4:24 pm

    Dont test User-Agents to detect the users Browser, cause Google will look at that as Cloaking and ban your site, believe me, i know… i guess it happened to you and it wasn’t the best thing that ever happened to you

    Flag as inappropriate
  38. Add point Subtract point

    Thanks for the Firebug explanation.
    Yeah, IE sucks… when will Microsoft do something that doesn’t suck (like a vacuum cleaner) ?

    Flag as inappropriate
  39. Add point Subtract point
    Niko (1 Point) June 1, 2009 at 1:07 pm

    Nice Tip i’ll use it! thx

    Flag as inappropriate
  40. Add point Subtract point
    Billy (1 Point) May 18, 2009 at 9:12 pm

    As nice and informative this tutorial is, it seems a large part of this is about how to get IE6 to play nice with CSS. I do think those issues are important, but people may not be able to find them by seeing the title of this tut?
    I think separate them out would be nice, a IE6-fixit tut and a firebug tut (add link between them if that’s helpful).

    Flag as inappropriate
  41. Add point Subtract point
    Insectscorch (1 Point) May 8, 2009 at 1:52 pm

    This is the first article that explains axactely wath I need. However I have a question. Are these tips enought to make a simple web page to run in IE 6? I mean, If I use simple css rules and semantic xhtml or is there anything else I need to have in mind?

    Flag as inappropriate
  42. Add point Subtract point
    Mini Mol (1 Point) April 25, 2009 at 10:57 am

    Great teaching about firebug.

    Flag as inappropriate
  43. Add point Subtract point
    Carl – Web Site Design Instructor (1 Point) April 23, 2009 at 12:12 am

    I really enjoyed this tutorial and I totally agree that live editing is the most efficient way of coding. I do however find that firebugs way of editing the CSS is very slow. I prefer the Web Developer Tool bar where you can just edit the css like it was in notepad and the changes seen instantly. Firebugs way of highlighting an element the adding the value slows me down. However with Firebug you can easily see your HTML as well as your CSS, this is useful when you can`t remember the name of all your ID and saves you time that way.

    Overall a thumbs up from me ;)

    Flag as inappropriate
  44. Add point Subtract point
    Harish (1 Point) April 22, 2009 at 4:11 am

    Thanks a TON ryan ,nice to hear about fire bug tool ,this article is really nice and usefull hope i can save some time while creating my css and integrating it to my works ,hopefully this will help me thanks once agai nto psot such kind of article

    Flag as inappropriate
  45. Add point Subtract point
    Marie Poulin (1 Point) April 11, 2009 at 6:00 pm

    These are GREAT tips, thanks a ton!
    I’d love to see a bit more about transparent png’s across browsers…?
    Thanks!

    Flag as inappropriate
  46. Add point Subtract point
    Tschai (1 Point) March 13, 2009 at 11:31 am

    1.IE still sucks, even IE7…and yes, people still use it…even IE6

    2.A very welcome tut and firebug+ff just kicks ass

    3.I learned to test in a early stage also with IE although I refuse to optimize for IE anymore

    Flag as inappropriate
  47. Add point Subtract point
    Zohaib (1 Point) March 4, 2009 at 7:57 am

    web designers usually wont like IE but with the help of
    Firebug u can handle the IE pretty well.Thanks Ryan and final thought is also quite useful :)

    Flag as inappropriate
  48. Add point Subtract point
    Crazy Xhtml (1 Point) March 4, 2009 at 5:59 am

    Hmmm. seems need to start to use Firebug….

    Thanks for the article.

    Flag as inappropriate
  49. Add point Subtract point
    Gaurav (1 Point) March 3, 2009 at 1:42 am

    nice article

    but the fix for min-height and min-width by ie expressions is a headache i think …

    for min-height dustin diaz’s css hack is much better

    Flag as inappropriate
  50. Add point Subtract point
    Grammar Police (1 Point) March 2, 2009 at 12:43 pm

    Great article – I won’t fault the content, but simple proof reading can go a long way to making it look professional. “These script’s are awesome” looks as if it’s been written by a 12 year old. Also, please learn about your -> you’re. There *is* a difference.

    Flag as inappropriate
  51. Add point Subtract point
    Elizabeth K. Barone (1 Point) March 2, 2009 at 12:13 pm

    This was a very informative post! I didn’t know you could use transparency in IE. Welcome to Tutorial 9 and thanks for this!

    Flag as inappropriate
  52. Add point Subtract point
    James Stratford (1 Point) March 2, 2009 at 11:32 am

    Nice post! It’s time to download Firebug and test it out on some direct response marketing sites. Keep up the good work and thanks for great content!

    Flag as inappropriate
  53. Add point Subtract point
    Gary Cohen (1 Point) March 2, 2009 at 11:11 am

    Ryan,
    I have been looking for this post for a while. Everyone raves about Firebug. And I got to do the changes but could never work out how to save them. Never thought about copying them lol. it would be really cool if there was a save changes via ftp button don’t ya think? Thanks much!
    Gary

    Flag as inappropriate
  54. Add point Subtract point

    You know, you cant forget ie6 — Lots of government agencies, schools and commercial workplaces ONLY allow ie — and many aren’t upgraded to the latest yet… The site used in the demo above has 60% ie users, 40% of which are ie6….. go figure?

    I will say this. The more ‘design-centric’ your site, the less ie6 support you’ll need. Or, as an alternative do a hidden div with a big warning message saying “UPGRADE YOUR BROWSER NOW OR ELSE…” which is set visible if a ie6 condition is true…. that’s a common technique that I see…

    Flag as inappropriate
    • Add point Subtract point
      rohnn (1 Point) March 9, 2010 at 5:26 am

      The “upgrade your browser” message is a good idea.

      The main problem being that the very same users you are talking about that sitll use IE6, government agencies, schools and commercial workplaces… etc, well those, they usually cannot upgrade their browsers as they dont have admin rights on their machines… Otherwise, I’d suppose most of them would have already.

      Flag as inappropriate
  55. Add point Subtract point

    Thanks, found some nice workarounds for IE 6! But still, the only good workaround would be to… forget IE 6 :p

    Flag as inappropriate
  56. Add point Subtract point
    James (1 Point) March 1, 2009 at 1:16 pm

    nice article!

    You said: “Dont test User-Agents to detect the users Browser, cause Google will look at that as Cloaking and ban your site, believe me, I know”

    This wont affect me if I detect the user’s agent server-side, will it? At the moment, using PHP I look for a value in the user agent sting and if I find it, include an additional notice telling the user to upgrade their browser.

    Flag as inappropriate
  57. Add point Subtract point

    And don’t forget FireCookie

    Flag as inappropriate
  58. Add point Subtract point
    nszumowski (1 Point) March 1, 2009 at 9:17 am

    thanks a ton! i’d been using firebug for a while but apparently was missing out on some of it’s basic functionality. :/
    don’t forget all the great Firebug addons like firephp, yslow, senseo, etc. really a great tool for developers overall.

    Flag as inappropriate
  59. Add point Subtract point
    Lachy (1 Point) March 1, 2009 at 9:10 am

    Ryan, would you teach me Ruby on Rails?

    Please!

    Flag as inappropriate
  60. Add point Subtract point

    Man, this is great. I can’t wait to implement this. And please, keep em comin.

    Flag as inappropriate
  61. Add point Subtract point
    Creamy CSS (1 Point) February 28, 2009 at 9:07 am

    Nice and really helpful post, Ryan! I often use firebug in my work and advice others to do the same ;)

    Flag as inappropriate
  62. Add point Subtract point

    Good stuff here. Don’t forget about SitePoint’s reference plugin for Firebug. ;)

    Flag as inappropriate
  63. Add point Subtract point
    Jonathan (1 Point) February 27, 2009 at 7:59 pm

    Awesome, now I can finally get stuff to work with IE…

    Flag as inappropriate
    • Add point Subtract point
      Ali A. Akbar, Georgia (1 Point) April 13, 2009 at 9:09 am

      Except the tutorial entirely misses the point. Doesn’t state anything about how it works to efficiently make your CSS crossplatform’d.

      He also relies on a video that is much to do about nothing.

      More of a mediocre article written to advocate the general use of Firebug instead of how it works with IE or the benefits thereof.

      He recommends Dreamweaver, but fails to show where this outpaces the dual window functionality that’s been in Dreamweaver for a decade.

      Massive Fail.

      Flag as inappropriate
  64. Add point Subtract point
    Ryan Hickman (1 Point) February 27, 2009 at 7:41 pm

    Thanks. Everyone. Thanks. Your satisfaction is my fuel to go on ahead and write some more.

    Flag as inappropriate
  65. Add point Subtract point

    Great post Ryan :) Very glad you decided to share with Tutorial9, and hope you’ll keep writing more for our community!

    Really appreciate you including the links for Firebug Lite and the additional documents, will be grabbing those for my future projects.

    Flag as inappropriate
  66. Add point Subtract point
    Christine (1 Point) February 27, 2009 at 3:32 pm

    Thanks for explaining Firebug from first principles from a user perspective. This helped me launch right into using it for editing and not just diagnostics. Great stuff.

    Flag as inappropriate
  67. Add point Subtract point

    This is a great tutorial and explanation on how to use Firebug. Awesome tutorial!!!
    - Greg

    Flag as inappropriate
  68. Add point Subtract point
    Stuart Thursby (1 Point) February 27, 2009 at 11:54 am

    Stellar article, tons of useful bits of info that will (hopefully) take at least some of the headaches out of developing my next website. Thanks!

    Flag as inappropriate
  69. Add point Subtract point

    Great article. There need to be more out there like this. I don’t know what I would do without firebug, it’s saved me hours upon hours of work. Thanks for showing how to integrate it with IE6, too.

    Flag as inappropriate