Hacker News new | ask | show | jobs
by pavel_lishin 5720 days ago
I develop exclusively in Firefox, and test on other browsers, so I use Firebug all the time. How well do other built-in tools compare to it?
4 comments

* The Webkit Developer Tools (Safari, Chrome) are roughly on-par. They progress faster and have some features Firebug doesn't, but they don't have plugins and there are some nice features of Firebug they don't replicate (built-in introspection of jquery collections). They're way fucking faster than Firefox with Firebug enabled though, that's a big plus. They also implement most of the Firebug `console` API. The only tool which is not as good as Firebug's would be the DOM inspector, as it's a bit harder to edit nodes in line (though it's not actually hard).

* IE8's developer tools are a start, but they're slow, buggy and tend to crash a lot (either a soft-crash where some features suddenly stop working, or a hard crash where the inspector takes down the browser). I think they only implement `console.log`, and it only works when you have the tools open otherwise it generates an error

* Opera's Dragonfly... well I haven't tried it in a long time, though I mean to do it soon-ish: during last week's Opera "AMA" on reddit I was told good progress had been made.

These days I use Safari as my main development browser, and it's very enjoyable.

edit: addendum, there are also things simply done differently. For instance Firebug displays the ajax requests in the console, which is something I find spammy but you may like. On the other hand the Webkit dev tools not only have a dedicated console tab but you can access a JS console from any tool (by pressing [ESC] in Safari, don't know the chrome shortcut, might be the same, it will slide up a console to half-height in the manner of e.g. OSX's Visor) which is very handy, especially in the debugger.

I stopped going back to Firebug and stuck with Safari about a year ago. I still fire up Firefox on occasion to compare errors when I'm really stumped, but it's more a matter of getting another perspective than it is a shortcoming in the Web Inspector.
Chrome's developer tools are quite nice. They provide a lot of information in a pleasing fashion - both functionally because it gets you access to everything you needed when you decided to install Firebug, and aesthetically, because it all looks good. I also found that Chrome's tools excel in one area especially, that is, locating errors in a document and quickly getting to the root cause. I recently picked up someone else's pile of HTML and javascript and was able to quickly make sense of what was wrong and fix it.

I still use Firebug at work because I don't have Chrome there, but for home projects I've pretty much switched entirely.

I can only speak for the Chrome/Safari WebInspector, and they're good, but I find myself going back to Firebug if I have to do any serious debugging - personally I find there to be a big step up in usability with Firebug meaning I can work faster.

It'll be interesting to see what happens to development tools when Firebug goes cross-browser.

> I find myself going back to Firebug if I have to do any serious debugging

Why? What difference do you see between the browsers debugging-wise?

> Why? What difference do you see between the browsers debugging-wise?

Feature-wise, very little. But as I said - I do find I can work faster with Firebug - I much prefer the the DOM inspector (one click node editing, css editing, the fact that it live updates the DOM as it is changed via any JS running on the page) and the console (DOM/JS object inspection and having XHR logging in the console itself and not on another tab). Plugins such as FireQuery also make a difference for my needs.

> one click node editing

Yes the Webkit DOM inspector lacks that.

> css editing

It does have that on the other hand.

> the fact that it live updates the DOM as it is changed via any JS running on the page

My DOM inspector does seem to do that as well, though it doesn't highlight the altered subtrees the way Firebug does.

> DOM/JS object inspection

Has been in for a long time, though it could be missing some bells and whistles.

> having XHR logging in the console itself and not on another tab

Matter of tastes there, we'll have to agree to disagree as I'm not fond of this at all.

> Plugins such as FireQuery also make a difference for my needs.

Yes that I will easily give you.

> It does have that on the other hand.

I know, but CSS editing is easier with Firebug.

> My DOM inspector does seem to do that as well, though it doesn't highlight the altered subtrees the way Firebug does.

Not nearly the in same way a Firebug does it, I find it very useful for the amount of DOM manipulation I do with JS.

> Has been in for a long time, though it could be missing some bells and whistles.

Again it's the "bells and whistles" that really make the difference for me some of the time. The less time it takes me to debug something, the better.

That said, I still use Chrome inspector on a daily basis, there's no fanboyism from my part.

> Again it's the "bells and whistles" that really make the difference for me some of the time.

Since you haven't described which bells and whistles you think are missing, I can't exactly agree with your position.

FireQuery is seriously useful - I’m surprised at the number of web developers who haven’t used it.
I use Chrome for many tasks, but there are little things I go back to FireBug for.

For some reason the WebKit request explorer doesn’t show cookie headers, for instance.

> For some reason the WebKit request explorer doesn’t show cookie headers, for instance.

Mmm indeed, that's interesting, I'd never noticed. It shows the Set-Cookie response headers but not the Cookie request ones.

Me too, Everybody has his or her likes.. Have been working pretty hardcore on web development for 10 years now but will stick with firefox for debugging because I use a lot of their tools, for example: Firebug, Web dev Toolbar, HttpLiveHeaders, Rainbow and a couple more superior extensions..