Firebug | Hacker News Reader

Firebug

getfirebug.com

378 pointsletientai29981 comments

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.

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.

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.

Same here. I remember showing Firebug to coworkers and them thinking that I was showing them some kind of wizardry.

I used Firebug on a work site once to quickly demonstrate a potential change to a website. They got angry thinking I had access to the actual site and that I had changed it without permission.

If you had Visual Studio to go with IE6, you had access to simply amazing debugging tools.

Those tools blow even today's Chrome and Firefox dev tools out of the water in terms of accessibility, both in terms of keyboard/mouse and discoverability of interface.

Sadly, few people had access, because you had to either pay or pirate.

Firefox took tabs from Opera.

Excel invented tabs! (Got this from some MSFT presentation, when they introduced tabs tonIE)

I think many had a similar experience with Firebug, including me. I remembering coming across it for the first time in an issue of Dr Dobb's. I read the article wide-eyed. Truly a "game changer" worthy of the term.

Errr, firebug was a copy of IE developer toolbar, which was released at least a year before firebug. I think the original IE Dev toolbar beta release was in 2005, maybe 2006? While firebug came out 2007ish. Looks like MS has finally shut down the blog originally announcing it so can't link to it any more.

IE developer toolbar was actually better for quite a while too.

copy implies being of equivalent quality, I seem to remember Firebug being significantly better, although maybe I didn't use the absolutely first version.

It definitely wasn't, it lacked a lot of features of IE Dev toolbar, as far as I remember. Took a few years before it was better, MS let the Dev toolbar drift for a while, and Firebug overtook it. They also didn't promote the toolbar much, which meant a lot of people thought firebug was a revolutionary idea. I seem to remember, and could be wrong as it's a long time ago now, that IE Dev Toolbar's JavaScript support was much better.

Then Chrome came out and most people switched to that, partially as the Dev tools were great, although, again, initially lacked some features so I tended to use a mix of both for about a year. But Google iterated fast and firebug got clunky.

Ok, guess I'll take your word for it, I don't remember when I started with firebug exactly - probably not a super-early adopter though, I tend to let things mature for a bit before using.

Of course it wasn't as IE Dev toolbar was so much worse than Firebug. For example all unhandled exceptions from event handlers would show up in IE Dev toolbar as originated at row 0, column 0 and helpfully showing you the beginning of a JS script. I've wasted _days_ finding out bugs using that wretched tool.

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.

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

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?

I don't think there's too much to learn there; it's not really a different model at all.

You're still writing your CSS in your text editor like normal.

1. Via the debugger you can tweak styles and see feedback in real time. It's just a much faster feedback loop than refreshing the page every time. Then you cut and paste (or save as...) to get the changes back into your source code.

2. You can debug styles. If you are wondering why a particular bit of text is green and bold, it will show you what line of CSS it's inheriting each property from. (And which styles have been overridden)

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.

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.

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.

I could still do all of that by implementing some JavaScript to immediately preview the CSS I am writing.

I don’t really think there is a paradigm shift except for general learning curve that is in effect here.

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.

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

It's the old website, look at the timeline that stops at 2017 and it pointing to the default Firefox tools.

> 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

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.

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.

Do you know if they are going to keep developing the Developer Edition after all the layoffs?

On the same computer I use the developer edition for work and regular for personal. Makes it really easy to keep profile, bookmarks, etc separate. Also the dev tools have a neat neon dark color scheme.

You should read the whole web page and you would understand.

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.

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

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

https://wiki.mozilla.org/Venkman/Firebug_Comparison

Forgot about that one.

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

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.

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.

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

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/ [2] https://github.com/lexandera/Aardwolf

Weinre made building apps using PhoneGap/Cordova just that tiny little bit less painful in the early days. Really great tool.

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.

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

I'm sure safari offers the same for iOS.

    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

Actually, last time I had an issue with iOS safari I found this really useful since I'm developing on Linux:

https://apitman.com/12/#debuggin-ios-safari

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

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.

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

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.

Liriliri's Eruda is in the "or similar" category and works directly in mobile browsers: 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 , where nxrabl shared the tip of editing an existing bookmark with the javascript code to get it to work in Safari on iOS.

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.

I have a career because of Firebug.

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

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.

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.

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.

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

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.

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.

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

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

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

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

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.

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

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

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

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

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.

Some would probably find that superior to firebug

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.

Firebug could do it both ways, that was the beauty of console.dir().

Thanks, Firebug.

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.

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

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

Is this archaeology corner?

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.

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.

Reply on news.ycombinator.com