Slashdot Mirror
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.'"
You're definitely at a disadvantage as an AJAX developer when you are not using it.
/., there goes my advantage.
Well, now its on
Nobody writes jokes in base 13. - DNA
i REALLY could have used this last semester during advanced web design class.
Snowden and Manning are heroes.
Firebug is an excellent and extremely useful extention, however alone it does not provide everything you need.
r l2html-27791https://addons.mozilla.org/firefox/60/ > and the included DOM Inspector and you've got yourself an excellent debugging environment.
Combine Firebug with the Web Developer Toolbar ahref=https://addons.mozilla.org/firefox/60/rel=u
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.
I debug with chemicals, and sometimes a hammer.
Libertarian Leaning Political Discussion Forum.
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.
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.
How does it compare to Venkman?
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.
python>>> q="'";s='q="%c";s=%c%s%c;print s%%(q,q,s,q)';print s%(q,q,s,q)
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?
= 17491660
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
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.
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.
Firebug is awesome. that's how I learned the DOM.
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.
Hulk SMASH Celiac Disease
A great, open-source IDE with full FireFox debugging support: http://aptana.com/ and http://aptana.tv/
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: Where nerds gather to pool their ignorance