20 ms·

Thank You, Firebug (2017)

375 points by memorable 4y ago

moasda 4y ago
For me, Firebug was a game changer in web development. It has set a new standard.
- mongol 4y ago
  For sure. I think Firebug, Gmail and Google Maps are approximately of the same age and they all opened up a new era, showing the way to a more modern web. I am unsure if the Web 2.0 moniker applies to what happened around this time but I think it was around then too.
  - netsharc 4y ago
    Isn't Web 2.0 the web with user-contributed content, i.e. social media? For me, being part of Web 2.0 would not be something to be proud about, it's the tech that brought uninformed, angry populist rage online...
    - geerlingguy 4y ago
      I think Web 2.0 was more when the web became more interactive. Instead of only static web pages there were forums, UIs that responded to your actions, and early social networks (but not the modern monsters we currently have). It enabled them, but it wasn't strictly "Web 2.0".
      - bornfreddy 4y ago
        Yes, Web 2.0 is about XHR and interactive UIs. That said, even at the time the definition was not really clear. I remember a joke, why Web 2.0 is like teen sex... Everyone is talking about it, almost noone is doing it, and even those that are, are probably doing it wrong. Fun times. You could change the image without reloading the page. Woohoo!
ZiiS 4y ago
I genuinely wonder if Flash/Silverlight would have won without this single tool.
- GuB-42 4y ago
  I think Flash lost because it shot itself in the foot, Firebug or not. Flash was way beyond the web stack of that time in pretty much every aspect, and it would still have some advantages even today if it was still supported. But Adobe completely dropped the ball. The plugin was a buggy mess, which regularly topped the charts in term of vulnerabilities and accessibility was pretty bad, all fixable problems they didn't fix. Adobe also didn't work with browser vendors and web standardization bodies to improve integration, instead relying on the already obsolete nsapi. Browsers kept nsapi support just for Flash, but as some point, enough is enough. I believe that with a bit more care from Adobe, Flash could have been part of the web standards, and I think it would have been better that what we have now. I don't know much about Silverlight but it looks like a Flash knockoff that didn't fix any of the core issue Flash had.
  - asddubs 4y ago
    i think the greatest thing we lost with flash is even non-technical people making something in an editor, hitting export, and getting a single small file that worked similarly enough to an image that it was trivial to just upload somewhere and have it be embedded there.
    - bornfreddy 4y ago
      This. I hated flash sites, but it gave non-technical people a chance to be creative. Designers especially loved it, though they often used it for wrong purposes (web pages) too. But good luck teaching them how to make that tetris clone in React nowadays...
  - hinkley 4y ago
    Flash is a shining example of the concept, “Faster than Possible”. When all of the vendors have a similar product, you chose based on feature set and cost (not all costs are monetary). When only one vendor has an interesting feature set, you need to ask yourself why, and it it’s too good to be true.
zegl 4y ago
Firebug was a game-changer when I discovered it back in 2008 or so. I wasn't a particularly good developer then, and the complete lack of debugging tools made it even worse: alert("this thing happened!") was literally the only way to debug anything (that I knew of anyway). Afterwards, IIRC, Microsoft released a debugger for IE built into Visual Studio, and later both IE and Chrome followed Firebugs footsteps.
- JohnBooty 4y ago
  I wasn't a particularly good developer then, and the complete lack of debugging tools made it even worse Yeah! Before Firebug, I was strictly a "do it server-side" guy at all costs. The experience of trying to debug JS on any browser, let alone multiple browsers, was just a total crapshow. I was 10x, maybe 20x more productive server-side. Firebug changed that. It truly paved the way for actually-sane client side development/debugging. It is not an understatement to say that Firebug changed the world.
- kevincox 4y ago
  And alert was incredibly annoying because it required interaction to continue and the log wasn't visible to provide history. When I got really desperate I would stick a <pre id=log> at the top of the page and then start adding lines to it.
