I specially like firebug for giving me the ability to debug javascript through a console environment. It’s been extremely hard up until now to have something similar to flash’s console where you can send trace statements as code is executing to see what’s going on. Before, firebug, when I needed to debug something, i would add a javascript file to the page, it was my debug script that created an element on top of everything else, and a had a function called trace that would output what i sent to it to that element. It was rudamentery, but it worked. Now, with firebug, all I have to do is call the console.debug() or any of the other console functions. It’s been really helpful and has lowered my debugging time on javascript projects.
If you must debug in IE, helpful tools are:
“Javascript Shell for IE” - a bookmarklet that gives you a command-line for executing Javascript, like Firebug
Microsoft Script Editor - Firebug-like IDE that pops up when a JavaScript error occurs. A good alternative when Firebug’s debugger isn’t working properly (e.g. when it gets the line numbers wrong). You can get MSE by downloading the MS Office trial (big download). If you don’t want to do that, you can download the inferior, older, buggier Microsoft Script Debugger.
There’s a problem with the current version of Firebug and FF 2.0.0.3 that keeps Firebug from being able to display CSS in the right-hand pane. I’ve been using all the suggestions for enabling it, none of which seem to work for me. I’m sure it’ll be fixed in due time, though.
No one has mentioned Fiddler… It’s a debugging proxy that gives details you only wish you had a way to get… Ever try to debug a blown AJAX call… See the content of the requested page along with other tidbits in fiddler… http://www.fiddlertool.com/fiddler/
Correction: finally got the fix to work. Remove FF, delete the “/Program Files/Mozilla Firefox” folder, and reinstall FF. Then add Firebug again, and it works.
Weird.
Firebug is one of the best reasons not to want to drop FF for IE, though I have to admit that the latest incarnation of the IE Developers Toolbar is a very nice piece of work. In combination with IE7Pro, IE almost works as nicely as FF 
I apologize in advance, but “me too!”. When trying to use IE or any IDE for twiddling with html/css, it’s like being blindfolded/handcuffed/gagged. Nothing beats bringing the page up in the fox and tweaking the css/dom realtime to fix a rendering/javascript problem.
I’m not primarily a designer, but , but it far beats any of the other tools available to me (other than my brain). The only bad thing is it doesn’t allow drag and drop modification in a WYSIWYG fashion, but that’s probably not far away.
Yet another “me too” post, but I love both these tools.
Live HTTP Headers is also useful for checking whether content is cached, gzip-encoded, etc.:
You Forgot IE tab and IE tab lite. Develope Crossbrowser in realtime with the tools you love!
I can’t say I use Firefox as an IDE - I’ve never really tried - but thanks to the bountiful plugins it is the most important tool in my development arsenal.
http://www.morningtoast.com/index.php/2006/08/why-i-use-firefox/
From a casual browsing standpoint, I really don’t have much preference - both load web pages just fine. But when people ask I say FireFox because that’s what I’m using for 95% of browsing because that’s my primary browser I use for development (which is pretty much daily).
I would suggest http://www.debugbar.com and the highly experimental CompanionJS http://my-debugbar.com/wiki/CompanionJS/HomePage for a IE IDE … but that’s if you really want to work with IE!
Firebug is also a great way to dig into sites that have a style, feature, or function that you’d like to understand. When I see a particularly shiny style, for example, pulling up Firebug and examining individual elements for what styles apply to them is a great way to get “how’d they do that?!” answers.
As for preferring IE7, I don’t have that luxury. My Windows work is done exclusively at the work office, and they haven’t even patched XP to SP2 yet, let alone approved IE7. Firefox has served me well across all three platforms I work in (Win, Linux, OS X), and with the addition of the Google Browser Sync extension[1], I’ve been able to move between them seamlessly.
I find myself reaching for LiveHTTP Headers all the time as well- http://livehttpheaders.mozdev.org/ . It’s particularly valuable if you’ve got a cranky flash movie that’s dropping half it’s damn assets and you don’t know whether the stoned flash freelancer linked them wrong or the drunken sysadmin misconfigured the mime types again…
I love both tools, and use both tools. In addition, for ColdFusion Programmer’s there is a firebug add-in, that will interact with the debugging info from coldfusion and display the debug info from with in FireBug.
It’s called ColdFire at http://coldfire.riaforge.org/
I also highly recommend the Server Switcher Extension for Firefox, for example if you want to easily switch between your development, production, staging, etc servers…
You can install ServerSwitcher at https://addons.mozilla.org/en-US/firefox/addon/2409
What it allows to create aliases between different servers of yours, and puts an icon in the same spot that the rss icon shows up in the location bar, and let’s you switch servers.
That’s what I use for basics…with browsing/developing.
Part of my daily surfing regimen is Firefox’s plug-in ability to switch a tab to Internet Explorer browsing mode. “Oh no!”, I might say, "How am I to test this page in IE? I’ll have to open Internet Explorer… WAIT!"
How very convenient.
Lots of other reasons that FireFox has a place close to my heart, many of them plugin-related.
Thanks for the article. I’ll give it a shot, i’ve been using dreamweaver for a quite long time, and it’s kinda slow you know ?.
Regards!
I agree that the IE Developer Toolbar compares to the WDE but, especially for IE7, it is buggy as hell. Mine crashes a lot and is really slow. Maybe there is an update I’m missing…
I must confess that I often use Firefox with Firebug for debugging websites, though I generally don’t want to touch the horror that is Firefox even with a stick. I’m looking forward to Opera 10, due out later this year, which will finally include native web developer functionality, the only thing missing. Yes, I know they have dev tools and there were bookmarklets and custom menus even before, but…
Anyway, for the general browsing experience, nothing can beat Opera. I just wish it was a little bit more developer-friendly (though even in that regard it blows away any other browser out-of-the-box, as with every other functionality, which usually appears copies in other browsers 2-5 years later).
Wow! I’m new to web development, and I’ve never heard these tools existed. I will definitely check them out. Thanks for the great post!
Wow that’s really weird I just wrote about this yesterday:
http://www.codeandcoffee.com/2007/04/05/three-firefox-plugins-to-greatly-help-web-developers/