Catch up on stories from the past week (and beyond) at the Slashdot story archive

 


Forgot your password?
Close
typodupeerror
×
Mozilla The Internet Bug

Debugging CSS, AJAX and DOM with Firebug 55

Posted by CowboyNeal from the when-the-bugs-bite dept.
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 More

Debugging CSS, AJAX and DOM with Firebug

Comments Filter:

  • Perfect Tool (Score:4, Funny)

    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.

  • last semester (Score:-1, Redundant)

    by Lehk228 ( 705449 ) on Friday January 12, 2007 @04:46AM (#17570500) Journal
    i REALLY could have used this last semester during advanced web design class.

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

      • Re:Good but no cigar (Score:2)

        by WarwickRyan ( 780794 ) on Friday January 12, 2007 @05:26AM (#17570752)
        > 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 (Score:0)

        by Anonymous Coward on Friday January 12, 2007 @06:40AM (#17571164)
        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 (Score:3, Insightful)

        by Aladrin ( 926209 ) on Friday January 12, 2007 @09:35AM (#17572160)
        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 (Score:0)

          by Anonymous Coward on Friday January 12, 2007 @08:34PM (#17584024)
          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.

      • Re:Good but no cigar (Score:2)

        by Vraylle ( 610820 ) on Friday January 12, 2007 @09:47AM (#17572268) Homepage
        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 (Score:2)

        by Ramses0 ( 63476 ) on Friday January 12, 2007 @11:14AM (#17573464)
        ...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 (Score:0)

        by Anonymous Coward on Friday January 12, 2007 @11:42AM (#17573996)
        does fire bug have a profiler?

      • Re:Good but no cigar (Score:2)

        by Ayende Rahien ( 309542 ) on Friday January 12, 2007 @05:26PM (#17581232)
        In that case, allow me to exclaim:
        Thanks!

      • Re:Good but no cigar (Score:2)

        by Seraphim_72 ( 622457 ) on Friday January 12, 2007 @06:35PM (#17582384)
        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 (Score:0)

      by Anonymous Coward on Friday January 12, 2007 @09:44AM (#17572250)
      But would any of that have helped you place your HTML tags right?

  • Link to old extension (Score:5, Informative)

    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.

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

  • Exellent tool but, but not for web developers (Score:0, Interesting)

    by Anonymous Coward on Friday January 12, 2007 @05:31AM (#17570770)
    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 [nextapp.com] or Wt [sf.net] 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 (Score:4, Insightful)

      by Azarael ( 896715 ) on Friday January 12, 2007 @09:49AM (#17572290) Homepage
      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.
    • 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 (Score:5, Informative)

      by kae_verens ( 523642 ) on Friday January 12, 2007 @10:31AM (#17572818) Homepage
      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!

      • Re:Exellent tool but, but not for web developers (Score:-1)

        by Anonymous Coward on Friday January 12, 2007 @11:31AM (#17573768)
        > 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.

        It's just I would think that increased productivity and time wasted are contradictions and to increase productivity you should stop wasting time.

  • 10 css errors on this page (Score:3, Interesting)

    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.

  • Venkman (Score:0)

    by Anonymous Coward on Friday January 12, 2007 @07:01AM (#17571270)
    How does it compare to Venkman?

  • Not only for development (Score:5, Interesting)

    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.

  • Can Firebug help debug performance problems? (Score:-1, Redundant)

    by Anonymous Coward on Friday January 12, 2007 @09:16AM (#17572036)
    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?

    AJAX applications just aren't solid or stable, for the most part. We tried to integrate a number of them into our network here, and frankly each attempt went terribly. I'd like to think it was just one application vendor or AJAX toolkit that was problematic, but that wasn't the case.

    We found a number of common problems with every AJAX application we tried. Just for the record, the applications included three CMS systems, a Web-based email system, two groupware systems, and three Web forums.

    The first major problem with one of resource usage, on both the client-side and the server-side. Client-side, many AJAX applications consume far too much CPU time. From our investigation, it was due to the use of poor JavaScript algorithms that'd consume 100% of the CPU in some cases, for minutes on end. The applications "worked", in that they'd provide the correct result. It'd just take them far too long to get it done.

    On the server-side, they'd again result in excessive CPU and RAM consumption. For one of the Webmail systems, we could only handle a fifth (yes, 20%) of what our old Perl-based system could. And that was on a quad-core Opteron system with 8 GB of RAM! The Perl-based system was on a couple of 200 MHz Pentium systems, each with 128 MB of RAM. Even after assistance from the AJAX-based Webmail system's vendor, we were only able to handle roughly 90% of the number of transactions of our older system.

    The second major problem is that of usability. Many of the AJAX apps we tried didn't play well with browser tabs, for instance. Some even fucked around with text input areas, resulting in copy-and-pasting no longer working. One application even prevented the text within a text field from being highlighted! We thought these problems may be browser-specific incompatibilities, be we ran into this same problem with Firefox, Safari, Opera, and even IE6! After talking with the vendor, they admitted these were known problems, and no solutions were presently available.

    The third major problem is a lack of quality. Many AJAX applications are poorly coded and poorly designed. I think the main reason for that is because it's such an unstructured technology. Even competent software developers run into problems that cannot be solved easily, and thus must resort to hackish techniques to overcome these inherent problems.

    The fourth major problem was that the users hated the systems. Of the few systems we managed to roll out successfully, the users absolutely hated them. Their complaints were a combination of the above three factors. The AJAX applications would not do what the user wanted. The AJAX applications did not conform to common practices (eg. copy-and-paste, textbox text selection, etc.). The AJAX applications ran far too slowly, even on fast client machines. The AJAX applications just plain didn't work!

    All of our AJAX trials were abysmal failures. That's why we're sticking with the existing Perl- and Java-based systems that we currently use. They perform far better on much fewer resources, actually do what the users want, avoid violating the most common of conventions, and they do what they're supposed to. I'm sorry to say it, but AJAX might just be the worst technology I have ever had to deal with.

    http://it.slashdot.org/comments.pl?sid=215452&cid= 17491660 [slashdot.org]

  • 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 rocks (Score:1)

    by motherball ( 514667 ) <greg@naug[ ]n.org ['hto' in gap]> on Friday January 12, 2007 @11:01AM (#17573268)
    Firebug is awesome. that's how I learned the DOM.

  • Firebug ROCKS!!!! (Score:2)

    by xmas2003 ( 739875 ) * on Friday January 12, 2007 @12:13PM (#17574574) Homepage
    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.

  • Good timing (Score:2)

    by Anthony ( 4077 ) * on Friday January 12, 2007 @05:06PM (#17580838) Homepage Journal
    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.

Slashdot Top Deals

"An organization dries up if you don't challenge it with growth." -- Mark Shepherd, former President and CEO of Texas Instruments

Close