
Firebug - letientai299
https://getfirebug.com/
======
globular-toast
Firebug, along with web developer toolbar, changed everything for me. I learnt
web development on IE6 by editing html in notepad. I switched to Firefox for
tabbed browsing and because it was faster. When I discovered firebug I almost
couldn't believe it. What the hell had I been doing up to this point? Why
doesn't everyone know about this? Later I discovered that Chrome had it built
in and still most web devs hadn't heard of firebug.

~~~
burlesona
Same. I remember what an epiphany Firebug was, and I felt bittersweet later
when quality dev tools started being built-in, just because it seemed a little
sad to think Firebug wasn’t going to be needed anymore.

~~~
ktpsns
Same for me. There was also a time when Chrome dev tools builtin was superiour
to the Firefox builtins or Firebug, respectively.

Nowadays, I don't know what to think about built-in dev tools. On the one
hand, they promise lowering the entry barrier for fellow ongoing devs. On the
other hand, they apparently aren't, because many folks don't care about
learning all the basics of HTML, JS, CSS, etc. any more but instead prefer to
enter the development world on a framework level. Developer extensions like
"Vue tools" make stuff only more complicated, not less, thought.

------
brainless
I feel Firebug is one of those developer tools that would have been highly
monetized in the current start era. I owe a lot of my own career path as a Web
software engineer to Firebug.

~~~
homero
I learned CSS with firebug, before that I had no clue what CSS was when it
first came out in daily use

~~~
derefr
I learnt CSS long before Firebug. Which means that still to this day, I’m
vaguely paranoid that I’m underutilizing Firebug (or its successor dev tools)
when I write CSS. The interactive model Firebug exposes just never clicked for
me. I feel like said model is maybe more easily-absorbed when you’re starting
from scratch, and don’t have the “iterate by editing the CSS file and
refreshing the page” model burned into your muscle memory.

Are there any video tutorials someone could recommend, where a proficient user
of the dev tools uses them to interactively develop and tweak the design of a
web-app?

~~~
leptons
I started writing CSS the same week it was first available in Internet
Explorer 3, so "doing it the way you've always done it" isn't really a good
excuse.

Being able to click on a value for most things (left, top, width, height, etc)
and use the up and down arrow to dynamically move an element around the page,
or otherwise tweak anything about it - that's game-changing. If you aren't
using the dev tools to tweak your CSS and instead are updating a file and
hitting reload, you are way behind in productivity. I'm not even being
hyperbolic about this.

You want to know how to do it in 2020? Right-click any element, hopefully it
has either a class property or a inline CSS style property, dev tools should
open and next to the DOM tree view there should be a CSS panel as well as
other panels. Just click around in there, you can edit anything to change the
layout instantly, add styles, tweak values. Once you're done tweaking values
you can copy and paste the CSS just by selecting it in the dev tools, hit
CTRL-C, then paste it into your editor, and then hit reload.

~~~
derefr
I mean, what you're describing doesn't work for me, because the way I write
CSS involves heavy reuse of classes and using CSS-Zen-Garden-esque element
selectors. I try to "move around an element" in the panel? The whole layout
breaks. The approach that makes the CSS inspector _functional_ as a tool for
modifying layout, is a completely different paradigm from the one I'm used to.

To be clear, I'm a backend engineer; in recent times I only write CSS about
once per year, mostly just to update my portfolio site, or to do some
interesting little hack. I've never worked with SCSS/SASS, React, web
components, etc.

But in the past, I _have_ worked full-stack, writing both a backend and the
frontend that it works with. And, in those cases, the CSS I've written works,
and is responsive and accessible, while also being _readable_ and _reusable_ ,
in the same sense that a well-factored library of functions is readable and
reusable.

~~~
fiddlerwoaroof
So, my CSS is similar, when I use dev tools to tweak CSS, I generally adjust
the “element” section rather than my classes, to make the element I’ve
selected look right. Once I’ve gotten that down, I think about the best way to
integrate the new styles into the existing ones.

------
irrational
Firebug is the reason that I started using Firefox, and still use it as my
primary browser today.

The difference between web development before and after firebug was dramatic.

