
Firebug lives on in Firefox DevTools - robin_reala
https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/
======
nommm-nommm
I've been using firebug pretty much since it came out. Firebug was an amazing
leap forward in web development. I totally understand why its being deprecated
but we can all tip our hats for the innovation that it brought. It really
can't be understated.

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?

~~~
kibwen
In Mozilla's case, some of the rationale for including devtools by default is
that part of their mission is to make the web accessible to everyone, rather
than erect a wall between users and developers (though this does potentially
cause some problems). Was Firefox the first browser to make "View Source" a
default option in the right-click context menu?

~~~
carussell
No. View Source far predates Firefox, which is relatively new with respect to
the history of the web.

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

~~~
kibwen

      > 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.

~~~
carussell
I'm not involved with Mozilla anymore, but last I heard, there are things you
have to use Developer Edition for that can't be done with vanilla releases
(like working on add-ons).

~~~
clarkbw
Developer Edition enables a number of features not currently available for
regular Firefox. The two major ones are build time features which can't be
enabled in other releases (besides Nightly). One build feature is Unsigned
Add-ons, which allows for add-on development where it isn't possible
otherwise. The other is Async JavaScript callstacks which are very useful to
capture but tend to slow down regular browsing otherwise. Besides build
features there a lot of prefs we turn on to make development easier. If you
try using Chrome or Firefox release with DevTools you will need to do
something extra to be able to "paste into the console" (something that
prevents people on facebook from owning themselves) and that guard isn't on by
default in Developer Edition. [I'm the Product Manger for Firefox DevTools]

~~~
carussell
> Unsigned Add-ons, which allows for add-on development where it isn't
> possible otherwise

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.

~~~
nachtigall
Don't think you're right. You can use FDE for add-ons development, just like
parent said.

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.

~~~
carussell
Please read and understand the entire comment chain you're replying to. I'm
well aware that you can use Firefox Developer Edition to develop add-ons. (I'm
the one who first mentioned it!)

------
sroussey
I spent a good amount of time working on Firebug before the decision to
rewrite it as DevTools was made. After that, it was hard to justify time on a
EOL project and I had just started as employee 7 at Weebly.

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.

~~~
jim_d
Thanks for working on such a great idea. I know that Firebug has saved me
enormous amounts of time, and it was a big part of my tool chain for a long
time.

------
bhauer
I miss Firebug for a very specific, perhaps even idiosyncratic, reason. As
someone with a huge amount of screen real-estate but nevertheless a strong
desire for applications to be tidy in their use of that space, there was a
behavior of Firebug that is lacking in DevTools: the ability to use a single
separate window across all Firefox tabs.

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.

[1]
[https://bugzilla.mozilla.org/show_bug.cgi?id=1219917](https://bugzilla.mozilla.org/show_bug.cgi?id=1219917)

~~~
Rondom
Maybe mention it in one of the discussion threads as suggested in the blogpost
to make sure it is on people's radar?

------
rackforms
I positively adore Firebug, with the DOM panel alone being worth its weight in
gold.

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.

~~~
mercer
I've been using Chrome's dev tools for quite a while now. Can you tell me if
Firebug or Firefox' dev tools have any features that I'm missing out on?

------
nachtigall
I switched from Firebug to DevTools one and a half years ago and - while I
have huge respect to the innovations that came from Firebug's ideas - I'm not
looking back as the native devtools have more features these days and a better
UI in my option.

So thanks to the dev team and the volunteers picking up my and others bug
reports at [http://firefox-dev.tools/](http://firefox-dev.tools/) (I just
leave this to the crowd here on HN ;)

~~~
theandrewbailey
I switched to the builtin tools even earlier, and haven't looked back.
Honestly, I thought Firebug merged with Firefox a long time ago, since they
both did what I needed, in almost identical ways.

~~~
eriknstr
>Honestly, I thought Firebug merged with Firefox a long time ago, since they
both did what I needed, in almost identical ways.

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...](https://blog.mozilla.org/blog/2012/03/13/firefox-adds-new-developer-
tools-and-add-on-sync/)

[2]:
[https://blog.mozilla.org/tilt/#availableasanaddon](https://blog.mozilla.org/tilt/#availableasanaddon)

[3]: [https://addons.mozilla.org/en-
US/firefox/addon/tilt/](https://addons.mozilla.org/en-US/firefox/addon/tilt/)

~~~
nachtigall
> Speaking of the builtin tools, I found an old announcement about the Page
> Inspector 3D View 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

Unfortunately, tilt (or 3D View) does not work with e10s (multiprocess)
enabled. There's a bugreport/issue somewhere at bugzilla:

[https://bugzilla.mozilla.org/show_bug.cgi?id=937166](https://bugzilla.mozilla.org/show_bug.cgi?id=937166)

[https://bugzilla.mozilla.org/show_bug.cgi?id=1114959](https://bugzilla.mozilla.org/show_bug.cgi?id=1114959)

------
toxican
Based on the title I was expecting a tribute, thanking Firebug for paving the
way, so to speak, for the modern DevTools. But this is even better! I know a
lot of people preferred Firebug, so hopefully the marriage of it and DevTools
will mean good things for them.

------
hajile
I used to love dev work in FF. Anymore, it's always unstable and dev tools
freeze a lot. I loaded up the latest dev edition a few days ago, a few minutes
(and a bunch of beachball time) later, I was back in Chrome.

Fix your browser Moz -- I want to love FF again :(

~~~
blauditore
Not sure what's the issue for you; I've been using FF with its dev tools for
years on Linux and Windows, and was always happy. Firebug had become way
slower than the built-in dev tools, and Firefox is remarkably slower than
Chrome, but not unstable at all (for me). And I like FF's dev tools better
than Chrome's, except for performance investigation tools where Chrome is
quite great.

~~~
wainstead
hajile wrote: " I loaded up the latest dev edition a few days ago..."

I wonder if that meant the latest developer release, which would be expected
to be unstable?

~~~
balac
He is likely referring to: [https://www.mozilla.org/en-
US/firefox/developer/?v=a](https://www.mozilla.org/en-
US/firefox/developer/?v=a)

This is a developer focused edition of FF and shouldn't be unstable.

~~~
Manishearth
Dev edition is Aurora, which is basically alpha (more unstable than beta).

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.

------
bryanrasmussen
I've been using the new firefox developer edition. Pretty nice, although I
should probably figure out how to theme it because the default bugs me.

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. :)

~~~
dlbucci
It was that way for a long time for me. My computer would just get shut down
for 5 minutes every day, until that dreaded "Update Ready" icon would show up.
It's a bummer to hear they haven't fixed it, but it is less noticeable on a
newer machine.

------
jansenv
The new dev tools are really sluggish compared to firebug. The new features
are great, but hitting inspect element takes like 2 seconds now.

~~~
kibwen
My experience is the opposite. Firebug was always full-featured, but it was an
absolute sloth compared to the built-in FF and Chrome tools.

~~~
jansenv
Maybe I'm doing something wrong. When I click inspect element, it first opens
the dev tools and then inspects the body and after a moment of loading it hops
to the correct element.

~~~
kibwen
That moment of loading is what I expect from both FF's and Chrome's tools,
neither is instant. But the last time that I used Firebug (which was almost
two years ago, mind), opening Firebug would lock up the whole browser for
several seconds, and then once it was open it would manage to slow down every
other tab as well (which meant that I only kept it open while necessary, which
meant that I'd have to endure the lock-up again the next time that I wanted to
do anything).

~~~
jansenv
I will say that having firebug open did cause major performance issues for
regular browsing, but the performance of inspect element was quicker.

I am just happy they are really making an effort to improve the tools overall
:)

------
kilroy123
I loved firebug and was hesitant to switch to chrome, years ago, just to use
the tool. To this day I prefer the UI over devtools. IMO, building that tool
as an extension when it was built, is an empresive engineering feat. No doubt
there was a lot of pain and learning!

Luckily, devtools in chrome has also come a long way and I'm sure it will keep
getting better.

------
dageshi
I am very grateful for the firebug theme in dev tools. I find that UI much
easier to use than Chrome or Firefox inbuilt dev tools.

------
draw_down
Firebug was so good, probably one of my favorite tools I've ever used. I would
say the current-day Chrome tools surpass it, but the rest are very difficult
to use despite them all having gone through several iterations of design.

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.

------
johndoe4589
I can see the "built in Firebug" user interface building in front of my eyes.
The top bar appears and a good 100-300 msec later the second bar with the tabs
draw. Toggle F12 mutliple times, it's slow every time (you'd think it's not
necessary to redraw everything and that this window could be cached
somewhere?). I'm on 50.1.0 Windows 7 x64

With "Electrolysis" isn't that supposed to run even faster than the Firebug
add on ?

------
johnward
I take it these are developed tools in Firefox. Does anyone use the developer
edition? Is there any reason to?

~~~
balac
There isn't a compelling reason imo, you get a dark console theme, slightly
nicer / slimmer browser chrome, and a newer version of FF than the normal
stable release, I'm not sure much else is different though.

------
FrancoDiaz
I haven't used Firefox/Firebug dev tools in ages. What
advantages/disadvantages does Firefox/Firebug dev tools have over Chrome dev
tools?

~~~
nachtigall
For instance, I like the inspector much better as it has vertical/horizontal
lines which helps with alignment. Also I like the new (Firefox 52) "invisible"
text nodes feature.

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](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.

------
orf
My weekly experience with the Firefox Dev tools:

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.

~~~
kough
I switched to firefox dev tools a year ago (through the dev edition of
firefox) and I absolutely love them, but the source map support has been
really inconsistent. Sometimes it works, but almost always it doesn't :(

------
homero
I hate the built in one

------
sriram_iyengar
one word - sad !

------
jmcdiesel
He lives in you, he lives in me He watches over everything we see Into the
waters, into the truth In your reflection, he lives in you

------
frik
How can I revert it back? We had a major incident, I started Firefox to debug,
of course it updated upon start, and replaced Firebug with this shit. Then
Firefox crashed while I tried to click on the bubble which advertised to
switch back. After the restart of Firefox there is no way to change back!?
Stupid autoupdate crap, who in the right mind thought a feature incomplete
tools is good to be forced upon users. Allow me to change back to Firebug, or
Firefox is dead for me (until Servo replaces it).

~~~
Steeeve
I ran into the same exact scenario. I tried to get moving with the devtools
and while it looks similar and breakpoints seem to work better, getting
acclimated was wasted time that I would rather have spent after the production
issue was resolved.

That being said, I can't fault Mozilla for this. I've known for some time that
Firebug was on it's way out.

