

Firefox Developer Tools and Firebug - rnyman
https://hacks.mozilla.org/2013/10/firefox-developer-tools-and-firebug/ 

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

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

~~~
derleth
> Although Opera had them first

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

~~~
davesims
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).

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

~~~
ep103
1) Will be improved in next release, was a platform specific issue,
apparently.

2) You can do this already. It works just about the same as chrome dev tools,
create a new rule to add a new css rule, etc.

3) I would like this too.

~~~
jfaucett
\- 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.

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

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

~~~
simanyay
(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.

Google organized a nice Summit during the I/O this year and I attended on
behalf of our team (video:
[https://www.youtube.com/watch?v=SOO9Kb1-JJU](https://www.youtube.com/watch?v=SOO9Kb1-JJU)).
I shared my thoughts on interoperability and other issues here:
[https://medium.com/web-developer-tools/1060a9f69e6a](https://medium.com/web-
developer-tools/1060a9f69e6a)

Hope that helps.

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

~~~
epmatsw
That's present in Nightly (FF27). Not sure when it was introduced though.

~~~
mbrubeck
Pretty-printing of JavaScript landed in Nightly just a few weeks ago:
[http://bugzil.la/762761](http://bugzil.la/762761)

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

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

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

We'll see how this shakes out.

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

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

~~~
pbreit
While I agree with the sentiment, I think bundling developer tools is fine.
The other browsers, which are generally leaner than Firefox, include them.

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

------
donbronson
So long Firebug. It was like Christmas when we first saw what you did for us.

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

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

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

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

If you find this isn't happening for you, please file a bug:
[https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&c...](https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools%3A%20Console)

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

~~~
ihsw
They answer that question in the article:

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

~~~
dntrkv
I did read that, but I mean is there a reason it should exist at all? Is there
anything Firebug does that Chrome/FF dev tools don't do?

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

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

It's a pipe dream, but I filed a bug anyhow:
[https://bugzilla.mozilla.org/show_bug.cgi?id=924670](https://bugzilla.mozilla.org/show_bug.cgi?id=924670)

------
frik
Firebug doesn't parse JSON that start with "for(;;);" or "while(1);". Chrome
Dev Tools support this.

Please add support, reason why:
[http://stackoverflow.com/questions/2669690/why-does-
google-p...](http://stackoverflow.com/questions/2669690/why-does-google-
prepend-while1-to-their-json-responses)

------
jbk
> Before the release of Firefox 4 we decided that Firefox needed a set of
> high-quality built-in tools.

I don't understand why they did not just integrate Firebug directly. What were
the reasons?

~~~
Eiwatah4
From the next paragraph:

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

------
dhruvaray
I wonder what our ( [http://dhruvaray.github.io/spa-
eye/](http://dhruvaray.github.io/spa-eye/) ) future is going to look like?

------
hk__2
Already posted 20 minutes before:
[https://news.ycombinator.com/item?id=6516587](https://news.ycombinator.com/item?id=6516587)

~~~
k-mcgrady
You've linked to the same post.

~~~
hk__2
Yeah, this is a mistake, and the other post has been deleted since.

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

~~~
cpeterso
Does Google provide enterprise support for Chrome?

~~~
mh-
[http://www.google.com/intl/en/chrome/business/browser/](http://www.google.com/intl/en/chrome/business/browser/)

[https://support.google.com/chrome/a/?hl=en#topic=2936229](https://support.google.com/chrome/a/?hl=en#topic=2936229)

[https://support.google.com/chrome/a/answer/188446?hl=en&ref_...](https://support.google.com/chrome/a/answer/188446?hl=en&ref_topic=2936229)

(see user-based policies)

