Debugging CSS, AJAX and DOM with Firebug

prostoalex writes "Joe Hewitt of Parakey in the latest Dr. Dobb's Journal provides a detailed overview of the Firebug extension for Firefox: 'Firebug breaks the page down into a set of tabs that depict its most important aspects — HTML, CSS, JavaScript, the DOM, network activity, and a console for errors and log messages. No tab is an island; Firebug lets you browse code just as you browse the Web by presenting objects as hyperlinks that can take you from one view to another.'"

Comments

Perfect Tool

[RotHorseKid]

You're definitely at a disadvantage as an AJAX developer when you are not using it.

Well, now its on /., there goes my advantage.

Good but no cigar

[WarwickRyan]

Firebug is an excellent and extremely useful extention, however alone it does not provide everything you need.

Combine Firebug with the Web Developer Toolbar ahref=https://addons.mozilla.org/firefox/60/rel=ur l2html-27791https://addons.mozilla.org/firefox/60/ > and the included DOM Inspector and you've got yourself an excellent debugging environment.

Re:Good but no cigar

[jhewitt]

The DOM Inspector is not part of the Web Developer extension - it is included with Firefox itself. Web Developer simply includes a shortcut to DOM Inspector.

DOM Inspector was actually written by the same person who wrote Firebug: myself, 6 years ago. There is no reason to use DOM Inspector any longer. Firebug does everything it does and more, but with a much more pleasant and modern user interface.

Re:Good but no cigar

[WarwickRyan]

> The DOM Inspector is not part of the Web Developer extension - it is included with Firefox itself

That's what I said. The included DOM Inspector extension. As in included (with) the browser. I should have been a little bit clearer on the context though..

DOM Inspector's excellent for javascript debugging, as you can use the full screen easily and can switch windows fast (extremely useful for debugging the tangle of JS in some webapps).

> DOM Inspector was actually written by the same person who wrote Firebug: myself, 6 years ago.

I guess a thanks is in order! Both applications are excellent and extremely useful.

There's not much missing from them, either - the only function I can think of is an ability to search the DOM - both the objects and the data in them (for finding js variables).

Re:Good but no cigar

[jhewitt]

> DOM Inspector's excellent for javascript debugging, as you can use the full screen easily and can switch windows fast (extremely useful for debugging the tangle of JS in some webapps).

Perhaps you haven't tried Firebug 1.0, which allows you to open Firebug as a separate window. Versions prior to 1.0 did restrict you to a panel at the bottom of the browser.

Re:Good but no cigar

[WarwickRyan]

Funny you should say that. Just downloaded it after seeing mention a few comments down.

You've really nailed it - this version is absolutely fantastic. Brilliant.

Re:Good but no cigar

[Anonymous Coward]

There is no reason to use DOM Inspector any longer.

There is, alas. It works with my chosen browser, SeaMonkey, whereas Firebug doesn't (as far as I'm aware, and I'd gladly try out Firebug if it did).

Re:Good but no cigar

[Aladrin]

Please allow me to kiss your feet. ;)

But seriously, Firebug (and the webdev extension) have made my job a LOT easier. (And my co-workers, too.) Problems that took me 30 minutes to an hour in the past to find, I can now find them in seconds. It's been a god-send. Thank you so much.

Re:Good but no cigar

[Anonymous Coward]

But would any of that have helped you place your HTML tags right?

Re:Good but no cigar

[Vraylle]

I'm sure this thread is/will be filled with gushing posts of thanks. I'd hate to be left out, so...thanks! Firebug has been a wonder and a lifesaver on countless occasions.

Re:Good but no cigar

[Paradise Pete]

There is, alas. It works with my chosen browser, SeaMonkey, whereas Firebug doesn't

What difference does it make what your browser of choice is? You're developing, not browsing.

Re:Good but no cigar

[Ramses0]

...except for the ability to access / look at the Javascript object for a dom node in a nice convenient way (ie: document.getElementById('foo') in Firebug Console, v. dir( $('foo') ), v. domInpsect: 'foo'). I'm pretty sure there's a way to get at the JS view of the dom node with firebug, but it's not very straightforward by default.

But you (I) certainly use the Dom inspector less after Firebug, and all hail Joe and his cohorts!! :^)

--Robert

Re:Good but no cigar

[Anonymous Coward]

does fire bug have a profiler?

Re:Good but no cigar

[Ayende Rahien]

In that case, allow me to exclaim:
Thanks!

Re:Good but no cigar

[Seraphim_72]

I have to admit, I hated developing in javascript. But when I got firebug a while back I could have cried for joy. You have made a fantastic thing. I bow down to you Sir. As it stands, I have caught the Ajax bug because of firebug, Thank You.

Sera

Re:Good but no cigar

[Anonymous Coward]

and you make how much an hour?
Shut up and pay the man. We all owe him money even if he released the extension for free.
At least donate 5 dollars or something.
You and 4 co-workers can find 4 quarters a piece can't you?