daemond 4y ago
There are still people paying tribute to it by stars. https://ossinsight.io/analyze/firebug/firebug https://ossinsight.io/analyze/firebug/firebug
- Exness199507 4y ago
dry_soup 4y ago
Firebug is what made HTML, CSS, and JS click for me. Seeing a website interactively update as you made changes, as well as inspecting existing websites to see how they worked made all those concepts so much easier to grasp.
rootsudo 4y ago
modifying client side code was great fun.
glenjamin 4y ago
Firebug was some truly excellent work - but I think it's worth also mentionining its precursor Venkman - which in turn built upon the js/jsd low-level debugging APIs inside the mozilla suite. https://www-archive.mozilla.org/projects/venkman/ https://www-archive.mozilla.org/projects/venkman/ edit: there's a nice write-up of how firebug got started here https://flailingmonkey.com/the-history-of-firebug https://flailingmonkey.com/the-history-of-firebug
- masklinn 4y ago
  > I think it's worth also mentionining its precursor Venkman Is it, really? The experience of Venkman was horrendous. Not quite as bad as MS’s Script Debugger (I don’t remember venkman crashing multiple times per session, and it was able to debug the toplevel frame), but still just awful all around. And more relevant, it was nothing special, at least that I remember. It was notable in being a “normal” extension, but that aside it was a pretty standard if not sub-par debugger experience for the time.
  - genezeta 4y ago
    I do remember Venkman crashing multiple times, but to be fair it was the older "sort of stand-alone"-ish Venkman. The later version packed as an extension was a bit more stable. But going back to the relevance subject, I don't really think it is worth mentioning. But not because of performance but because it was a fairly different thing. Mostly just a JS debugger with a couple of additional tools and little/no support. Usually you would need a bunch of other scripts such as XRAY [0] and others to reach a functionality somewhat comparable to Firebug. [0] https://westciv.com/xray/ https://westciv.com/xray/
  - cxr 4y ago
    Strong disagree. Compared to Venkman, Firebug had the following misfeatures: - modal interface* - bloat - dubious** interface labels, like "DOM" (or whatever) to look at the object's property tree - totally sucked at debugging any part of the Gecko runtime/toolkit code, or anything that wasn't a Web page (including e.g. Firebug's own code) * This is a misfeature that every browser's built-in devtools copied, and it's completely mystifying. Thanks, Firebug, but I want the script debugger to be separate from the DOM Inspector, so I can have both on screen at the same time (and I want to be able to have multiple inspectors for multiple objects open at the same time, too, for that matter, so I don't have to keep flipping back and forth between them like I'm navigating fullscreen mobile apps and being forced to think through a straw. I don't even use multiple large displays; I use a 13" laptop screen for everything. No idea why all the proponents of large, multi-screen setups don't bristle about this to an even noisier degree.) ** Generous description; "inaccurate" (or just plain "wrong") would be accurate
annnoo 4y ago
Wow, i almost forgot about Firebug. From my point of view it was really a game changer. The first time debugging and understanding web-applications became accessible. Probably all browser dev tools were inspired by this tool
- oaiey 4y ago
  Not only probably. It created the gold standard.
  - lnxg33k1 4y ago
    Also because I think Firefox had firebug and Google hired the firebug guy to work on chrome?
- Cockbrand 4y ago
  It certainly changed my life when I saw it for the first time. In fact, I do remember the exact situation when I was shown Firebug, and my realization that my live as a (then) frontend developer would change for the better from that moment on.
- cxr 4y ago
  > Probably all browser dev tools were inspired by this tool Joe Hewitt begat DOM Inspector[1], which, after Hewitt left Netscape, begat Firebug (originally "FireBug"), and then pretty much every other Web developer tool began as an attempt to create something that could compete with what was available in the Mozilla ecosystem. 1. https://en.wikipedia.org/wiki/DOM_Inspector https://en.wikipedia.org/wiki/DOM_Inspector 2. https://web.archive.org/web/20060419170530/http://www.joehewitt.com/blog/firebug_a_love.php https://web.archive.org/web/20060419170530/http://www.joehew...
- listless 4y ago
  Firebug enabled me to be a "real" web developer. Prior to that I was just slinging ASPX files with no real idea what I was doing. This tool was the gold standard for powerful developer tools that aren't overly complicated.
- 4y ago
_ZeD_ 4y ago
I still miss the possibility to `console.log` functions and have a clickable log that automatically open the right source at the right line, something that it's still not available on "native" `console`s
- tim-- 4y ago
  Can't you click on the filename/number on the right hand side? That works for me in Chrome. Source maps even allow it to open to the correct file inside Chrome.
  - ajanuary 4y ago
    I think they mean: function addStuff(a, b) { return a + b; } function logFunction() { console.log(addStuff); } logFunction(); And have it log out that `addStuff` is defined on line 1.
    - WorldMaker 4y ago
      In Edge Dev Tools (so I'm sure it is similar in Chrome Dev Tools) it doesn't show source/line information in the log message directly (though it does have a link to the source line for the console.log message on the far right), but right-clicking a logged function includes a context menu choice for "Show function definition" which will jump to addStuff's declaration on line 1.
tim-- 4y ago
Internet Explorer 6 also had the Microsoft created IE Dev Toolbar that came out around the same time as Firebug (I think it was 6 months after?). It really was a powerful tool, but somehow not really well known in the dev world at that time. I'm really sad that Microsoft put all thier eggs in the Chrome/Chromium basket, instead of continuing thier own engine, or supporting Firefox.
- JohnBooty 4y ago
  I remember really struggling with the IE Dev Toolbar. It was infinitely better than nothing, but it paled in comparison to Firebug.
- 5350-uiop-1130 4y ago
  Yeah, I remember using this to try and debug MS JScript issues. What a headache, it was extremely flaky and would crash if you looked at it wrong.
  - hinkley 4y ago
    I think people forget that debuggers used to crash the IDE as a matter of course (and they didn’t auto save as a matter of course). VisualAge for Java, the precursor for Eclipse, was the first IDE where the debugger was stable. However the editor would just up and crash instead, which is worse. Symantec had the first generally stable IDE in VisualCAFE. I learned to obsessively type CTRL-S on word processors in college. But that came to adulthood with me because of shit IDEs. I’ve used Jetbrains for more than 15 years. I know it saves when it loses focus. And I still hit save about ten times a day.
- hinkley 4y ago
  Everyone hated IE by then. It was the ex that only tried hard after the breakup had started. It’s too late. Don’t forget your toothbrush.
andrew_ 4y ago
Being able to embed that in IE was just a total leap forward. Anyone who remembers the ambiguous "A JavaScript error occurred..." dialogs with zero helpful information will probably also remember the first time that Firebug gave you the actual location and file of the error. Breakpoints?! Amazing.
- hu3 4y ago
  Oof. I get PTSD from "A JavaScript error occurred". I knew I was in for an alert() debugging session when that error showed up.
leejoramo 4y ago
In the beginning we used Show Source and Console. As web pages grew in size it became difficult to navigate the source code, and you still had no direct way to view how CSS was being applied. The first web inspector that I used was Xyle Scope in 2004. It was an early tool based on Apple's new Safari engine. It was a few years before Firebug was released, and even then it took a while for Firebug to beat Xyle Scope in features. I still have the lingering feeling that Xyle Scope's UI was better at directly inspecting HTML and CSS than our current tools. Although that maybe the haze of nostalgia. I found it hard to find any really good screen shots but here is one: https://taoofmac.com/space/apps/xyle_scope https://taoofmac.com/space/apps/xyle_scope Of course, FireBug and its successors do so much more than just HTML/CSS inspection. I would often jump between Firebug and Xyle Scope. Eventually, Cultured Code the developers for Xyle Scope focused their talents on creating their Things task manager. https://culturedcode.com/things/ https://culturedcode.com/things/
mbrevoort 4y ago
Firebug how sweet the sound That saved a wretch like me! I once was lost, but now am found, Was blind, but now I see.
bni 4y ago
I remember using something in Netscape that was able to debug JavaScript code in webpages, must have been in 2000 or so, maybe in Netscape 4. Don't remember if it was built in or not. Anyone remember what it was called?
- inanutshellus 4y ago
  Venkman, perhaps?
deleted 4y ago
[deleted]
mhd 4y ago
I'm still not sure whether adapting it as the main browser tool was a good choice. It would've been interesting to see various extensions working with e.g. a deep-internal API. Probably with none installed by default, making the browsers a bit more modular.
tiborsaas 4y ago
Firebug was a game changer in frontend development, suddenly everything made sense and things got a lot more simple. Before firebug in the IE6 days, there was a script that you could inject into your page which created a draggable floating window in the document with a basic console and maybe some DOM view. I can't remember the name.
- Exness199507 4y ago
julius 4y ago
I remember my JS code breaking because the customers firefox browser did not have console.log :)
NikhilVerma 4y ago
My first PR ever was in Firebug :) https://firstpr.me/#NikhilVerma https://firstpr.me/#NikhilVerma Loved that software and it truly kindled the frontend developer inside me.
ChrisArchitect 4y ago
Some previous discussion so many years ago when this was news https://news.ycombinator.com/item?id=13107802 https://news.ycombinator.com/item?id=13107802
irrational 4y ago
Firebug is why I've been using Firefox as my primary browser since Firebug first came out. Firebug was such a huge game changer for web development. Before firebug we had to use alerts or writing to the DOM to debug. It is hard to imagine a web development world without Inspect, Console, etc., but that was the reality for many years. Then Firebug came around! Eventually Chrome added developer tools, but I was so used to Firebug that I never even tried Chrome. I was quite sad when Firefox created official developer tools and Firebug ceased to exist. It was hard letting go of an old friend who led the way.
andrewmcwatters 4y ago
It’s so weird to me when people use the phrase “fight the good fight (of faith),” without knowing the latter half of the expression or where it comes from. It makes web debugging sound like a religious struggle.
ccheney 4y ago
Firebug was a godsend back in the day. I also used Firebug Lite pretty heavily which was a javascript file you could inject into your website to get a variation of Firebug working in browsers such as IE6
Waterluvian 4y ago
On this topic, and Chrome Dev Tools, does anyone else struggle with getting access to the state of their app? I find that because of all the encapsulation and transpilation tricks, it’s basically impossible to get a hold of my state or functions in the dev tools during runtime. The best I can do is forcibly set window.state and do a bit of work. I can set breakpoints and do all that stuff. But I remember back in the bad days when it was pretty easy to “find your app” from the dev tools. I’m probably doing a poor job describing it, but does anyone else experience this?
- cxr 4y ago
  It's a known problem, especially with the move away from self-styled OOP paradigms and the rise of closure-infested programming. (I.e., "OOP, but with closures—and which (for overall very bad reasons) we're going to insist on describing as FP".) Recent thoughts by one of the Eve/Light Table developers: <https://www.scattered-thoughts.net/writing/coding/ https://www.scattered-thoughts.net/writing/coding/> (Ctrl+F on "hard-to-query state" and "reachable".)
  - Waterluvian 4y ago
    Thank you for the link!
