Hacker News Reader

Comment by dboyd | Hacker News Reader

With no doubt, the Firebug team can take credit for changing the world of Web development.

These guys aren't giving themselves enough credit. IMO, they can take credit for advancing the world of Web development. While the other development tools are (quickly) catching up, firebug is still leading the pack.

View on HN

I've pretty happily switched to Chrome, which seems to do everything I used to ask Firebug to do.

Although honestly I no longer use Firebug because I no longer use Firefox, and I no longer use Firefox because it takes up an obscene amount of vertical real estate compared to Chrome.

My Firefox takes up less vertical real estate than Chrome. I use Tiny Menu, customize the toolbars to put everything into the menu bar, and use Tree-Style Tabs to show the tabs vertically along the right side. The best option I have at work is Chrome, and having the tabs along the top is much less usable compared to Tree-Style Tabs.

It's subjective. I tried and hated tree style tabs.

I prefer Chrome these days but Firefox and Safari are still up there, and also fast[1]. It's just nice to have a variety of good browsers to choose from.

[1] http://arewefastyet.com (doesn't say "no" anymore)

I didn't say Tree Style tabs were better, only more usable (for me). I can have 30 tabs open and see a pretty wide portion of the page title. I sacrifice horizontal real estate (which is often wasted) for vertical real estate. I can understand not liking tree style tabs for various reasons, but saying that their improved usability is subjective is a bit of a stretch.

If someone only ever has 3 tabs open then tree-style is a waste of space. How is it not subjective? It depends entirely on the user's browsing habits.

there are some things the chrome/webkit debugger still lacks compared to firebug though. I like how firebug always shows a stack trace when there are errors during runtime. In chrome/webkit, you just get a little red x in the console with an error message, but you have to find out the root cause yourself.

> and I no longer use Firefox because it takes up an obscene amount of vertical real estate compared to Chrome.

Obscene? On OSX with Firefox 3.6 and Chrome 6, the difference is about the height of Firefox's tabs on top, with the web developer toolbar enabled. Disable/hide the web dev toolbar and the difference is a few pixels in favor of Chrome.

nb: status bar and bookmarks toolbar disabled in Firefox.

I just measured a 50px difference in my configuration, that is including Firefox's Status bar at the bottom and not including Chrome's 20px fly-out link hover thing at the bottom left. Of course you can completely change Firefox around if you you want.

Personally I browse in Chrome, but the second I start debugging JS/AJAX i'll open Firefox and use that. It's 10x slower, it has Memory leaks up the wazoo, but firebug blows chrome's debugger out of the water.

> but firebug blows chrome's debugger out of the water.

Could you please describes the ways in which it "blows chrome's debugger" [actually the Webkit Development Tools, it's been much more than a debugger for quite a long time) "out of the water" in your opinion?

Yeah, I'd also like to see an analysis of this. I used to be an automatic 'switch to Firefox for debugging' user, but I find that the Chrome developer tools are now pretty sufficient.

a small example, not really analysis, but it does count. one of the reasons I still use ff instead of chrome for debugging is that on post requests viewing the raw source of a page requires chrome to repost to the server. ff just shows me the page/data as it came back without the repost, which can be critical in debugging stateful posts where a double post effects state.

I'll have to test that, that doesn't seem to happen in the resource viewer of Safari 5.

Here's one example: I've found that in certain cases Chrome's debugger sometimes can't link back to the line number where an error is caused when that line is inside an anonymous function, whereas Firebug often can.

That said, I do most of my debugging in Chrome, only switching to Firefox/Firebug when they fail me, which isn't too often.

There is no equivalent to the Firefox JavaScript console, especially when you add the jQuery plugin to it. Chrome console sucks. Their DOM explorer is superior in some ways, though.

> There is no equivalent to the Firefox JavaScript console [...] Chrome console sucks.

So there is indeed an equivalent, which you don't like for reasons you refuse to explain. I am disappoint.

So there is indeed an equivalent, which you don't like for reasons you refuse to explain. I am disappoint.

Agreed, I'm genuinely interested to know what I'm missing out on! :)

One wonderful thing about Firebug:

When editing a CSS property, pressing UP and DOWN will iterate through all of the possible values of that property. For example, editing "display: none", you can quickly find out what values "display: " can take.