thanks for the app!
not only does it make all the advanced stuff easy but for a total beginner like me it actually makes javascript easier to learn because I have the console to play around in. This year makes the 4th time in 6 years that I've tried to learn javascript. The first time that I'm actually learning enough to be productive. And thanks to firebug (and prototype) I'm very very very productive.

Link to old extension

[jhewitt]

The article links to the wrong page for Firebug, it is currently pointing to the old version of the extension (0.4.1). Firebug 1.0 beta is a dramatic step ahead of 0.4, and you can get it at http://www.getfirebug.com/

It would be a shame if everyone installs 0.4 and misses out on all the great new stuff in 1.0.

Re:Link to old extension

[Anonymous Coward]

Any chance of a part to SeaMonkey?

Re:Link to old extension

[ErroneousBee]

Hey everybody! I've just installed a browser extension from a site I've never seen before, based on a recommendation on a website! Would you like my credit card numbers?

Seriously. I've just installed it, seems OK. I hope the annoying reporting of bugs that don't exist when using window.open() is gone.

Re:Link to old extension

[suv4x4]

As a long time Firebug user I want to thank you the excellent product you gave to the community!

The new version is amazing as well, I just started to play with it.

It won't be an overstatement to say that this sole extension is saving web developers worldwide thousands of debugging hours: every single day.

Re:Link to old extension

[Anonymous Coward]

Any chance of a part to SeaMonkey?

I dunno, maybe he could play the dwarf. What credits does he have?

Re:Link to old extension

[Anonymous Coward]

s/part/port/ obviously

Re:Link to old extension

[professorfalcon]

It's hard to find the version number of the plug-in.

debug

[mastershake_phd]

I debug with chemicals, and sometimes a hammer.

Re:debug

[rodia]

> and sometimes a hammer.
for the big ones, eh?

Exellent tool but, but not for web developers

[Anonymous Coward]

If you enjoy using FireBug, it is likely you are not really productive...

Don't get me wrong, I think the tool is excellent, but do you really want to go bug chasing at this low level of abstraction ? You can easily waste hours debugging like this, figuring out what exactly happened (or didn't happen) ...

I think you are better off using a high level AJAX toolkit like echo2 or Wt instead, blame their developers for any JavaScript or other unexpected trouble, and let developers of these toolkits enjoy FireBug in ironing out these bugs.

Re:Exellent tool but, but not for web developers

[Azarael]

Not everyone has the option of integrating a whole ajax toolkit into their work. Anyway, ajax is far from the only thing that firebug is useful for. The error reporting makes it a lot easier to track down and repair general javascript problems than with the existing console.

Re:Exellent tool but, but not for web developers

[erlando]

Surely you are kidding or trolling - maybe both?

FireBug with its plethora of functions is indispensable for any web developer. In my mind it's clear that you never even looked at it.

FireBug is not for ajax only. And as another poster noted not everyone has the freedom or willingness to use 3rd party ajax-frameworks.

Re:Exellent tool but, but not for web developers

[kae_verens]

Are you totally mad? How can something as useful as this do anything but increase productivity? Today, for example, I needed to find out why a certain element in a layout was screwing up the design. All I needed to do was turn on Firebug's inspector, click the element, and read through the list of specific CSS lines that affected that element, and there it was! Total time wasted - 3 minutes. If Firebug had not been installed, I would have had to read through three CSS sheets, inspecting each line and figuring out if it could affect the element. Total time wasted could have been measured in hours, then!

10 css errors on this page

[HxBro]

I've been using firebug for a while, it's great, shows up errors on pages quickly and easily. This page alone has 10 CSS errors apparently :)

Between firebug and the html validator extension (requires html validator) http://www.htmlvalidator.com/firefoxext.php you can quickly pick up and find the errors on the page.

Re:10 css errors on this page

[jasonwea]

This addon does not appear to be Free (as in speech) and also only runs on Windows.

I much prefer HTML Validator. I find both the Tidy and W3C validators incredibly useful. The Tidy function to clean up existing markup is also rather handy.

Re:last semester

[pasamio]

I picked up on Firebug first time Slashdot mentioned it when linking to a Google blog over a year and a bit ago that was talking about AJAX. Plus, you never know whats out there until you spend a bit of time reading through things (and every few months I trawl through extensions.mozilla.org to find interesting extensions) - especially when you're looking at a difficult way to do the task initially.

Venkman

[Anonymous Coward]

How does it compare to Venkman?

Re:Venkman

[jimmy_dean]

Venkman doesn't hold a candle to Firebug. Firebug is fast, easy, nice looking, and blows the features of Venkman out of the water. Give it a try, you'll find yourself say Venkman...what's that?

Not only for development

[aymanh]

Not only does Firebug provide excellent tools for debugging web applications, but it also has facilities for modifying web pages on the fly. Sometimes there is an annoying div on a webpage that I want to get rid of while reading, so I open the Firebug console and set its display property to none. There may be other extensions that provide similar features (Adblock Plus, Nuke This); however, the JavaScript console in Firebug is the ultimate tool for running your own code on 3rd party web pages, for those who know Javascrpt, that is.