joshstrange 4y ago
I still remember where I was when I first learned about Firebug and how magical it felt. I can picture the open workspace I was in and another developer mentioning it to me. It was like going from console.log/print_r/var_dump/etc-ing to using a debugger to attach and step through code, just a night and day difference. Nowadays we take the dev tools for granted but I'll always remember Firebug as the original dev tools and it being absolutely amazing for the time.
paulirish 4y ago
An interesting convention that ~started with Firebug was the use of angle brackets in the DOM/Elements view. (eg a DIV element is shown as `<div>`). HTML, as a text format, uses angle brackets to denote tags. But DOM is an in-memory object model; it doesn't have tags, but elements, and those have nothing do with angle brackets (other than getting el.innerHTML will serialize back). From a usability POV, it's entirely defendable: make the DOM visually look like the HTML you authored. But Firebug and our current browser devtools only add them for aesthetics and familiarity. It rarely causes problems, but it'll explain why you'll see `<tbody>` in DevTools even if your HTML doesn't have it. Still, I think dropping the HTML-y representation of DOM elements could be a win — removing end tags in particular would improve the information density. Bonus: A Firebug Cheatsheet I made in 2007, 4 years before I was working on Chrome DevTools: https://imgur.com/I2KbZWm https://imgur.com/I2KbZWm
- gabrielizaias 4y ago
  Wow, I remember that cheatsheet was really handy! Thanks for that. I still google "box sizing paul irish" every now and then to get to your blog… I can hardly believe it has been 10 years since you published that, time flies.
