How To Debug Web Applications With Firefox

Debugging is one of the most painful parts of developing web apps. You have to deal with browser inconsistencies with HTML, CSS and javascript, let alone the difficulty of debugging javascript itself.


This is a companion discussion topic for the original entry at http://betterexplained.com/articles/how-to-debug-web-applications-with-firefox/

[…] BetterExplained has a good quick quide to Debugging Web Applications with Firefox listing the extensions that can be used and how-to tips on using Mozilla Firefox to debug web pages. Add to Del.icio.us Add to Digg […]

[…] Read more on BetterExplained.com […]

Fiddler (http://www.fiddlertool.com/fiddler/) is a good replacement for Live HTTP Headers, when you have to use IE.

Thanks Graham – I’ll check it out!

The same things you do in Web Developer toolbar can be done in Firebug with even more convenience. So why not use one great tool for the job instead of such separation?

I find Firebug is great for debugging javascript, but Web Developer toolbar is better for designing your site. It has awesome tools for showing/hiding images, measuring pixel distances onscreen, validating CSS/HTML, resizing your browser, viewing the HTML source of iframes and more.

I can also vouch for Fiddler. I use it since I use IE and find it invaluable.

[…] Of course, the actual headers and protocols are much more formal (monitor them with Live HTTP Headers if you’re so inclined). […]

[…] Better Explained ist ja irgendwie auch ein sehr vielversprechender Name für eine Website. Dort finden wir aktuell: How To Debug Web Applications With Firefox, eine saubere Auflistung der drei essentiellen Debugging-Hilfen für Webanwendungen: die Web Developer Toolbar, Firebug und Live HTTP Headers, sowie jeweils eine kurze Anleitung, wie man die genannten Extensions benutzen kann. Level: Starter. [via roScripts: Top developer tools of the month.] […]

[…] How To Debug Web Applications With Firefox […]

[…] Tabiki, gerçek başlık ve protokolller daha resmidir (ilginizi çekiyorsa Live Http Headers i inceleyebirisiniz). […]

This is a great guide

Thanks Funky, glad you liked it.

There is something like web developer toolbar for IE called Internet Explorer Developer Toolbar: http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

It’s not bad.

Hi Tim, thanks for the tip.

IMHO, Microsoft Script Editor is at least as good as firebug for IE script debugging. For those who have ms office installed, you may find it as mse7.exe under you ms office folder, so it’s almost free.
Visual studio is also pretty handy as a js debugger for IE.

[…] In Browser: Use FireBug or Live HTTP Headers to see the HTTP response (304 Not Modified, Cache-Control, etc.). In particular, I’ll load a page and use Live HTTP Headers to make sure no packets are being sent to load images, logos, and other cached files. If you press ctrl+refresh the browser will force a reload of all files. […]

I was debugging javascript using alerts and div log (similar to yours) until now. Thanks for sharing!

Thanks, glad you liked it.