Firebug is an extension for both Firefox 2 and 3.

Use it to highlight the various areas of a web page and let it display the CSS rules that are being applied to that area while you hover over it with your mouse.

It'll let you preview/test CSS changes by applying them live to any site (including other's sites) without actually changing or re-uploading the code. Very useful and probably used by every web designer

There's also the IE developer toolbar, perhaps not as good but can serve as a similar tool to diagnose IE specific problems.

Opera has something like that, too, it's called "Developer Tools".

All three of these integrate into the respective browser.

http://www.getfirebug.com/ or https://addons.mozilla.org/firefox/addon/1843
(I've not checked which one's for FF2 or FF3 or if the same works for both)

Firebug Usage:

• After Firebug is installed, click (In Firefox) "Tools" -> "Firebug" -> "Open Firebug"
• In Firebug, click "Inspect", then point your mouse at somewhere on the web page itself or at a HTML tag ("<div class=..." etc) in the web page code window of Firebug (bottom left)
• Watch the window at the bottom right in Firebug to see all CSS rules that are being applied to the selected area of the web page. Rules on top of the list take precedence over rules further down. Firebug shows the whole cascaded list of applied rules, including CSS rules that are being overwritten.
• To further inspect or modify the CSS for a certain part of the page, click on an area in the web page, or a HTML tag in the code window (bottom left), then go into the CSS rules window (bottom right), scroll around and click on a CSS property or value to change it directly.
• Wait a second or click somewhere outside to see how the changed rule is being applied.
• To add a new property/value pair, double click somewhere between the opening/closing curly braces of the selector of the respective CSS style.
• You may loose the "Inspect" tab while doing this and may have to re-select that tab now and then.

These instructions may be confusing. Try Firebug out, it won't actually change the code of your site so there's no harm in playing around with it.

I've been using the Web Developer plugin for years. I installed Firebug maybe a year ago, but quickly determined that it was causing Firefox to us an inordinate amount of memory.

Can anyone comment/compare the two plugins?

I know from Googling that I was not the only one having trouble with Firebug -- have the memory leak problems been resolved?

More or less - not as critical to use as older versions for sure. I run both and have not seen any problems at all. I think most problems comes from old Firebug tampering with everything in sight. After 1.3? it is only activated when you decide - also you can disable the net monitoring stuff, script debugging etc. Apply on a per site basis, no general hogging.

Firebug and toolbar is mostly supplementary to each other so get both.

May be an idea to make a Web developer profile for Firefox? Can throw all the extra stuff in there and keep "normal" Firefox running regardless of the odd bug.

-P "WebDev" -no-remote added to command line/shortcut as parameter will start up such a profile. You have to create it first in profile manager. Start that up with a "-P" switch. -no-remote separates Firefox processes so basically you have 2 running instead of one. Also what you should use if having 3.06 and 3.1 installed. No conflicts.

Check Mozillazine Knowledgebase

Okay! I have re-installed the "new & improved" current version of Firebug and will run it awhile to see if it plays nice with Web Developer.

Thank you js9600 for the info about setting up Mozilla profiles! THAT is something I will have to come back to when I have a little more "free" time. Right now I'm climbing the learning curves of WordPress, Atahualpa (with lots of good help from Flynn !), HTML, CSS and several solutions to my "e-commerce problem."

Originally Posted by js9600

... Start that up with a "-P" switch. -no-remote separates Firefox processes so basically you have 2 running instead of one. Also what you should use if having 3.06 and 3.1 installed. No conflicts....

I'm just slightly embarrassed to admit that I don't understand what you mean. I do know about having two instances of FF running at the same time. Are you saying that using a profile I can have one FF running "normally" and then a second running using my new "WebDev" profile including Firebug-- that instance of the browser having been started using a "-P" switch as part of the startup?

Sorry for being so dense. Us old dogs chew on new tricks for some time.
Tnx Jim

Yes, exactly. If you are going to learn all that you dont need Firefox problems so using a separate profile is ultmate solution. However be careful not to use WebDev thingy for more than just messing with code because then you risk ending up with 2 half-Firefoxes, with dif. set of bookmarks etc. Keep your WebDev bookmarks in there of course but then use normal for everything else. Ive given up on using 2 profiles because of this more than once. Just gets annoying. May be you have more discipline.

If you like the way of thinking/working go for it but I use like 40 extensions now, all kind of stuff including Greasemonkey, Firebug, Webdeveloper Toolbar - never a problem so this profiling might not be as much of a lifesaver as before most bugs got killed or extension got more usuable. I know the old horror stories of Firebug, have the feeling it is safe today - if set up right. Definitely works with Webdeveloper toolbar.

There are extensions dealing with profiles like Profile Manager and Synchronizer but too much of a good thing perhaps. After use of profilemanager all you need is a new shortcut, like shown in pic.

Okay! Thank you very much!

Obviously, when I'm done "learning" everything I need to know about WP, Atahualpa and e-commerce I have to go back and delve deeper into good old Firefox!

Like I said, I currently running Web Dev and Firebug alongside one another and Firefox is behaving itself -- I have six tabs open and FF is using just over 200.000 K of memory.

Thanks again! Jim

I'd recently seen a tutorial video (by a very clever young lady - can't remember who I'm afraid to say) which was real informative and then I came upon this thread, so I went ahead and installed Firebug, and it really is a great tool! Need to learn it though - yet another learning curve!

However by using Firebug I managed to solve a problem I was having with borders on images (a post I made here but never got answer).

However I'm a bit confused as to whether or not the changes you make are saved or you just make changes to test them and then go and apply to the css files in Editing Themes Options? I hope not it would be so good if the change is made there and then!

These instructions may be confusing. Try Firebug out, it won't actually change the code of your site so there's no harm in playing around with it.

??

This I don't quite follow!

With Firebug, you can change CSS styles on the fly, in order to see what something would look like with your new CSS styles.

That's just a preview though. To actually apply those new CSS styles you'd still have to manually edit your files or add CSS through the Atahualpa Theme Options.

After playing around more I found this out. Still a very useful too saves a lot of clicking back and fro".

One query brings another - does it matter how many things we add to the CSS Inserts box in the Atahualpa Theme Options?
Tks

No you can add as much as you want. I think I'll make the CSS edits a own menu tab with a much bigger textarea as it's been used so much