I really miss that in the chrome debugger :(

True, the webkit DOM inspector can only increase or decrease numerical value, it doesn't work for arbitrary values (I actually find worse that it does not autocomplete property values)

One thing that I always go back to Firebug is for the 'Persist' mode on the Network tab. In case your server side code is redirecting to some other page or site (payments etc) you need to see what was passed to the server and what redirection loops is it going through etc.

Another thing that I haven't found Chrome to be able to do is show me events in the DOM tree (I admit I need FireQuery to do that). That really helps you figure out what events are associated with a particular DOM element.

> Another thing that I haven't found Chrome to be able to do is show me events in the DOM tree (I admit I need FireQuery to do that). That really helps you figure out what events are associated with a particular DOM element.

Safari's version has that, not sure about Chrome.

In the DOM inspector, right pane (the one starting with the Styles group), scroll to the bottom and you might find a group called "Event Listener".

You can even switch between viewing only the events bound specifically on the currently-selected node, or those bound on all its ancestors as well (to visualize the bubbling sequence).

Funny story -- if you remove Firebug, Firefox stops being so slow and leaking memory.

The moment you enable the javascript features of firebug, the browser disables its jit tracing leading to a slower experience. You are a victim of your own usecase.

FF must be optimized for Linux or something, b/c on my Ubuntu 10.04 workstation it runs roughly the same as Chrome and Chromium do, in fact it's even more stable for me with tons of tabs open (though I haven't used Chrome in several months so maybe that's changed?).

The rate of improvement in Chrome, particularly in snappiness, is very high. I'd recommend you try it at least every 6 months. It is noticeably snappier on Ubuntu than Firefox for me, especially when switching tabs.

I did, I used Chrome and Chromium since it came out, until I discovered Vimperator a few months ago. Something about that plugin made FF a brand new browser that's just a joy to use, snappy enough that I don't notice the difference b/t it and Chrome/ium anymore, even tab switching, and even more stable with lots of tabs open (like ~45).

I do a lot of Omniture and DoubleClick analytics development and I find that Firebug plugins like Omnibug are irreplaceable. Is there an equivalent debugging tool for Chrome?

Not that I know of: the webkit dev tools aren't externally pluggable (if they are I missed how, but since Chrome and Safari have different plugin architectures I don't see how that would work), so third-parties (to both the browser and the tools, but for Webkit browsers they're kind-of merged) can not extend the tools aside from getting patches merged into mainline.

The webkit nightlies tend to have more features. There is still one behavior that frustrates me every time I use the webkit tools, though: clicking on an asset link (eg, to a javascript file) brings up the resource tracker rather than the file.

There are a lot of tiny little details like that, that in sum make webkit's inspector not as a good experience as firebug

> [...] I no longer use Firefox because it takes up an obscene amount of vertical real estate compared to Chrome.

Have you tried the add-ons Vimperator + "Tree Style Tab" (remember to activate "Auto hide tab bar")?

This is true, but ironically Chrome's dev tools take up more vertical space than Firebug.

I'm happy I've made the switch, though it would be nice if Chrome/webkit traded some flashy icons for a more space efficient table especially in the "Resources" tab.

If your issue is with the size of the resource icons in the left-hand pane, the inspector (Safari's anyway) has an option called "Use Large resource Rows" which is enabled by default (4th from the left). If you disable it, the lines will be as big as the resource's name itself, without the big icons and the domain.

Chrome is also my primary browser, but I wanted to point out a discovery I made today:

The Chromifox Extreme[1] Firefox theme in combination with its bundled helper extension completely negates the vertical pixel space waste in Firefox vs. Chrome, at least in Mac OS.

I'm actually using the carbon variant[2] in combination with the Omnibar extension[3] to combine the URL and search bars.

[1] https://addons.mozilla.org/en-US/firefox/addon/10674/

[2] https://addons.mozilla.org/en-US/firefox/addon/10883/

[3] https://addons.mozilla.org/en-US/firefox/addon/8823/

I just installed all three. Real-estate problem solved for me

Grab the "Chromifox Extreme" and "Hide Menubar" extensions for FF 3.6. These will give almost the exact same vertical screen space.

'Obscene' is an overstatement. FF vs Chrome:

http://imgur.com/P5Mw6.png

Reply on news.ycombinator.com