Want to read Slashdot from your mobile device? Point it at m.slashdot.org and keep reading!


Forgot your password?
DEAL: For $25 - Add A Second Phone Number To Your Smartphone for life! Use promo code SLASHDOT25. Also, Slashdot's Facebook page has a chat bot now. Message it for stories and more. Check out the new SourceForge HTML5 Internet speed test! ×
Mozilla The Internet Bug

Debugging CSS, AJAX and DOM with Firebug 55

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.'"
This discussion has been archived. No new comments can be posted.

Debugging CSS, AJAX and DOM with Firebug

Comments Filter:
  • by RotHorseKid ( 239899 ) on Friday January 12, 2007 @04:38AM (#17570452) Homepage
    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 (Score:4, Informative)

    by WarwickRyan ( 780794 ) on Friday January 12, 2007 @04:52AM (#17570538)
    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-27791 [slashdot.org]https://addons.mozilla.org/firefox/60/ > and the included DOM Inspector and you've got yourself an excellent debugging environment.
    • Re:Good but no cigar (Score:5, Informative)

      by jhewitt ( 120161 ) on Friday January 12, 2007 @05:12AM (#17570656) Homepage
      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.
      • > 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 wrot
        • Re:Good but no cigar (Score:5, Informative)

          by jhewitt ( 120161 ) on Friday January 12, 2007 @05:35AM (#17570802) Homepage
          > 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.
          • 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: (Score:3, Insightful)

        by Aladrin ( 926209 )
        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.
      • by Vraylle ( 610820 )
        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.
      • by Ramses0 ( 63476 )
        ...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!! :^)

      • In that case, allow me to exclaim:
      • 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.


  • by jhewitt ( 120161 ) on Friday January 12, 2007 @05:03AM (#17570608) Homepage
    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/ [getfirebug.com]

    It would be a shame if everyone installs 0.4 and misses out on all the great new stuff in 1.0.
    • 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.

    • by suv4x4 ( 956391 )
      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.
    • 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
    • It's hard to find the version number of the plug-in.
  • debug (Score:3, Funny)

    by mastershake_phd ( 1050150 ) on Friday January 12, 2007 @05:22AM (#17570718) Homepage
    I debug with chemicals, and sometimes a hammer.
  • by HxBro ( 98275 ) on Friday January 12, 2007 @05:57AM (#17570920)
    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 [htmlvalidator.com] you can quickly pick up and find the errors on the page.

  • by aymanh ( 892834 ) on Friday January 12, 2007 @08:53AM (#17571880) Journal
    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 [mozilla.org], Nuke This [mozilla.org]); 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: (Score:3, Informative)

      by maxume ( 22995 )
      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 [squarefree.com]

      These also come in handy:

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

      Zap Style Sheets can make myspace quite a lot easier to read.
      • 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!

    • 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.

  • Very Useful (Score:3, Insightful)

    by antialias02 ( 997199 ) on Friday January 12, 2007 @09:36AM (#17572164)
    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.
  • Firebug is awesome. that's how I learned the DOM.
  • Have been using for a while ... and yea, be sure to 1.x Beta [getfirebug.com] which is major improvement on what was already a great product.
  • 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.

"'Tis true, 'tis pity, and pity 'tis 'tis true." -- Poloniouius, in Willie the Shake's _Hamlet, Prince of Darkness_