- cxr 4y ago
  The pseudo-source view also came (and still comes) with noticeable performance drawbacks. Opening the inspector on a nested element using today's browsers' built-in inspectors (which are implemented in HTML nowadays) can be slower than if you were to do the same thing on the same graph with a Web development extension in Firefox, since extensions were able to use the XUL platform, and that meant being free to implement nsITreeView. And that's even with the advantage of modern hardware and and the trick where modern development tools will choose to elide elements in favor of showing a message that says that some nodes are hidden, with a button to e.g. "Show all 347 nodes". I just tried this with a 5000-row table, and clicking the "Show all[...]" button in Firefox's built-in developer tools has seemingly no effect at first—the inspector appears appears unresponsive for several seconds, before finally painting the expansion. In programs from 15 years ago running on 15+ year old hardware, on the other hand, this could expected to be nearly instant. Jamie Brandon recently complained about this sort of thing, comparing the experience of creating an information-dense UI using imgui versus doing the same "on the web" (i.e. in the browser, using HTML): <https://www.scattered-thoughts.net/log/0026/ https://www.scattered-thoughts.net/log/0026/>
TimTheTinker 4y ago
My former employer is still using HTA (HTml Application) to dynamically render a lot of tool windows in their massive legacy COM application on Windows. HTAs render using an IE6-era renderer that is still present in Windows. (I wasn't in the group that built these tool windows, but I did build a lot of in-house web apps to help with various workflows.) A few years ago, I had a colleague come by with bug he couldn't solve in an HTA tool window. There's no built-in console or anything... but I showed him how to copy/paste the Firebug Lite minified JS into a <script> tag, and how he could then press F12 to bring up Firebug Lite inside the HTA tool window. (Note Firebug Lite supported IE all the way back to 6). He was able to quickly debug & resolve the problem. Thanks Firebug!
- cxr 4y ago
  Microsoft themselves ended up doing something like this—VorlonJS. <https://github.com/MicrosoftDX/Vorlonjs https://github.com/MicrosoftDX/Vorlonjs> There's also weinre <https://people.apache.org/~pmuellr/weinre/ https://people.apache.org/~pmuellr/weinre/>, which is the same with the (old) WebKit Inspector code, rather than Firebug.
  - TimTheTinker 4y ago
    Firebug Lite enabled debugging directly within the tool window -- i.e. the Firebug UI appeared on the bottom edge of the HTA UI area (not a remote debugging scenario).
gorgoiler 4y ago
Bring back 3D View! http://devlup.com/wp-content/uploads/2012/01/3d-1.png http://devlup.com/wp-content/uploads/2012/01/3d-1.png
racl101 4y ago
Firebug was great and I am grateful that it existed!
node-bayarea 4y ago
It was ABSOLUTELY wonderful to have Firebug back in 2006/7 timeframe. I really enjoyed using it and looking at the DOM and whatnot!

375 points by memorable 4y ago

moasda 4y ago

For me, Firebug was a game changer in web development. It has set a new standard.

mongol 4y ago
For sure. I think Firebug, Gmail and Google Maps are approximately of the same age and they all opened up a new era, showing the way to a more modern web. I am unsure if the Web 2.0 moniker applies to what happened around this time but I think it was around then too.
- netsharc 4y ago
  Isn't Web 2.0 the web with user-contributed content, i.e. social media? For me, being part of Web 2.0 would not be something to be proud about, it's the tech that brought uninformed, angry populist rage online...
  - geerlingguy 4y ago
    I think Web 2.0 was more when the web became more interactive. Instead of only static web pages there were forums, UIs that responded to your actions, and early social networks (but not the modern monsters we currently have). It enabled them, but it wasn't strictly "Web 2.0".
    - bornfreddy 4y ago
      Yes, Web 2.0 is about XHR and interactive UIs. That said, even at the time the definition was not really clear. I remember a joke, why Web 2.0 is like teen sex... Everyone is talking about it, almost noone is doing it, and even those that are, are probably doing it wrong. Fun times. You could change the image without reloading the page. Woohoo!

ZiiS 4y ago

I genuinely wonder if Flash/Silverlight would have won without this single tool.

GuB-42 4y ago
I think Flash lost because it shot itself in the foot, Firebug or not. Flash was way beyond the web stack of that time in pretty much every aspect, and it would still have some advantages even today if it was still supported. But Adobe completely dropped the ball. The plugin was a buggy mess, which regularly topped the charts in term of vulnerabilities and accessibility was pretty bad, all fixable problems they didn't fix. Adobe also didn't work with browser vendors and web standardization bodies to improve integration, instead relying on the already obsolete nsapi. Browsers kept nsapi support just for Flash, but as some point, enough is enough. I believe that with a bit more care from Adobe, Flash could have been part of the web standards, and I think it would have been better that what we have now. I don't know much about Silverlight but it looks like a Flash knockoff that didn't fix any of the core issue Flash had.
- asddubs 4y ago
  i think the greatest thing we lost with flash is even non-technical people making something in an editor, hitting export, and getting a single small file that worked similarly enough to an image that it was trivial to just upload somewhere and have it be embedded there.
  - bornfreddy 4y ago
    This. I hated flash sites, but it gave non-technical people a chance to be creative. Designers especially loved it, though they often used it for wrong purposes (web pages) too. But good luck teaching them how to make that tetris clone in React nowadays...
- hinkley 4y ago
  Flash is a shining example of the concept, “Faster than Possible”. When all of the vendors have a similar product, you chose based on feature set and cost (not all costs are monetary). When only one vendor has an interesting feature set, you need to ask yourself why, and it it’s too good to be true.

zegl 4y ago

Firebug was a game-changer when I discovered it back in 2008 or so. I wasn't a particularly good developer then, and the complete lack of debugging tools made it even worse: alert("this thing happened!") was literally the only way to debug anything (that I knew of anyway). Afterwards, IIRC, Microsoft released a debugger for IE built into Visual Studio, and later both IE and Chrome followed Firebugs footsteps.

JohnBooty 4y ago
I wasn't a particularly good developer then, and the complete lack of debugging tools made it even worse Yeah! Before Firebug, I was strictly a "do it server-side" guy at all costs. The experience of trying to debug JS on any browser, let alone multiple browsers, was just a total crapshow. I was 10x, maybe 20x more productive server-side. Firebug changed that. It truly paved the way for actually-sane client side development/debugging. It is not an understatement to say that Firebug changed the world.
kevincox 4y ago
And alert was incredibly annoying because it required interaction to continue and the log wasn't visible to provide history. When I got really desperate I would stick a <pre id=log> at the top of the page and then start adding lines to it.

daemond 4y ago

There are still people paying tribute to it by stars. https://ossinsight.io/analyze/firebug/firebug https://ossinsight.io/analyze/firebug/firebug

Exness199507 4y ago

dry_soup 4y ago

Firebug is what made HTML, CSS, and JS click for me. Seeing a website interactively update as you made changes, as well as inspecting existing websites to see how they worked made all those concepts so much easier to grasp.

rootsudo 4y ago

modifying client side code was great fun.

glenjamin 4y ago

Firebug was some truly excellent work - but I think it's worth also mentionining its precursor Venkman - which in turn built upon the js/jsd low-level debugging APIs inside the mozilla suite. https://www-archive.mozilla.org/projects/venkman/ https://www-archive.mozilla.org/projects/venkman/ edit: there's a nice write-up of how firebug got started here https://flailingmonkey.com/the-history-of-firebug https://flailingmonkey.com/the-history-of-firebug

masklinn 4y ago
> I think it's worth also mentionining its precursor Venkman Is it, really? The experience of Venkman was horrendous. Not quite as bad as MS’s Script Debugger (I don’t remember venkman crashing multiple times per session, and it was able to debug the toplevel frame), but still just awful all around. And more relevant, it was nothing special, at least that I remember. It was notable in being a “normal” extension, but that aside it was a pretty standard if not sub-par debugger experience for the time.
- genezeta 4y ago
  I do remember Venkman crashing multiple times, but to be fair it was the older "sort of stand-alone"-ish Venkman. The later version packed as an extension was a bit more stable. But going back to the relevance subject, I don't really think it is worth mentioning. But not because of performance but because it was a fairly different thing. Mostly just a JS debugger with a couple of additional tools and little/no support. Usually you would need a bunch of other scripts such as XRAY [0] and others to reach a functionality somewhat comparable to Firebug. [0] https://westciv.com/xray/ https://westciv.com/xray/
- cxr 4y ago
  Strong disagree. Compared to Venkman, Firebug had the following misfeatures: - modal interface* - bloat - dubious** interface labels, like "DOM" (or whatever) to look at the object's property tree - totally sucked at debugging any part of the Gecko runtime/toolkit code, or anything that wasn't a Web page (including e.g. Firebug's own code) * This is a misfeature that every browser's built-in devtools copied, and it's completely mystifying. Thanks, Firebug, but I want the script debugger to be separate from the DOM Inspector, so I can have both on screen at the same time (and I want to be able to have multiple inspectors for multiple objects open at the same time, too, for that matter, so I don't have to keep flipping back and forth between them like I'm navigating fullscreen mobile apps and being forced to think through a straw. I don't even use multiple large displays; I use a 13" laptop screen for everything. No idea why all the proponents of large, multi-screen setups don't bristle about this to an even noisier degree.) ** Generous description; "inaccurate" (or just plain "wrong") would be accurate

annnoo 4y ago

Wow, i almost forgot about Firebug. From my point of view it was really a game changer. The first time debugging and understanding web-applications became accessible. Probably all browser dev tools were inspired by this tool

oaiey 4y ago
Not only probably. It created the gold standard.
- lnxg33k1 4y ago
  Also because I think Firefox had firebug and Google hired the firebug guy to work on chrome?
Cockbrand 4y ago
It certainly changed my life when I saw it for the first time. In fact, I do remember the exact situation when I was shown Firebug, and my realization that my live as a (then) frontend developer would change for the better from that moment on.
cxr 4y ago
> Probably all browser dev tools were inspired by this tool Joe Hewitt begat DOM Inspector[1], which, after Hewitt left Netscape, begat Firebug (originally "FireBug"), and then pretty much every other Web developer tool began as an attempt to create something that could compete with what was available in the Mozilla ecosystem. 1. https://en.wikipedia.org/wiki/DOM_Inspector https://en.wikipedia.org/wiki/DOM_Inspector 2. https://web.archive.org/web/20060419170530/http://www.joehewitt.com/blog/firebug_a_love.php https://web.archive.org/web/20060419170530/http://www.joehew...
listless 4y ago
Firebug enabled me to be a "real" web developer. Prior to that I was just slinging ASPX files with no real idea what I was doing. This tool was the gold standard for powerful developer tools that aren't overly complicated.
4y ago

_ZeD_ 4y ago

I still miss the possibility to `console.log` functions and have a clickable log that automatically open the right source at the right line, something that it's still not available on "native" `console`s

tim-- 4y ago
Can't you click on the filename/number on the right hand side? That works for me in Chrome. Source maps even allow it to open to the correct file inside Chrome.
- ajanuary 4y ago
  I think they mean: function addStuff(a, b) { return a + b; } function logFunction() { console.log(addStuff); } logFunction(); And have it log out that `addStuff` is defined on line 1.
  - WorldMaker 4y ago
    In Edge Dev Tools (so I'm sure it is similar in Chrome Dev Tools) it doesn't show source/line information in the log message directly (though it does have a link to the source line for the console.log message on the far right), but right-clicking a logged function includes a context menu choice for "Show function definition" which will jump to addStuff's declaration on line 1.

tim-- 4y ago

Internet Explorer 6 also had the Microsoft created IE Dev Toolbar that came out around the same time as Firebug (I think it was 6 months after?). It really was a powerful tool, but somehow not really well known in the dev world at that time. I'm really sad that Microsoft put all thier eggs in the Chrome/Chromium basket, instead of continuing thier own engine, or supporting Firefox.

JohnBooty 4y ago
I remember really struggling with the IE Dev Toolbar. It was infinitely better than nothing, but it paled in comparison to Firebug.
5350-uiop-1130 4y ago
Yeah, I remember using this to try and debug MS JScript issues. What a headache, it was extremely flaky and would crash if you looked at it wrong.
- hinkley 4y ago
  I think people forget that debuggers used to crash the IDE as a matter of course (and they didn’t auto save as a matter of course). VisualAge for Java, the precursor for Eclipse, was the first IDE where the debugger was stable. However the editor would just up and crash instead, which is worse. Symantec had the first generally stable IDE in VisualCAFE. I learned to obsessively type CTRL-S on word processors in college. But that came to adulthood with me because of shit IDEs. I’ve used Jetbrains for more than 15 years. I know it saves when it loses focus. And I still hit save about ten times a day.
hinkley 4y ago
Everyone hated IE by then. It was the ex that only tried hard after the breakup had started. It’s too late. Don’t forget your toothbrush.

andrew_ 4y ago

Being able to embed that in IE was just a total leap forward. Anyone who remembers the ambiguous "A JavaScript error occurred..." dialogs with zero helpful information will probably also remember the first time that Firebug gave you the actual location and file of the error. Breakpoints?! Amazing.

hu3 4y ago
Oof. I get PTSD from "A JavaScript error occurred". I knew I was in for an alert() debugging session when that error showed up.

leejoramo 4y ago

In the beginning we used Show Source and Console. As web pages grew in size it became difficult to navigate the source code, and you still had no direct way to view how CSS was being applied. The first web inspector that I used was Xyle Scope in 2004. It was an early tool based on Apple's new Safari engine. It was a few years before Firebug was released, and even then it took a while for Firebug to beat Xyle Scope in features. I still have the lingering feeling that Xyle Scope's UI was better at directly inspecting HTML and CSS than our current tools. Although that maybe the haze of nostalgia. I found it hard to find any really good screen shots but here is one: https://taoofmac.com/space/apps/xyle_scope https://taoofmac.com/space/apps/xyle_scope Of course, FireBug and its successors do so much more than just HTML/CSS inspection. I would often jump between Firebug and Xyle Scope. Eventually, Cultured Code the developers for Xyle Scope focused their talents on creating their Things task manager. https://culturedcode.com/things/ https://culturedcode.com/things/

mbrevoort 4y ago

Firebug how sweet the sound That saved a wretch like me! I once was lost, but now am found, Was blind, but now I see.

bni 4y ago

I remember using something in Netscape that was able to debug JavaScript code in webpages, must have been in 2000 or so, maybe in Netscape 4. Don't remember if it was built in or not. Anyone remember what it was called?

inanutshellus 4y ago
Venkman, perhaps?

deleted 4y ago

[deleted]

mhd 4y ago

I'm still not sure whether adapting it as the main browser tool was a good choice. It would've been interesting to see various extensions working with e.g. a deep-internal API. Probably with none installed by default, making the browsers a bit more modular.

tiborsaas 4y ago

Firebug was a game changer in frontend development, suddenly everything made sense and things got a lot more simple. Before firebug in the IE6 days, there was a script that you could inject into your page which created a draggable floating window in the document with a basic console and maybe some DOM view. I can't remember the name.

Exness199507 4y ago

julius 4y ago

I remember my JS code breaking because the customers firefox browser did not have console.log :)

NikhilVerma 4y ago

My first PR ever was in Firebug :) https://firstpr.me/#NikhilVerma https://firstpr.me/#NikhilVerma Loved that software and it truly kindled the frontend developer inside me.

ChrisArchitect 4y ago

Some previous discussion so many years ago when this was news https://news.ycombinator.com/item?id=13107802 https://news.ycombinator.com/item?id=13107802

irrational 4y ago

Firebug is why I've been using Firefox as my primary browser since Firebug first came out. Firebug was such a huge game changer for web development. Before firebug we had to use alerts or writing to the DOM to debug. It is hard to imagine a web development world without Inspect, Console, etc., but that was the reality for many years. Then Firebug came around! Eventually Chrome added developer tools, but I was so used to Firebug that I never even tried Chrome. I was quite sad when Firefox created official developer tools and Firebug ceased to exist. It was hard letting go of an old friend who led the way.

andrewmcwatters 4y ago

It’s so weird to me when people use the phrase “fight the good fight (of faith),” without knowing the latter half of the expression or where it comes from. It makes web debugging sound like a religious struggle.

ccheney 4y ago

Firebug was a godsend back in the day. I also used Firebug Lite pretty heavily which was a javascript file you could inject into your website to get a variation of Firebug working in browsers such as IE6

Waterluvian 4y ago

On this topic, and Chrome Dev Tools, does anyone else struggle with getting access to the state of their app? I find that because of all the encapsulation and transpilation tricks, it’s basically impossible to get a hold of my state or functions in the dev tools during runtime. The best I can do is forcibly set window.state and do a bit of work. I can set breakpoints and do all that stuff. But I remember back in the bad days when it was pretty easy to “find your app” from the dev tools. I’m probably doing a poor job describing it, but does anyone else experience this?

cxr 4y ago
It's a known problem, especially with the move away from self-styled OOP paradigms and the rise of closure-infested programming. (I.e., "OOP, but with closures—and which (for overall very bad reasons) we're going to insist on describing as FP".) Recent thoughts by one of the Eve/Light Table developers: <https://www.scattered-thoughts.net/writing/coding/ https://www.scattered-thoughts.net/writing/coding/> (Ctrl+F on "hard-to-query state" and "reachable".)
- Waterluvian 4y ago
  Thank you for the link!

joshstrange 4y ago

I still remember where I was when I first learned about Firebug and how magical it felt. I can picture the open workspace I was in and another developer mentioning it to me. It was like going from console.log/print_r/var_dump/etc-ing to using a debugger to attach and step through code, just a night and day difference. Nowadays we take the dev tools for granted but I'll always remember Firebug as the original dev tools and it being absolutely amazing for the time.

paulirish 4y ago

An interesting convention that ~started with Firebug was the use of angle brackets in the DOM/Elements view. (eg a DIV element is shown as `<div>`). HTML, as a text format, uses angle brackets to denote tags. But DOM is an in-memory object model; it doesn't have tags, but elements, and those have nothing do with angle brackets (other than getting el.innerHTML will serialize back). From a usability POV, it's entirely defendable: make the DOM visually look like the HTML you authored. But Firebug and our current browser devtools only add them for aesthetics and familiarity. It rarely causes problems, but it'll explain why you'll see `<tbody>` in DevTools even if your HTML doesn't have it. Still, I think dropping the HTML-y representation of DOM elements could be a win — removing end tags in particular would improve the information density. Bonus: A Firebug Cheatsheet I made in 2007, 4 years before I was working on Chrome DevTools: https://imgur.com/I2KbZWm https://imgur.com/I2KbZWm

gabrielizaias 4y ago
Wow, I remember that cheatsheet was really handy! Thanks for that. I still google "box sizing paul irish" every now and then to get to your blog… I can hardly believe it has been 10 years since you published that, time flies.
cxr 4y ago
The pseudo-source view also came (and still comes) with noticeable performance drawbacks. Opening the inspector on a nested element using today's browsers' built-in inspectors (which are implemented in HTML nowadays) can be slower than if you were to do the same thing on the same graph with a Web development extension in Firefox, since extensions were able to use the XUL platform, and that meant being free to implement nsITreeView. And that's even with the advantage of modern hardware and and the trick where modern development tools will choose to elide elements in favor of showing a message that says that some nodes are hidden, with a button to e.g. "Show all 347 nodes". I just tried this with a 5000-row table, and clicking the "Show all[...]" button in Firefox's built-in developer tools has seemingly no effect at first—the inspector appears appears unresponsive for several seconds, before finally painting the expansion. In programs from 15 years ago running on 15+ year old hardware, on the other hand, this could expected to be nearly instant. Jamie Brandon recently complained about this sort of thing, comparing the experience of creating an information-dense UI using imgui versus doing the same "on the web" (i.e. in the browser, using HTML): <https://www.scattered-thoughts.net/log/0026/ https://www.scattered-thoughts.net/log/0026/>

TimTheTinker 4y ago

My former employer is still using HTA (HTml Application) to dynamically render a lot of tool windows in their massive legacy COM application on Windows. HTAs render using an IE6-era renderer that is still present in Windows. (I wasn't in the group that built these tool windows, but I did build a lot of in-house web apps to help with various workflows.) A few years ago, I had a colleague come by with bug he couldn't solve in an HTA tool window. There's no built-in console or anything... but I showed him how to copy/paste the Firebug Lite minified JS into a <script> tag, and how he could then press F12 to bring up Firebug Lite inside the HTA tool window. (Note Firebug Lite supported IE all the way back to 6). He was able to quickly debug & resolve the problem. Thanks Firebug!

cxr 4y ago
Microsoft themselves ended up doing something like this—VorlonJS. <https://github.com/MicrosoftDX/Vorlonjs https://github.com/MicrosoftDX/Vorlonjs> There's also weinre <https://people.apache.org/~pmuellr/weinre/ https://people.apache.org/~pmuellr/weinre/>, which is the same with the (old) WebKit Inspector code, rather than Firebug.
- TimTheTinker 4y ago
  Firebug Lite enabled debugging directly within the tool window -- i.e. the Firebug UI appeared on the bottom edge of the HTA UI area (not a remote debugging scenario).

gorgoiler 4y ago

Bring back 3D View! http://devlup.com/wp-content/uploads/2012/01/3d-1.png http://devlup.com/wp-content/uploads/2012/01/3d-1.png

racl101 4y ago

Firebug was great and I am grateful that it existed!

node-bayarea 4y ago

It was ABSOLUTELY wonderful to have Firebug back in 2006/7 timeframe. I really enjoyed using it and looking at the DOM and whatnot!