Furthermore, the JavaScript console can be very helpful for those starting to learn JavaScript, like how the Python console is for Python beginners.

Re:Not only for development

[maxume]

If you don't feel like installing the extension, you can get by with a bookmark:

http://www.squarefree.com/bookmarklets/webdevel.ht ml#shell

These also come in handy:

http://www.squarefree.com/bookmarklets/zap.html

Zap Style Sheets can make myspace quite a lot easier to read.

Re:Not only for development

[Nappa48]

Those links are pretty awesome!

I'm actually making an HTML/JS/CSS etc Sandbox that i can hook onto a website so i can play around with things.
Still needs alot of testing though, and sadly i don't have alot of free-time just now.
Just when i managed to get the iframing to work!

Re:Not only for development

[josepha48]

My only wish is that IE had the same tool. I use this a lot for debugging / developing and testing my pages, but then when I try some things in IE, IE just gives script error or shoots me into its debugger without a way of really seeing what is going on in the page.

I also like it when I come to pages and see the little red error, so I can tell who spends time on their script.

This is an awesome tool and I always recommend it to ANYONE who is doing any JavaScript development.

Re:Not only for development

[after fallout]

http://www.microsoft.com/downloads/details.aspx?fa milyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displa ylang=en

About as close as you are going to get at the moment. I wish for it too.
Something to think about: build you page in Firefox and get it perfect there, only then should you try to go out of your way to make it work ok in IE (much easier than the other way around).

Very Useful

[antialias02]

Rarely a day goes by when I don't find some use for Firebug, but I concur with the sentiment that the Web Developer's Toolbar is often needed to create a powerhouse set of dev tools for the Web. If all you have are these two, you're a head and shoulders ahead of the game.

Re:Can Firebug help debug performance problems?

[Anonymous Coward]

Cut and paste troll. Do you really have that little to do with your time that you feel the need to copy the same comment into every Slashdot article that includes the word "Ajax"?

Re:Can Firebug help debug performance problems?

[Anonymous Coward]

I don't think the GP's post is a troll. I've tried to use Ajax for some hobby web apps I built recently, and I experienced them running too slowly, too. I'd really like to get them deployed, but I really don't know which parts of the app are running slowly, or if there are any bottlenecks, and so forth. It'd really help me out a lot of there was a tool for easily profiling Ajax web apps.

Firebug 1.0 is FANTASTIC.

[Civil_Disobedient]

Joe, I just wanted to take this opportunity to thank you for your work with FireBug. It has saved me hundreds of hours of debugging time! I work with a Java-based development team who were giving me a ton of shit for our last project, a webapp that used quite a bit of Ajax. They derided JavaScript for a number of reasons (many well-founded), but their biggest problem was that it was nearly impossible to debug without tons of alert boxes. With the first release of FireBug I was finally able to shut them up! "Look, object inspection! Breakpoints! Huzzah!"

When we finished the app and started unit testing, they again gave me grief over the fact that you couldn't properly test for coding inefficiencies. With FireBug 1.0's built-in profiler, I again have an answer to them.

FireBug is THE killer-extension for web developers. Your work is extremely appreciated.

Re:Can Firebug help debug performance problems?

[kae_verens]

> Is it possible to use Firebug as a profiler of AJAX applications? Can we use it to help us debug some of the serious performance problems me and my coworkers noticed with AJAX applications?

yes.

there is a button called "Profile". you click that, run your script, then click "Profile" again, and a list of functions and how much time they took will show up.

firebug rocks

[motherball]

Firebug is awesome. that's how I learned the DOM.

Re:Can Firebug help debug performance problems?

[sammyo]

If not a troll then some other variety of lazy cut&paste, I have seen the identical post at least once before.

The theme that Ajax/Web 2.0 (cue violins) have too high glitz to function ratio is not unwarrented, repetitive cut&paste postings does obscure that point.

Firebug ROCKS!!!!

[xmas2003]

Have been using for a while ... and yea, be sure to 1.x Beta which is major improvement on what was already a great product.

Re:Can Firebug help debug performance problems?

[NickFitz]

It'd really help me out a lot of there was a tool for easily profiling Ajax web apps.

There is. It's called Firebug.

Aptana IDE...

[Anonymous Coward]

A great, open-source IDE with full FireFox debugging support: http://aptana.com/ and http://aptana.tv/

Re:last semester

[Anonymous Coward]

i REALLY could have used this last semester during advanced web design class.

What did you do, coded some cool <marquee> s using FrontPage?

Re:last semester

[Lehk228]

yup, that's exactly what i did

Good timing

[Anthony]

Just installed Firebug a couple of days ago to look at a wierd "works in IE, not in firefox" problem. Haven't nailed it yet as is could be server-side but was impressed by the comprehensive coverage of the tool.