Firebug lives on in Firefox DevTools
hacks.mozilla.org
hacks.mozilla.org
As an aside I always kind of wondered why all browsers started including developer tools by default as they are not of use to 99.9% of users. Maybe because it's just easier than making them optional extensions? Does anyone know about what year this started?
AFAIK the firefox devtools team has plans/ideas that the devtools could just used like a normal Web App (loaded from a server). Currently, they are migrating XUL based components over to normal html what would make this possible.
As an example, just like debugger.html which can even be used from any browser in a not-builtin way: https://github.com/devtools-html/debugger.html
Someone from the old Opera team must have joined them, no less!
The Netscape had a distribution called Communicator that shipped the browser 'Navigator' alongside a mediocre but serviceable WYSIWYG editor 'Composer'. Other products were included too: an email client, and for a while, a Calendar; the codebase lives on as Mozilla Seamonkey. This was a play towards small businesses, and not an 'Inspect Element' hook.
Meanwhile, integrated devtools started with Chrome in 2008, two years after Firebug was released in 2006. My guess is Chrome wanted to provide a browser experience that was noticeably superior to a variety of demographics, and gain marketshare on merits. Meanwhile, IE began a huge effort to prove that they're not an old dinosaur of a browser holding the web back, but they didn't have easily-installable addons, so they built it in. These factors created pressure on Mozilla [1] to improve their devtools and consider shipping them with the browser.
DOMi was built into Firefox since November 2003 if you used the Windows installer's 'Custom' installation and selected the checkbox for inclusion [3], then in Firefox 3 it was removed and made available as an extension [4]. It was also included in the 'Custom' installation of the 'Complete' Mozilla/Seamonkey Suite [3].
But Prototype.js came out in 2005, jQuery in 2006. Ajax the term was coined in 2005 [5][6][7]. We don't talk about the dark days before then.
[1] http://www.hacksrus.com/~ginda/venkman/faq/venkman-faq.html [2] https://addons.mozilla.org/en-US/firefox/addon/javascript-de... [3] http://kb.mozillazine.org/DOM_Inspector [4] https://addons.mozilla.org/en-US/firefox/addon/dom-inspector... [5] http://www.quirksmode.org/blog/archives/2005/01/with_httpmap... [6] http://adaptivepath.org/ideas/ajax-new-approach-web-applicat... [7] http://www.quirksmode.org/blog/archives/2005/03/ajax_promise...
I'm very very sure integrated devtools could be traced back to WebKit Inspector Tool[1] in 2006 (with Drosera[2], the JavaScript inspector, being separate application). Then in 2007, the WebKit team rebuilt the Inspector Tool into Web Inspector[3] and merge Drosera into it. Chrome inherited the Web Inspector when it was released in 2008. I even remembered the first few versions of Chrome still has the Mac metal looks (even when running on Windows).
[1]: https://webkit.org/blog/41/introducing-the-web-inspector/
[2]: https://webkit.org/blog/61/introducing-drosera/
[3]: https://webkit.org/blog/108/yet-another-one-more-thing-a-new...
But Safari wasn't the first either. WebKit Inspector was built under Dave Hyatt after being lured to Apple. It was meant to bring the tools available to Mozilla developers over to WebKit/Safari. Joe Hewitt's DOM Inspector was checked in to the Mozilla codebase in 2001, and Robert Ginda's Venkman JS debugger in 2003.
(After leaving Netscape, Hewitt took a second run at integrating both tools' featuresets, and that's where Firebug came from.)
This is total conjecture but I wouldn't be surprised if it had something to do with competitive advantage. The best browsers to develop for have a better chance to become the browsers of choice because when things were less standardized (or browsers adhered to standards less) webpages could run better in one browser than another (if they even worked in multiple browsers at all). IE kind of breaks that theory but they had other ways to push IE that did not depend on quality or ease of development.
Personally, I absolutely love that developer tools are included in all browsers. I think its absolutely fantastic, just surprising to me it ended up that way.
The other vendors were just playing catch-up, especially Microsoft.
Plus it was handy for their own devs and aligned with their strategy (make the web awesome because more web is more Google ads).
Only one of the browsers I regularly use contains dev tools (Firefox); there are no dev tools built in to w3m, dillo, conkeror or lynx.
There were also no dev tools in eww, w3, konqueror, arora, midori, links, elinks or netsurf last time I used them.
In fact, I've only ever seen dev tools in two browsers, Firefox and Chromium, although my observations are biased since I only use Free Software ;)
The parent just-so-happened to make a tangential comment about "all browsers" bundling dev tools, which I found quite short-sighted. If you're QA testing a commericial Web site then by all means use "all browsers" as a shorthand for "the popular browsers". But if you're commenting on the general development of browsers and their features, such statements need to be qualified. After all, there are some good sibling comments discussing WorldWideWeb, Netscape, etc. Should they be dismissed as "edge cases"?
Maybe instead of listing the software I actually use, I could have taken a guess at how many mobile browsers lack dev tools; I imagine there are many users of such browsers, which is far from an "edge case", although I avoided making such conjectures since I've never browsed the Web on a mobile phone.
Others don't have features like DOM, Javascript, etc. so there's not much they could offer that "view source" doesn't already do.
Others don't have a suitable interaction model, e.g. w3m is effectively a pager for turning HTML into ANSI escape codes; conkeror is keyboard driven so would need a radically different UI for it to be effective; etc.
Others, like Netsurf, Konqueror and the Webkit wrappers (Midori, Arora, etc.) would probably like a dev tools feature, but don't have enough developer power to implement one.
Part of the issue with a lot of these alternative web browsers is that they don't have fully-fledged JS engines, or WebGL, or a number of other features that web developers like to use to make their sites fancier (and more bloated, etc etc).
In my case I remember there was a point where I preferred Chrome's dev tools over Firefox' built-in dev tools as well as Firebug, and that played a role in my use of Chrome as a primary browser. Things may have changed, but here I am still using Chrome.
The downside is that I need to remind myself to properly test in Firefox and Safari and, to my shame, it has happened that I entirely forgot and the testing department ended up being that reminder.
Also, Could it be that another reason for dev tools' existence might be that browser developers use it themselves?
Those were the days
The ideal that the Web shouldn't be write-only is not new, either—it's been around around since the birth of the Web; Tim Berners Lee included features to publish pages in the first browser, WorldWideWeb. The idea of built-in devtools in Firefox also isn't new.
Firebug's predecessor DOM Inspector was shipping in Mozilla Application Suite and in Firefox up until Firefox 3. For Firefox 3, the team decided that DOM Inspector's utility to the masses didn't justify its costs. Mozilla Corp was a lot smaller then—150 or so employees. It was a common theme at that time to challenge every part of the browser both because of the QA involved and the ideal of shipping a light, focused product was still something that the team was aiming for. The DOM Inspector code was already mostly self-contained, so it was built and released through addons.mozilla.org as an extension.
The main reason the built-in devtools got included in Firefox aren't so much rooted in user-focused principles as it was convenience for the devtools team. Someone might appear in this thread to dispute this (I half expect Rob Campbell to show up), but it's truer than the idealism line. Bundling the new devtools into Firefox gave two advantages for the people working on it:
1. You're automatically given a big install base, i.e., you don't have to convince people to download your extension.
2. Maintaining features as an extension introduces some work that you don't have to deal with if you just shove your code into the mozilla-central codebase. In 2010, extension authoring sucked. If Gecko couldn't do what you needed or browser.js didn't have hooks for you, you just roll those things into the same patch that introduces (or fixes) the feature you're working on.
Fun fact: The number of years that Firefox has shipped with a built-in inspector actually outnumbers the years that it was without one. Firefox 3 was the first release that didn't include DOM Inspector. That was 2008. A couple years later the devtools project was announced, and it was slotted to ship in Firefox 4—which ended up delayed for 6 months or so. (If I recall correctly, devtools either ended up still missing the boat, or it shipped with parts turned off because they weren't mature/stable enough yet and they were reenabled within the next few releases after Firefox had switched to the rolling release cycle.)
EDIT wrt your comment about no distinction between "developers and users": Firefox Developer Edition's existence is a contradiction
I think you mean read-only, no?
https://en.wikipedia.org/wiki/Write-only_language
in this context it's about having the source code accessible itself, instead of only a binary/bytecode available (or some obfuscated/minified code)
> Firefox Developer Edition's existence is a contradiction
It isn't a contradiction. The only devtools that are in FDE but not in Stable are experimental ones that are on the path to stabilization. It's a testbed, not an enclave.You can make a userscript without any of that hassle, though.
It is possible, you've just chosen to disallow it.
To be clear: the Firefox team took deliberate steps to make sure that add-ons can't be tested or developed in the stock builds of Firefox downloaded from Mozilla.
See your sibling below: > Unsigned addons cannot be enabled on beta or release. That was only available for a limited time. Now they can only be enabled on alpha (aka developer), nightly, or special unbranded builds.
Not even close. Netscape had this in the late nineties, IIRC.
What's new seems to be all the work on making the dev tools comprehensive and "IDE-like", and I think that has as much to do with it is as useful to the companies building the browsers as the users of the browser. Such that Chrome probably added them in directly to save Google developer time and needing a separate IDE/toolkit/extension install, and the rest of the browsers followed.
It's interesting too in that Edge now uses the Dev Tools as a way to tier the user experience, such as the traditional View Source, out of the base experience. If you open the Dev Tools Edge asks if you are a developer and lights up a bunch of functionality that "ordinary" users don't need to see, like View Source.
I wish this wasn't the case, but I use built-in devtools inspector to work around bad websites that impose invisible ad overlays which are somehow not caught by the combo of uMatrix+uBlockOrigin. I have to use the Inspector to select and delete the overlay so that I can use such sites. Thus DevTools serve a purpose to non-development browser sessions.
Sure, they could install an addon, but that can be very intimidating if they have never done so. If I "wanted to show them a quick trick", I would have already lost their attention completely by the time the addon is installed.
That percentage is actually pretty close to correct. For that reason and user studies of regular users Edge has already turned off their DevTools by default ( https://blogs.windows.com/msedgedev/2016/11/22/balancing-use... ).
Firefox is currently pursuing moving the DevTools out of the browser and will likely use a similar system to Edge / Safari for activating them. Going the extension route does have complexity drawbacks but being able to ship fixes faster, to a wider audience will be a greater benefit. Additionally as all browsers adopt WebExtensions this could mean that any Firefox panel developed as a WebExtension will be available for use within Chrome or Edge.
Not of use to many, but I'm still glad that Chrome includes them - I needed to upload several GB of data the other day, and having both an available web interface and the bandwidth limiting feature in the Dev Tools Network section let me do that upload without impacting other users at the office for the 30-40 minutes that it would have taken when unthrottled.
But I loved working on it. The team was great, and special kudos to Honza for staying with it through all the years. We had so many ideas, to help in debugging and to help in learning. Many yet to come, I'm sure. So much left to be done in all the developer tools on all the platforms.
With Firebug, the user could detach the Firebug window from the browser and position it separately on screen. Firebug could be enabled for any tab and the contents of the Firebug window would dynamically change to reflect the browser tab with focus. In DevTools (and also in Chrome), this mode is not an option. Instead, the user has two options, both of which are less desirable:
1. Open a separate DevTools window for each tab. This bloats the window stack in the same way browsers did generally before the advent of tabs, making it a poor option.
2. Leave the DevTools docked inside the browser window. This is poor because large screen real-estate cannot be properly utilized by positioning the DevTools separate from the browser window. Despite an abundance of screen real-estate, either a chunk of the browser frame needs to be consumed with the DevTools or the browser is made awkwardly wide/tall which adversely affects all tabs that do not have the DevTools open.
Because window management and usable screen real-estate is so critical to my productivity, this very specific behavior of Firebug is what I miss more than anything. The only Bugzilla bug I have seen about the matter [1] is fairly unpopular, however.
As far as our new environment: The scratchpad seems like a neat tool for larger code 'experiments', but to it's placement in the overall tools is puzzling. The Scratchpad and Console should be combined without needing to enable "Toggle split console", at least for bottom docking.
Firebug brilliantly combined these two to form the ultimate JavaScript REPL, doing so in the way that maximized available screen space (side by side). To replicate the same functionality the new system requires two space wasting windows spanning the entire width of the browser.
Also, and am I crazy here: but one of the commands to run code in the Scratchpad is Command-R. That just refreshes the entire page, which would appear to make it the worse short-cut in the history of modern software. The one shortcut to run code that does seem to work, Command-I, is incredibly inconvenient to type. Yes we have buttons, but shortcuts are nice too.
Overall though: Firebug was and has been a revelation. It's empowered me to write better code in less time, and I'm pleased to see it live on.
So thanks to the dev team and the volunteers picking up my and others bug reports at http://firefox-dev.tools/ (I just leave this to the crowd here on HN ;)
I was particularly happy with the Cause column in the network tab that tells me why a particular thing was loaded, which line of javascript or which HTML element triggered it. I think Chrome has had that for a while, but it's pretty recent in Firefox. It's one of those little things that make me happy.
Me too. I seem to recall that back when the Firefox inspector and friends first launched they stated that it would be able to do everything that Firebug did, and that the people who had been working on Firebug were going to join Mozilla to work on Firefox instead. I switched from Firebug to the builtin tools soon after it was released.
Speaking of the builtin tools, I found an old announcement about the Page Inspector 3D View [1] which I recently wondered what happened to since it disappeared not long after it was introduced. Apparently it's available as an addon instead now so you can still have it [2] [3].
[1]: https://blog.mozilla.org/blog/2012/03/13/firefox-adds-new-de...
Unfortunately, tilt (or 3D View) does not work with e10s (multiprocess) enabled. There's a bugreport/issue somewhere at bugzilla:
Fix your browser Moz -- I want to love FF again :(
Chrome for me any day. I prefer to have ram clogged and no freezes.
I wonder if that meant the latest developer release, which would be expected to be unstable?
This is a developer focused edition of FF and shouldn't be unstable.
So you get new features more rapidly, and a lot of the feature flags are flipped on, without needing to use something as unstable as nightly.
You might want to leave a comment on how/why (use case) you used it to help to priorize the bug.
There's a Firebug Gaps meta bug which depends on this: https://bugzilla.mozilla.org/show_bug.cgi?id=991806
Chances are your issue comes from a buggy plugin. I've filled my share of Firefox bug reports, but lately most problems I run into are due to buggy plugins.
The only problem is about once per day it gets really sluggish and I have to shut it down because nothing is working - after I restart it updates with the latest build. Seems like a connection there. :)
I am just happy they are really making an effort to improve the tools overall :)
Luckily, devtools in chrome has also come a long way and I'm sure it will keep getting better.
Chrome's dev tools preserve the "spirit" of what it was like to use Firebug. Others just seemingly put info and stuff in random places, nothing where you'd expect. Why must they be so... difficult? I mean we already had the basic ideas of how these tools should work figured out years ago. Just frustrating. Maybe other devs enjoy using the FF and Safari tools, I certainly don't. I haven't tried any of the recent generations of IE.
With "Electrolysis" isn't that supposed to run even faster than the Firebug add on ?
Overall, I like the (dark) theme UI/UX better, and also the DOM node hightlighting better.
The eyedropper and the full page screenshot tool are great too (do not know if Chrome also has it). And using all these tools from the devtools command line: https://developer.mozilla.org/en/docs/Tools/GCLI
There are drawbacks like the new debugger which is missing a lot common tiny usability features currently (making it hard to use) - and it's still buggy. But it's rewritten from scratch using modern technologies like react/webpack. So it's evolving fast.
Edit: Fixed typos.
Get an exception in my concatenated is source.
See some unintelligible traceback with the mangled function names (despite the file having a source map)
Click on one of the stack links
See how Firefox tries to load my 10mb dev JS file in view-source:// and then crashes.
Repeat.
That being said, I can't fault Mozilla for this. I've known for some time that Firebug was on it's way out.
* Force it upon user
* Advertising "revert back", which restarts Firefox but Firefox crashes and after another restart forgets its settings - no one tested that option
* Firebug theme is just a theme, and several features and functionality found in default Firebug are still missing in their DevTools. The usability is different, especially in the AJAX/console tab. And where is a proper DOM tab?
* worst thing, it happened during a major incident, I login in remotely to my workstation just to find out my Tool changed under my feet completely, with all prior knowledge useless. I had to use Chrome DevTools which has more features, but even it lacks features as mentioned above - Firebug was the most matured Tool after all.
* Firefox still hasn't proper multi-process support, if you understand multi more than two processes. It's a far cry from what IE8+ and Chrome offer.