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
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.
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.
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.
I always wondered where this setting was...
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?
-> Sometimes, you just gotta break free from the shackles of proprietary code.
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)
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.
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.
Remember, there are no stupid questions. But there are a lot of inquisitive idiots.
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.
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!
> 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 is awesome. that's how I learned the DOM.
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.
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
There is. It's called Firebug.
Using HTML in email is like putting sound effects on your phone calls. Just say <strong>no</strong>.
yup, that's exactly what i did
Snowden and Manning are heroes.
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