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.
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.
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?
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.
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)
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.
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.
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).
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.
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).
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.
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.
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.
> 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.
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.
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.
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.
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.
It is just a simple console like Firebug Lite. Even the site says "The Web Console won't replace more advanced debugging tools like Firebug", so why is the Firebug team so worried about it?
Firebug is a great tool for Mozilla browsers and I feel that considering porting Firebug to other browsers could be a difficult goal for the project.
The Firebug team is worried because Mozilla have been passive-aggressively antagonistic towards them for a long time. Mozilla heavily promoted their abjectly useless "Web Developer Toolbar" extension for years, even bundling it with the browser by default. They also have not been shy about breaking Firebug with every major release, basically not taking it seriously at all.
Now they've started down the usual embrace-extend-extinguish path that they've taken before with Firefox extensions — bake an unremovable inflexible implementation of the basic functionality into the browser, with a perspective twist of some kind, and major core API changes that make it difficult for the original extension to continue development.
They're worried about them doing AwesomeBug in a future release.
Things are almost always more complex than they appear.
Developer tooling is an important area, and we want to see some great tools that make sense for a broad audience to be shipped with Firefox out of the box.
What those tools look like and how they're built are some big questions that we're working on answering, and we're starting to answer them:
I've been manager of Developer Tools at Mozilla for 3 months, and I can't really comment on how things were before that. What I can say is that right now Mozilla employs someone full time to work on Firebug. Firefox 4 beta 7 has been held up in part to fix some things that have broken Firebug. We do care about Firebug.
If you follow the link I just posted (which I should note is a draft that will likely get some revisions soon), you'll see that I'm keen on us building new APIs that make all sorts of developer tools, including Firebug, easier to write and more stable.
I am not worried about "AwesomeBug". Firebug is already an awesome open source project, and they're free to take the project in whatever directions they wish. I am worried about Firefox having the best developer tools available anywhere (via built-in product features and add-ons).
Ah yeah, DOMi. It’s true that it’s seriously out of date now, but at the time (pre Firebug 0.4) and when combined with the Venkman JS debugger it was the only decent way to properly understand what was happening with problematic dynamic pages.
The notion of competing again the browser developers is interesting.
Frankly, I haven't dug too deep into the economics of Firebug, but I hold the assumption that the project is not financially motivated. It's a typical open project where the developers' reward is the process of creative problem solving and also giving back to the community.
When financial reward is not the goal, my first thought would be to work with and not against the browser developers. There is a common goal so why not focus resources.
I'm glad that that is not the case because it is this competition, financial or not, that drives innovation.
I'm looking forward to learning more about the motivations behind FB since I use it almost daily. My preliminary quest didn't get too far since the footer link points to a parked (squatted) site.
This is a shame. I wish the team all the best, but I can't see them pulling this off. I hope I've misunderstood, but it sounds like they want to:
1. Refactor a ton of code (this is not much fun, as you're just breaking things and fixing new bugs)
2. Add support for lots of other browsers (this is also not much fun, see #1)
3. Try exciting new off-the-wall ideas (awesome!)
How many people are going to continue to contribute when #1 and #2 drag on from weeks to months to years of discussions about correct refactoring methodologies and Doing It Right This Time? How far will the other browser's development tools come in this time?
Perhaps #3 will save the project, but I sadly predict the eventual demise of a giant.
You see the same thing happening with interface AddOns for World Of Warcraft: the functionality of a few very popular AddOns is eventually incorporated into the game itself.
* 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.
> 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.
I'm not sure how anyone would be convinced that I find I can work faster with Firebug than other developer tools just by listing a bunch of features. shrug
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..
I love Firebug so much. It may be the only reason I launch Firefox as of late.
Chrome is my daily browser. Web inspector is quite good and it does the job most of the time. The JS console is awesome. But for some reason, doing anything else but using that JS console never feels quite as good as doing it within Firebug.
I would love to see a JavaScript debugger that could break to something like an ipython shell. It's the one thing I really miss moving from server side to client side debugging.
The main difference is the ability to interact with objects in the scope of the breakpoint. The console is always in window scope and I want to interact with local variables within a certain function.
If I don't misunderstand you, you can do this in Firebug. Open one of the scripts in the Script panel, click on the left hand side of any row to set a breakpoint. Execution will break there, and you can inspect the call stack, local scope and everything.
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.