------
usr1106
Confused. I thought Firebug is no longer needed because the functionality is
part of Firefox developer tools, which have been always visible in Firefox for
years (at least in many Linux distros, maybe that's not a Mozilla default?).

The site mentions Firefox Developer Edition. What is that? A quick search
seems to indicate that it's just one version ahead of Beta, what was called
Aurora in the past.

Certainly if you want to test new features that's good. But what is the
benefit for general Web development?

/not a web developer

~~~
lol768
> The site mentions Firefox Developer Edition. What is that? A quick search
> seems to indicate that it's just one version ahead of Beta, what was called
> Aurora in the past.

> Certainly if you want to test new features that's good. But what is the
> benefit for general Web development?

See
[https://news.ycombinator.com/item?id=8583747](https://news.ycombinator.com/item?id=8583747)

In short, separate profile, quicker access to new developer tools/new web
standard implementations by virtue of being its own release channel (as you
mention), developer-friendly defaults.

~~~
evo_9
Thanks for this, this should be the top comment.

It's nice to praise Firebug - it's awesome and I agree with all the praise -
but none of the praise explains / points to this awesome FF Developer Edition
which up until this comment I had never heard of.

------
krisgenre
I am indebted to Firebug forever. If it weren't for Firebug it would have
taken me a really long time to understand how the web (browser) works.

------
ChrisMarshallNY
I loved FireBug. Nowadays, every browser has its capabilities, but back in the
day, FireBug was the only game in town.

~~~
troyjfarrell
Venkman was the only game in town. It was a glorious day when Firebug
surpassed Venkman.

[https://wiki.mozilla.org/Venkman/Firebug_Comparison](https://wiki.mozilla.org/Venkman/Firebug_Comparison)

~~~
sroussey
Yeah, this was the original front end to the debugger apis (which then barely
changed for a decade).

------
julius
Still remember that Javascript bug that only occured when Firebug was NOT
installed.

Was quite tricky to debug, until it finally clicked. Back then the browser did
not have a console.log() function.

~~~
joshstrange
This was still an IE "bug" at least up to 11 IIRC. If you had the console open
then `console.*()` worked but if the console was not open then you would get
an error. So frustrating to have the problem "go away" when you tried to dig
into the issue more. At my last company we had some logic that ran first that
would proxy all the console.log calls through some code that would check if IE
and if the console was open before trying to call the native console.log and
friends.

~~~
sroussey
We recommended to have logging feature flagged, or create a fake console
object, but there were a lot of methods. Having the browsers just implement
something worked better. You never knew where a statement could still be deep
in code.

I guess today, the instructions would be `console?.log()` not that it matters
now. :)

------
mostlystatic
This reminds me of two other now-obsolete web debugging tools.

Weinre[1] let you to view the DOM, network requests, and console output when
testing sites on a phone. Aardwolf[2] provided an interactive JavaScript
debugger, by rewriting the code to add debug hooks.

[1]
[http://people.apache.org/~pmuellr/weinre/docs/latest/](http://people.apache.org/~pmuellr/weinre/docs/latest/)
[2]
[https://github.com/lexandera/Aardwolf](https://github.com/lexandera/Aardwolf)

~~~
anderspitman
Is there consensus on what to use instead of weinre these days? I have mobile-
only issues with my web apps rarely enough that I feel like I always have to
start searching from scratch to find a remote debugging tool.

~~~
admax88q
Both chrome and Firefox support debugging their mobile android versions from
their desktop versions.

I'm sure safari offers the same for iOS.

~~~
JohnBooty

        I'm sure safari offers the same for iOS.
    

Indeed it does! Been quite a while since I used it, but I do remember it being
quite seamless and enjoyable.

[https://www.browserstack.com/guide/how-to-debug-on-
iphone](https://www.browserstack.com/guide/how-to-debug-on-iphone)

------
mongol
Two distinct periods. Web development before Firebug. And web development
after Firebug.

------
erk__
My fondest memory of Firebug is not the javascript tools, but the Flash
Debugger tool; FlashFirebug. I used it years ago to reverse engineer a now
gone livestreaming website to figure out how it worked in the backend.

~~~
naicuoctavian
I remember the tool. Saved me many times during my heavy Flash development
years!

------
theomega
Does anyone know a trick how to get Firebug or similar running directly on
iOS? I know that you can connect the iOS device to your Mac and run the
developer tools on the big machine.

What I’m looking for is having Firebug directly running on the mobile device.

~~~
yorwba
Liriliri's Eruda is in the "or similar" category and works directly in mobile
browsers:
[https://github.com/liriliri/eruda](https://github.com/liriliri/eruda) With
the caveat that if you want to use it on arbitrary websites, you need to be
able to inject the script somehow, e.g. using a bookmarklet, which may not be
possible in all browsers.

EDIT: Discussion 4 months ago
[https://news.ycombinator.com/item?id=22968079](https://news.ycombinator.com/item?id=22968079)
, where _nxrabl_ shared the tip of editing an existing bookmark with the
javascript code to get it to work in Safari on iOS.

------
nojvek
I was a big flash junkie. When firebug came out, my first thought was “why
isn’t there a swfbug”. It was amazing. You add a script and your page has a
built in debugger. I made my php pages have a special url param __firebug=1
and it would load with firebug.

Firebug had other nice things where you could respond with server traces. Made
it really nice to debug server perf too.

I remember how mind blown I was when I read the firebug source code. At that
moment I wanted to a competent enough programmer to write that kind of code.
Jquery was another huge eye opener too. I did write a react like dom differ
back in the day but js was too slow.

------
kentbrew
I have a career because of Firebug.

~~~
sroussey
That’s probably the best compliment I’ve seen.

------
crizzlenizzle
That brings back some memories. Back in 2005 I started to use Linux as my
daily driver and in 2007 I started as a web developer. Firebug was a blessing,
still thanks to IE6 my job was a painful ride.

------
kilroy123
For a long time, I resisted switching to Chrome just because of Firebug. IMO
it was superior for quite a while. Eventually, Chrome got better, and I made
the jump.

Nowadays, I'm back on Firefox.

------
paul7986
Firebug and or Chrome's similar dev tool is how I design websites for a
living. Everything can be changed live in the browser. I start with a
bootstrap template change its html/css accordingly and after save it in my
html or css files. Just don't refresh the browser though there is a way to
have it saved directly to your html file without leaving the browser.

~~~
FajitaNachos
My first real dev project was a chrome extension that would save those
html/css and auto commit them to a GitHub repo.

~~~
paul7986
Yes a friend set it up so it automatically changed the files locally. But, for
me I frequently use the undo function in my local files and having it auto
save didnt work for me. Personal preference.

Cool that yours auto pushed to a repo.

------
Ayesh
I used Firebug even after Firefox added devtools and Firebug stopped it's
development. It truly shows how powerful XPI add-ons really were. I still
stick with Firefox and the dev tools are quite good, and features like flexbox
and don't helpers are quite useful.

------
abhisheksp
I remember feeling like a Hacker using Firebug to catch rare shiny Pokemons on
poorly designed online Pokemon games through simple edits in 200x

------
edgarvaldes
Were the team and functionality of Firefox Developer Tools affected by the
recent downsize at Mozilla?

~~~
valtism
Yes, most of the team were laid off, along with most of the team maintaining
MDN

------
bovermyer
I feel grateful for everything Firebug did for me over the years. It
definitely made my life easier as a web developer.

------
mixmastamyk
I used firebug for about ten years, until a new update came out with hardcoded
white backgrounds, ignoring the dark system theme we used in a studio.

After my bug was closed wontfix I switched to the then new Firefox dev tools
and never used firebug again. White background fascists take note.

------
pknerd
As long as I used FF I always used Firebug. Thanks Joe Hewitt.

------
NamPNQ
Firebug, the most wanted tool for web developer in the 2000s

------
dependenttypes
I never understood why mozilla decided to implement their own inferior and
laggier version of developer tools when firebug existed.

~~~
JohnBooty
In what way(s) do you find it inferior?

~~~
ars
If you log the contents of an object with firebug and then modify the object
later in your script the firebug output does not change. But do the same thing
with Firefox and the contents of the object will change.

To preserve the object as it was when debugged you have to either copy it or
log all the specific properties you're interested in rather than the object as
a whole.

~~~
coolreader18
Some would probably find that superior to firebug

~~~
ars
It's rare to need to see the current (static) state of an object, more often
you want to see how the object changes as the code runs.

------
Mustan
Thanks, Firebug.

------
fao_
They're advertising a web development tool on a website that doesn't scale to
my laptop's 1280x800 monitor. I literally don't know what to say to that.

~~~
stjohnswarts
It's a tribute page, not a money maker site. They did fine.

~~~
fao_
conversely it takes literally two seconds to Control-Shift-M and check smaller
resolutions, and it takes even less time if you don't code pixel sizes,
something that a CSS developer in 2020 should never, ever do

------
Normille
Is this archaeology corner?

~~~
letientai299
No. But once in a while, I want to remind us some bit of history. Hopefully
inspire new developers, just like how I got the inspirations about old stuff
when I first joined HN.

~~~
Normille
Fair enough.

I remember first discovering Firebug and being wowed by it, back when most
browsers only offered you "View Source" as a way of looking under the bonnet.

I just wondered why someone had submitted a 4 year old blog post announcing
the demise of Firebug, seeing as every browser now has it built-in.

