Trust me @tobint as a microsoft fanboi, it takes a lot to make me use someone else’s tools, (hell I used TFS 2005… so that shows I have a high pain threshold), but I just can’t disagree anymore. If a tools job is to get in, get the info I need, and get out (and I believe that is what a tool should do) than for Ajax Firebug wins.
Let me show you with screen shots.
I have a jQuery Modal that asks for some input information, the user clicks it and then clicks save and an ajax call is made. Now of course my code wouldn’t have ANY bugs in it, so it will all work, but let’s imagine that maybe someday I don’t code up my
correctly (yeah, I know, like that would ever happen) like maybe I put in a throw new NotImplementedException( ); by accident
So here is what I have to do to see the problem in IE
I load up the page and get my model and all I see is this
And it just sits there doing nothing (except spinning), no problem let’s fire up the Dev Tools by pressing F12… Whoops for some reason the F12 isn’t working (maybe that modal is interfering, not sure, but that’s ok, I’ll just go get it from the tool tips at the top)
It’s just two clicks, and here is what I get
Ok, so without looking at the help files, where do I go?, gee I’m not sure, maybe I need to refresh my page, and it will show me something.
so I do that and … Nope still nothing “obviously” wrong… Now at this point I happen to know (cause @tobint told me) that I can use the network tab, so I’ll go there.
Hmmm, nothing, I have to click “Start Capturing” I guess, hang on a moment didn’t I have to click on the Open Developer tools, doesn’t it seem like if I am asking for development assistance with my web page, that it should start capturing by default, I mean isn’t that really the logical thing to have happen? Oh well, enough whinging, click the button and refresh the page again.
Now I get
It actually took me putting in this screen shot before I visually located the problem line, can you find it in one glance? It’s the one that has the Red 500 (not exactly obvious, is it?). Ok so click on that row and you get… a highlighted row… Ok, so double click on it
Ok this looks a little more useful, so let’s go tot he Response header and see what the return was
Yeah… that’s not too helpful, Let’s go look at the Response Body tab, maybe that will have more information.
Well there is the exception detail, inside a bunch of HTML, now I can extract the information I need from this page, but it isn’t going to happen in a glance, I’m going to have to do a little visual parsing.
Keep in mind when you are doing Web 2.0 development this is the most common action you will have to debug
Now let’s see the steps necessary in Firefox using Firebug.
I open Firefox and follow exactly the same steps as I did in IE (no pre-prepping the browser) to get to the problem screen
I don’t know the keyboard shortcut for Firebug, so I will just go up and click on the icon for it (only one click)
And I have
I don’t know about you, but I’m pretty sure I KNOW EXACTLY where thing broke after just one click. Let’s make sure, let me click on that bit row that is RED, and after a single click I have.
Well that’s good, here is my response html that I can parse thru and find the error, but wait, what’s that “HTML” tab? let’s click on it and see…
That sure seems a lot easier to read / debug now wouldn’t you agree @tobint?
So with IE, even if I did everything as quickly as I could it would take 8 clicks to find the information I want, and even then I would have to parse the raw HTML error page.
Firebug in Firefox took 3 clicks all in one window.
Gentlemen of the Jury… I rest my case!
Please feel free to let me know what you think of my comparison at @matthewhintzen on twitter.