Interesting Firebug story: Years ago when Netscape/Firefox was being built, some developers wanted to put a bunch of developer tools into the browser. Mostly so Firefox developers could inspect the browser (remember, websites were pretty bland back then).
However, they were worried about the codebase becoming too big -- after all, 99.9% of people wouldn't need a DOM inspector. So, the add-ons architecture was born. Firebug was created as a separate tool by Joe Hewitt. Add-ons and Firebug probably ended up being the reason why Firefox took off.
One of the reasons. I think tabs were actually a bigger deal back then. Although Opera had them first, Firefox was the one that put them front and center. Back then, Opera was still championing a gesture-based interface, and Firefox felt a lot more solid and polished.
Opera had little miniature windows inside the main window. A small difference, perhaps, but tabs are simpler to manipulate at the cost of, perhaps, being less flexible (you can't resize tabs and move them around like you can windows).
Actually this is incorrect -- the windows you're referring to were part of the earlier MDI version of Opera. In 2000 Opera 4 came out with tabs very similar to what FireFox would have in its first release four years later (and its predecessor Phoenix had in 2002).
I agree with keypusher.
Firefox 'took off' long before the whole add-ons/extensions became popular. It was being able to use tabs which caused many too switch back in the day (plus it was faster to, or at least felt that way). And yes I'm also aware opera did this first.
actually firefox took off because it wasn't IE :) remember that those were the days that you either used IE on windows or nothing since netscape was dead and there weren't too many choices out there for a free browser that worked well.
First Id like to say Im a huge fan of firefox and really like what mozilla does.
So I would love to be able to use the developer tools - but for me they're still not quite there (but getting close). Here's some things Id like to see, and then I think I could change over from chromes devtools completely, wonder what other devs think?
1. speed (becoming less of a problem)
2. edit html in elements inspector, also dynamically creating styles:
- What I like about chromes devtools is the fact that I can completly alter my html page via the elements panel (styles and html) very fast, also auto-expanding to the selected element and seeing its surroundings is nice.
3. network panel still not as good as chromes (imho) - mainly because I cant enlarge the detailed inspection of each listed http request.
4. too intrusive (popups for javascript editor) - make it more compact and use less space, also I like tabs (that are optionally detachable) instead of windows.
And thats it, these are the only reasons for me personally, why I dont use firefox as my development browser of choice.
But again Id like to say the work the mozilla devteam is putting into the devtools makes me think its just a matter of time until I can finally go back to mozilla :)
- as far as #2 goes, I have to open up the style editor tab (then i find myself switching back and forth, is it possible to add rules in "rules" panel inside the "inspector" tab to avoid the switching? Also, in my build (maybe a week old or so), When I right-click a node in the inspector I only have copy html options and delete node, no edit html - does a more recent release have this - that would be awesome.
yeah, from the HTML tab you can just right click the style on the right hand side of the window and click New Rule. It'll assume that you're attempting to write a new rule for the type of element you currently selected, but just tab to that box and you can change it.
Note, when I say style here, I mean style on the HTML tab, not the style tab itself.
You can edit all of the individual components of a tag (attributes, the tag itself, add new attributes, etc.), but you can't edit/select the entire tag or child tags at once as you can in Firebug.
This can be really powerful, because when you can edit an entire tag including the open/close brackets, you can type in whole new tags or paste in a blob of new HTML.
1. Logging of objects and arrays should produce a similar output like in chrome or firebug, currently the [object Object] like representation is not really helpful, I have to inspect all of them to find what I'm looking for.
2. +1 for the above mentioned network panel details, I agree, and the URL of the request can not be copied currerntly, that's mean :)
3. +1 for the need of stacktrace, like in chrome, that's sooo needed
4. A shortcut in it's settings for disabling the cache
3. Yes. If I get a 500 error from my web application with a stacktrace in the html, it's really hard to read it in the source in the Firefox inspector. Webkit dev tools will both show the source and render it.
I haven't been following Firefox all that closely. Is the debugger API they're developing interoperable with Chrome's? It seems like it would be good for the web to decouple developer tools from browser engines. If I could run Firebug on Chrome or Blink's Dev Tools on Firefox, I'd only have to learn one set of tools to be able to effectively create cross-browser projects.
(If you substitute the native dev tools in this thought experiment with Brackets or Sublime Web Inspector, you start to see the power of decoupling tooling from the browser.)
(I'm a member of the Firefox Developer Tools team)
Our RDP (Remote Debugging Protocol) is not interoperable with the one in Chrome or any other browser. There are two reasons:
1) Both us and Chrome team would like to iterate on our protocols and tools as fast as we can. Maybe in future, when tools across browsers stabilize there will be a case for a standard but I personally believe that a wrapper protocol is a better answer.
2) RDPs depend on their platform's architecture. Ours is very SpiderMonkey centric while Chrome's is all about V8.
I have no idea, but I doubt it. Although, yes, it should really be standardized though, like the JVM debug protocol.
The Google Web Toolkit team was looking at this; instead of their historical approach of using a JVM to run/debug user code (because that was actually a really great idea in IE6), using the native JS debuggers in FF/Chrome/etc.
...except that there is all sorts of wonkiness, like only 1 debugger is supported at a time, so you can't use, say, Eclipse (whether for GWT or pure JS debugging) + FF dev tools for inspecting CSS/etc. at the same time. And you can only connect to 1 tab...something, something. I was not directly involved, but it didn't sound pleasant.
Anyway, I totally agree that native dev tools should be decoupled/play friendly with other tools.
AFAICT, so far the FF/Chrome engineers are going down the path of basically building IDEs from scratch, in the browser itself.
Which was great for Firebug, and inspecting elements, but for a debugger, I really want to stay in my IDE.
I recently started using the dev tools in FF daily in place of Chrome. One thing I really wish they had (and maybe they do but I can't find it) is a way to format JavaScript code. So much JavaScript is minimized these days so reading it is about impossible. Chrome has a {} button you can click to format the code. This would be extremely useful in FF.
The Firebug story is a good and a bad thing. For starters the only reason I still use Firefox is because Firebug is awesome. In the article at least Firefox gives credit to Firebug where it's due, but it's a bit like OS X notifications taking Growl's idea and leaving Growl to rot. Maybe that's a bit dramatic, but it's a common story now a days. Indie developer develops something awesome for big companies eco-system. Big company takes idea and leaves indie dev to die. I am not privy to the entire story but it sure would have been nice if mozilla could have at least done an acquire-hire for the Firebug team (assuming they wanted it). You know show some love for the greatness they gave to the dev community.
Mozilla has been paying the main Firebug developer for a long time to work on it, but I've never heard of an open source project that would like to be "acquired", whatever that means. If hiring all of the project's developers is what you mean, quite a few of them had high profile jobs already, so funding wasn't an issue here. As for the reasons why simply incorporating Firebug into Firefox wasn't a viable solution, see the original post.
I develop using firefox/ firebug. I do really like the way firebug works, but its starting to show its age a bit.
The integrated tool are getting better but I often forget they're there. The responsive page resizer/viewer I use frequently
Tools->web developer seems to incorporate firebug and the native tools (confusing...). I like the way firebug puts a little button on the menu bar I can click to turn debuggin on and off.
I'm exactly the same, I just forgot to use built-in tools except the responsive, because I have that Firebug button.
However, I mainly use FB to inspect network requests nowadays and if you do a lot of Ajax calls, inspecting the responses and the json could require less clicks IMHO.
Firefox was started when Mozilla (Communicator) grew too large. Let's put everything in plugins they said! Do even 5% of users need dev tools? History repeating itself.
It could be argued that integrating basic developer tools is also a statement about the kind of internet we ought to have: One where people are as empowered to understand and contribute as they are to consume.
I've seen not-terribly technical people— or at least people who'd never otherwise have firebug installed— go and edit braindamaged forms to get a webpage working right. Having it built in is practically empowering.
Also, bundled developer tools can be nice when you're trying to debug an issue on a user's machine. It's a small thing, but it's nice to not make them install some plugin.
At this point, developer tools are essentially a required feature for a browser. All else aside, there's no way to debug a bug that's specific to a single browser without tools integrated into that browser.
I'm glad to see Firebug being replace with a more modern set of tools, but you're right - Firebug (and the webkit devtools that followed from it) is/was amazing. It was probably the most significant change in front-end web development I've experienced in my 15ish year career.
XMLHttpRequest was released by MS in IE 5 in 1999, which is less than 15 years ago. I'd say that the development of ajax was far more significant than some dev tools.
And as a slight nitpick, the IE Dev toolbar came out about 6 months before Firebug and as best I can remember actually had more functionality than Firebug for quite a while.
It's some sort of persistent web developer myth that Firebug came first. Firebug was just easier to find/install, you had to know that the IE6 developer toolbar existed.
NB: I hate IE as much as the next web dev, but credit where credit's due...
I use the Nightlies, and am really digging the new stuff that's coming in. What I want the most is, a DevTools-level universal shortcut to focus onto the Web Console prompt. I know that C-S-k is the Web Console short-cut, but when focus is on the other parts of the Web Console, pressing C-S-k just closes Dev Tools. I like how Chrome uses 'Esc' to focus on the prompt, and I find it a very superior UX.
Cmd+Opt+K (or Ctrl+Shift+K) should take you to the console panel if you are in a different panel. For example, Cmd+Opt+S to open the debugger, and then Cmd+Opt+K should take you directly to the console, not close the tools.
Is there any reason for Firebug to continue existing as a plugin? I know it did a lot to further the front-end dev tools in all the browsers, but at this point the default dev tools in FF and Chrome are just as good and in many ways better.
Although Firebug has "fire" in the name, it is not an official Mozilla project. It's an independent group of developers (though naturally, many are Mozilla contributors). That independence is important, as competition always is! I can't speak for the developers who are working on it, Firebug will likely evolve to be a complementary set of tools to the built-in ones. Today provides valuable continuity for people who are used to using Firebug to build websites, and has a number of addons for Firebug itself that exists nowhere else on the web. Shutting it down would be a shame.
> We thought long and hard about including Firebug wholesale and considered several approaches to integrating it. An early prototype of the Inspector even included a significant portion of Firebug. Ultimately, integration proved to be too challenging and would have required rewrites that would have been equivalent to starting over.
Firebug can be really slow, but I just can't change it to Chrome dev tools, which seem unintuitive for me in many places (and which stop me on non-existing breakpoints randomly, no, I don't have "break on exceptions" enabled or anything like this).
Regarding Fx dev tools, they e.g. do not show evaled scripts at all in the JS panel. Also I don't see a way (yet) to have debugger and console visible at the same time. And there are many other tiny Firebug goodies not implemented yet here and there. Firebug will be still essential for me for many months.
Actually they address that as well, albeit from a philosophical standpoint -- Firebug is supposed to provide useful web development features that aren't already served by the browser. There isn't supposed to be competition.
I suppose, in the near future, some redundant features will be cut from Firebug.
Well, I find the FireQuery extension for Firebug (http://firequery.binaryage.com/) very useful. Though it could probably be ported to the native developer tools, it probably won’t be, at least for a while. So Firebug is useful for backwards-compatibility with custom extensions.
Firefox Dev Tools lacks several features that Firebug provides (editing) plus it has IMHO a slicker UI. I am glad that Firebug still is supported by some devs. Chrome Dev tools lacks several features too, that Firebug provides (vice versa), though Chrome Dev tools have a worse UI.
I hope Firefox Dev tools clone the best parts of Firebug and Chrome Tool.
The Firefox devtools have been improving dramatically. I'm looking forward to dropping Firebug completely. The responsive mode is an excellent new feature.
What I'd really like, though is a single set of web devtools that can inspect any browser. Having to learn a different set of devtools for each browser is a pain when you have to test a slew of different browsers.
> An early prototype of the Inspector even included a significant portion of Firebug. Ultimately, integration proved to be too challenging and would have required rewrites that would have been equivalent to starting over.
We've uninstalled Firefox throughout our domain(s) due to the lack of standard support for the enterprise, and various issues with managing installs, updates, and freaking random crashes on their recent official releases.
However, they were worried about the codebase becoming too big -- after all, 99.9% of people wouldn't need a DOM inspector. So, the add-ons architecture was born. Firebug was created as a separate tool by Joe Hewitt. Add-ons and Firebug probably ended up being the reason why Firefox took off.