Firebug Metamorphosis
blog.getfirebug.com
blog.getfirebug.com
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.
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.
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)
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.
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?
That said, I do most of my debugging in Chrome, only switching to Firefox/Firebug when they fail me, which isn't too often.
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! :)
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 :(
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).
Have you tried the add-ons Vimperator + "Tree Style Tab" (remember to activate "Auto hide tab bar")?
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.
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/
Granted, I really wanted to donate until I saw they used Paypal. Lots of other options now guys: https://www.wepay.com/ https://payments.amazon.com/sdui/sdui/index.htm
Maybe someone will read this and consider it for the future. I'd donate $50 today if I could do so via Amazon payments.
Opera Dragonfly goes in that direction. It's open-sourced (http://bitbucket.org/scope/dragonfly-stp-1/) and uses documented protocol for communication with browser core:
http://dragonfly.opera.com/app/scope-interface/
Recently Dragonfly has been made compatible with Chrome, debugging Opera remotely:
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.
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.
The Web Developer Toolbar was made by Chris Pederick, not Mozilla. It’s also never been bundled with Firefox.
Obnoxiously hard to google for, I ended up having to dig up a Windows VM and an old Firefox installer to figure out what it was.
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:
http://mozilla.github.com/devtools/next.html
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).
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.
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.
What does "collaborative source" mean?
This would change my life, much like the first appearance of Firebug. I would happily pay real money for this right now.
I still use Firebug at work because I don't have Chrome there, but for home projects I've pretty much switched entirely.
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?
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.
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.
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.
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.
Since you haven't described which bells and whistles you think are missing, I can't exactly agree with your position.
* 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.
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.
It's the same in Chrome.