Matthew

Where Firebug beats IE dev tools

by Matthew Hintzen on 6. March 2012 14:34

Microsoft is known for making great developer tools, Hell that’s why I’m a self confessed Microsoft FanBoi, it’s just EASY AS to program using their tools… with one exception, Ajax calls.  The built in tools in Visual Studio / IE are great for a lot of things but Asynchronous Javascript calls is not one of those things.

This post is for @tobint and @HumanCompiler on twitter.  I’ve been trying to defend using IE as my primary browser to my fellow worker @redjungle (Phil Gale to his friends), but as we have done more and more advanced Browser based applications with lots of jQuery and javascript and Ajax calls I finally realised that ultimately he was right.  For that job the correct tool is Firefox.  I complained about it to @HumanCompiler (suggesting that MS buy up company that makes firebug and make it the tool for IE Ajax debugging) I was referred to @tobint, who admitted he wasn’t a fan of FireBug, but wanted to know why I like Firebug, how it is “better” then the built in IE tools.

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

[HttpPost]
public ActionResult

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.