Firebug was the greatest thing to happen to web development. Honestly I still prefer it to the native dev tools. I especially love how most things go to the console so I don't have to jump all over the place to find the information I'm looking for. I absolutely abhor the network panel in Chrome. It's like they're purposefully trying to make it difficult.
It's been here for a long time, but by default the console has several filters disabling some output, including XHR. So most people don't know about it.
What do you mean? There are plenty of ways to filter down the activity tab in Chrome if the problem you're experiencing is that the volume of requests is too high to be useful.
I am more at home in FF so this might not be true for Chrome... Just look at the simplicity and elegance of Firebug net panel (https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/fil...). I love Mozilla and respect them immensely, but any change they made to Firebug was for the worse. If they just copied the functionalities and design the result would be much better. I am very sorry I had to stop using Firebug. RIP!
You can get a similar view in Chrome by turning off the filter button and the two view buttons in the network toolbar, then ctrl-click on any of the columns in the table to hide the ones you aren't interested in.
I just don't trust the devs behind Chromium (who are mostly employed by Google) to care about their users' privacy. Using FF is my way of voting against that.
If I were to guess, it's probably the same reason I don't like/use Chrone Dev tools, it seems overwhelmingly noisy with options/information I neither need or care about. Firebug was basically the opposite of that.
I consider Firefox's Network panel more useful than Chrome's. Having the ability to edit and resend network requests out of the box is exceptionally handy.
On the other hand, having it always be a 2 step process kinda stinks. I haven't yet seen a way to just say "replay this request". The editing is nice, but I almost always have to just replay, quickly, and I can't do that in FF, but can in Chrome. Might be 20% of the time the 'edit and resend' is a handy/useful functionality - 'replay xhr' is handy the other 80% of the time.
It really was. I actually quit web development a few months before I learnt about Firebug because Internet Explorer was causing me loss of sleep (seriously). When I discovered Firebug I almost wanted to start doing it again, but then I quickly reminded myself that it wouldn't help with IE6 retardation.
I was really surprised to see an inferior clone appear in Chrome. I then started to hear people talking about Chrome dev tools and would always ask, "did you not know about Firebug?", and the answer would be no. Strange.
That makes no sense, GP stated the chrome devtools were just as revolutionary as firebug was when it first came out. Not just "meaninglessly revolutionary" but more revolutionary than the one tool at the origin of all modern web devtools.
I don't remember precisely the feature set of Chrome devtools in intial version. I should have clarified. The current iteration of Chrome Devtools compared to firebug represents a revolution in web debugging capability
Wasn't the initial version of the Chrome dev tools just the exact same as the Apple WebKit/Safari dev tools until Google started fleshing them out? Or am I misremembering history?
Firebug didn't just raise the bar for web debugging, it pretty much raised the bar for all debugging tools. It leaves a great legacy with the built-in dev tools. Great project.
I often argue that Firebug is the reason Firefox is still around.
It was easier to develop on Firefox and then debug on IE. So a lot of websites worked on Firefox even if the management team didn't care (or even, in our case, when they told us not to support Firefox and we nodded and did it anyway)
> It was easier to develop on Firefox and then debug on IE.
A long time ago, the company I worked at had a website which worked only on IE, because it needed a specific ActiveX control for streaming video. But even though it would never work on Firefox, the developers still made as much of the site as possible work on Firefox, because whenever IE popped up an unhelpful error message ("Object expected" and others), reproducing the error on Firefox gave a useful error message.
> or even, in our case, when they told us not to support Firefox and we nodded and did it anyway
The same happened to me at one particularly bad place I worked. Even more amusing is that we we're writing a web crawler based product and without inspecting the crawled sites in firebug our product wouldn't have existed at all.
Does FF or Firebug have a way to override assets with a local directory? I haven't found it, and that alone makes my debug cycles a lot slower if I'm editing CSS.
This may have been posted in 2008, but the tech it is demoing was decades (yes, plural) old by then: https://www.youtube.com/watch?v=1kuoS796vNw This video is a simple demonstration of very mature tech, not a demo of something hot and new.
That's a demo of a Smalltalk environment with the programmer deliberately writing some code that crashes, going into the debugger, adding the method on the fly, and then having the original method call complete despite the method not yet having existed.
It isn't quite true that there is nothing new under the tech sun... but there's certainly less new than most people seem to think.
Yeah, SoftICE, I remember buying Hackerzvoice (a French newspaper-like hacking magazine) which included SoftICE tutorials on how to crack WinRAR license verification. (for educational purposes of course)
I was amazed that I could breakpoint and debug any running app. I miss SoftICE.
Wasn't SoftICE a bit of an overkill for cracking WinRAR? If memory serves right, it was a tool mainly for debugging kernel-level code (drivers) -- that's why it had to start before windows. WinDBG and similar userspace tools should have been just as good (or even better, as they woudn't interfere with WinAMP :)) for dealing with userspace processes.
Totally overkill yes, but without internet, you use whatever you're able to put your hands on ;-)
Ironically, the first software I cracked, well tried to, was an IRC client named Klient if I recall correctly. I bypassed the license check, but, this software included a functionality which, when it detected this, broadcasted to everyone (except me) that I was using a pirated version and that I was accepting the CTCP reboot command :-)
It depends on what you are trying to do. Softice was good for "kernel" debugging, rather than just simple user space programs for which things like turbo debugger (and more modern solutions), were as good if not better.
For windows kernel debugging, there is windbg, kd, and assorted "emulation" methods like qemu's gdb stub. Similarly for linux/kgdb/etc... OTOH, Softice had a number of OS data structure aware commands in the late 1990's which are only really available in something like windbg. In theory you could write kgdb macro's to perform most of that functionality for linux/etc but it doesn't work out of the box.
Although in the end, the logical replacement for softIce, is a JTAG debugger of some form. A fair number of the ARM platforms work with DS5/Dstream which provides source level debugging with far more functionality (for example trace level timing information) than softice as an "ICE' ever did. I guess its the same for intel's ITP-XDP3/system studio products these days.
Again, it depends on what your trying to debug. AKA do you need the "ICE' (aka JTAG these days) functionality, or are you just looking for a powerful kernel or user-space debugger.
Not really. It's not that other debuggers didn't provide some of those features and were very good at, say, stepping through program logic. I've spent many years using other debugging tools for C/C++ and Java, and although there are some good IDE's out there, firebug's capability to analyze everything from logic to object models to network activity and visual presentation details, in such a well-integrated and user-friendly way was frankly unprecedented.
The parent claimed the following: "Firebug didn't just raise the bar for web debugging, it pretty much raised the bar for all debugging tools." I dispute the idea that Firebug raised the bar for non-web debugging tools.
firebug took a while to have a proper javascript debugger. For a long while, you could only ever have breakpoints using IE+VS... But it was a crapshot if your code had too much DOM interaction. The debugger itself would crash (and offer you to debug itself heh)
Does anyone know the history of the `console` object? The first time I ever saw it and used it was with Firebug, but it occurs to me that I don't know if Firebug invented it. Did it just decide to inject this name into the global namespace? And having it become a common API across multiple JS environments was due to its popularity in Firebug? Or was it somehow already in JS and I just wasn't aware of it up until that point?
My recollection is that you are correct; it originated with Firebug and sprouted in other browsers after that, but I would love some history around it too.
I miss Firebug for one simple reason: It detached from the browser window as a singular window that provided developer functions to all of your browser tabs. In modern Firefox and Chrome, each tab has its own distinct developer tools panel that can be detached as a separate window for the operating system's window manager to handle.
Firebug's behavior was somewhat analogous to "MDI" in legacy GUI applications, in that a single window handled multiple views. The view switched with your browser's active tab.
The funny bit is that the stack of developer tool windows we end up with today is reminiscent of the stack of browser windows we had prior to the advent of tabbed browsing.
Things instantly became real when firebug for IE came out. To me that one tool made a front end web development career a viable option. Do y'all remember JS before Firebug? ouch
Most people debugged with alerts or document.write-ing in the page. The "wokest" were aware of Venkman (Moz/FF), Script Editor (IE) and the Visual Studio IE integration (also IE), all of which were pretty much just JS debuggers.
Venkman worked the best but the UX was a horrendous mess, SE and VS were less visually messy but (likely due to IE) frequently got lost entirely and were completely unable to debug the JS toplevel ("and "modules" were not really a thing back then, so much of your code would live in the JS toplevel).
This was also the epoch of Drip, an IE webview which would just reload a page over and over checking for IE's infamous DOM leaks.
God I so don't miss it.
Firebug was definitely a pivotal moment, a complete perspective shift for the field.
Which didn't help much when there was a syntax error somewhere close by causing the browser to silently terminate parsing/executing the code. At least these days the browsers tend to dump error messages into the console when this happens...
In theory that could have been caught by a good jslint/syntax checker but those were a few years in the future too. Early, JS development really sucked, its only slightly better today..
> Which didn't help much when there was a syntax error somewhere close by causing the browser to silently terminate parsing/executing the code.
I recall a dramatic bug where, in 2012, I rolled out a new version of a web GUI with some JS mixed in it to an intranet audience of IE 7 and Firefox users. It initially looked good, but then reports came in that IE users couldn't use one of the buttons. After much debugging and confusion, it turned out that there was a trailing comma at the end of an array literal (i.e. `[1,2,3,]` instead of `[1,2,3]`). Firefox accepted that, but IE 7 didn't. (I think IE 8 added support for trailing commas.)
There was a very capable javascript debugger as a mozilla plugin (don't think it was an addon), years before firebug/browsers dev tools had one. It don't remember the name, it was something with a V.
Firebug was neither the first for step-by-step JS debugging, nor for poking at the DOM. Those two things were within the purview of Venkman—the original Mozilla JS debugger—and the DOM Inspector—Firebug's predecessor created in 2001 by Joe Hewitt, an ex-Netscape/AOL employee and the original author of Firebug itself. Honza's timeline is off. I've left a note in the blog comments about this.
In my first job, about four years ago, my first task was to make certain modifications in firebug for our company's internal use (mostly in reporting and filtering).
I didn't even know JS to begin with. Jan Orvadko, the lead maintainer of Firebug, is an amazingly approachable & affable human being. He helped me a lot in the IRC channel, in going through the firebug codebase.
Opera used to have its own debugging/inspection tool[1] as well. It was released in 2008, it was open-source[2] (unlike the browser), didn't required plugins like firebug at the time, had handy remote debugging, overall I enjoyed it the most. But it died with the browser. Honestly, I'm surprised it's still up somewhere.
"The story of Firefox and Firebug is synonymous with the rise of the web. We fought the good fight and changed how developers inspect HTML and debug JS in the browser. Firebug ushered in the Web 2.0 era. "
I love, used and appreciate firebug as much as the next guy but this is a bit much. Its a great product that helped alot of people it's not an ideal to fight for nor "ushered" in web 2.0.
I was building web products professionally before and after Firebug and the difference was staggering. It opened up the full possibilities of CSS and JavaScript like no other tool before it.
Having been a developer since Web "1.0" it's not exactly wrong, but I think you're interpreting that incorrectly.
Without Firebug a lot of the JS development that was basically required for Web 2.0 sites would have been much much slower and even more complex to maintain.
It didn't create Web 2.0 (arguably that had been a thing since 2003-2004, and the term dates to ~99) but it did usher it into mainstream development due to making it less painful to create that content.
Do you not remember what it was like in the years (nearly decades) prior to firebug? alert() still gives me nightmares. Firebug was easily as huge as AJAX, ES6, and other such milestones.
I'm really concerned about how much weaker the new WebExtensions API than the previous extensions API. Just today I saw (and submitted: https://news.ycombinator.com/item?id=15542316) an interesting article about Keysnail, an amazing extension which is impossible to turn into a WebExtension — all because WebExtensions (apparently) forbids overriding C-n despite allowing override of other key sequences.
I'm very concerned for the future direction of Firefox.
Given that webextensions are not just a firefox thing: HN's probably the wrong place to voice that particular concern? We're losing a number of sweet addons with the switch to web extensions in Firefox specifically, but in terms of cross-browser gains, web extensions rather than "these things only work in this one browser" still seems the right way forward, and it's just another web spec so if we need more out of it, let's get the attention of the people who draft that spec and get them to given more access to the things we need to bring back the functions that made life better.
> Given that webextensions are not just a firefox thing: HN's probably the wrong place to voice that particular concern?
Why not? This thread is about losing valuable capabilities due to the migration to WebExtensions. Firebug was possible in the old extension system; it's impossible (as I understand it) with WebExtensions.
> in terms of cross-browser gains, web extensions rather than "these things only work in this one browser" still seems the right way forward
Do they? Is working on multiple browsers really that useful for extensions, many of which exist specifically to modify the behaviour of a single browser? For that matter, ISTR that WebExtension aren't really cross-browser — there's still some customisation required.
> if we need more out of it, let's get the attention of the people who draft that spec and get them to given more access to the things we need to bring back the functions that made life better
I don't disagree. Why not do that before eliminating useful functionality?
My concern is for Firefox's direction: it has spent the past several years removing useful functionality (most recently extensibility, but also the security of its previous Sync product, which is now thoroughly compromised) and adding extraneous functionality (e.g. Pocket, Hello, even containers[0]). I'm reminded very much of how the GNOME project went off the deep end, removing functionality (twelve years on and it still can't replace xscreensaver) and features because they thought Linux users want simplicity.
Likewise, Firefox and Mozilla seem to have been taking a series of decisions based on an IMHO inaccurate read on Firefox's userbase and that userbase's desires. I believe that Firefox users use it because it is philosophically better: freer, more secure, more private, more open than IE, Chrome or Opera. I think we're fine if it's practically worse, because we know that in time philosophical quality will lead to practical quality, but the reverse rarely happens if ever.
[0] Firefox has supported profiles for years; profiles and containers have significant overlaps in functionality and I think profiles are more usable.
I guess this is the right place to point out to people reminiscing that if you open Firefox dev tools and click the options cog, you can select a Firebug theme.
The Firefox dev tools' Firebug theme gives me the illusion that I can click the network tab and find that old, reassuring interface. And instead it's the (in my opinion) less functional one from dev tools.
At that point, I prefer ditching the Firebug theme altogether, and embrace the loss. :(
Thank you for the amazing contribution and for for making it a little bit easier to debug during a time when debugging was even harder. Firebug set in motion the browser tools that are bundled today.
i will miss you firebug!!!
I loved when i could open firebug + native dev tools... that way i could navigate in html with firebug and make css changes on the native dev.. on the same screen!
Now i can only open the native dev tools and i can only view either "Style editor" OR "Dom navigation" but not both at the same time.
I know Firebug was great but it didn't usher in Web 2.0
> Jan 2007, Firebug 1.0 The start of Web 2.0!
O'Reilly Media Web 2.0 Conference was in 2004
We than had the infamous Time Person of the Year "YOU" "TIME selected the masses of users who were participating in content creation on social networks, blogs, wikis, and media sharing sites."
That in itself doesn't mean much. At the time it was said that Web 2.0 is like teenage sex: everyone is talking about it, almost noone is doing it and those few that are doing it are doing it all wrong. :)
I do agree that Firebug (as much as I miss it) didn't have much to do with Web 2.0 though.
WebRender is coming but absolutely isn’t ready yet; it’s not even turned on by default in Nightly (although I use it on my home machine and it’s getting a very good very quickly).
RIP Firebug, brings back great memories of learning HTML / CSS / XPath selectors. I use Chrome developer tools these days (not a huge fan but it does work) but Firebug will always have a special place in my heart as a GREAT debugging tool.
Joe Hewitt and Blake Ross have really left their mark. I wonder from time to time what they would have created if Facebook didn't acquire Parakey back in 2007. Hopefully, they will collaborate again in the future.
I appreciated firebug back in the day, but a few years ago the devs decided to force a white background to it, which did not work in our darkened media studio. They would not reconsider (not the first time I’ve had a run in with white bg fascists; they’ve now taken over the prefs panel).
Thankfully moz dev tools were getting to be just good enough around that time and supported a dark theme. Last time I ever used firebug, thanks for all the fish.
Firebug was the great tool for checking XHR is a clean way. No bullshit only what is most important. Yes, you can do it in built-in dev tools too, but sometimes it feels like UI is unnecessarily complex.
I'm debugging a symphony app that sends out error messages as full fledged HTML pages with bells and whistles. Previously I could see the rendered version of the HTML in firefox by going to the Preview tab after selecting the request but a short while back they removed this feature. I am now forced to use Chrome for debugging. I can't see the point of Forgot dev edition of they have to remove useful dev features from it.
For those that have made the switch in the Firefox Developer era, do you find the developer tools as good as Chrome's?
In the last week I've made the switch back to Firefox (Developer) and it's been awesome. I haven't had done any front end work yet so I haven't used the developer tools, though. I never really cared for the ergonomics of the Chrome devtools but I was really familiar with them and could efficiently profile/debug code.
I consider most of the tools on par or better than what Chrome offers, with the exception of the performance tools. I find that Chrome makes things to clearer to folks, and the panel is easier to work with.
Theyre OK, but I find the dev tools on chrome have a much better UX.
I particularly dislike the console in FF which is just one tiny input at the bottom of the window. Overall ff devtools also seem slower to open and clunkier.
I'm on Firefox 56, but I believe Firebug worked in 55 still. The performance of Firebug fire exceeded the native browser tools.
The inspector tool in Firebug was damn near instant to allow me to select an element in the browser. Firefox's version of the inspector can take upwards of 5 seconds sometimes to become "ready". Side note... I'm on a 7 year old macbook air, so the differences are very notable.
That's odd because I seem to recall that I switched to Chrome from Firefox shortly after Chrome was released because it shipped with Dev Tools circa 2009.
I mean 5 years ago, Chrome added debugging Web Workers[0] so clearly Chrome Dev Tools were already quite mature by 2012.
My memory might be way off base here, but I'm fairly sure Chrome Dev Tools were in a reasonable state by 2012. Screenshots from the time certainly suggest so. My experience is much the opposite, in that it was around 2012 or so that I probably stopped installing Firefox on my dev machines altogether.
That said, recent features in Firefox (Containers especially) have me much more interested again.
I played around with Chrome in 2008 when it first came out in beta, and I remember finding Chrome Devtools an improvement over Firebug.
By the time the Firefox 4 betas were out, it was no contest; Firebug was very crashy (which, to be fair, it's hard for an extension to support a beta browser, but Chrome's dev and beta channels always had a reasonably stable devtools thanks to it being built-in).
Regarding Firefox Developer Tools. Is there a way to set older dark theme there? I don't like the current one that appeared in Firefox 57. Previous had milder / metal colors.
edit: wldcordeiro pointed to a UI that looks nothing like what I have as a UI (in Firefox 56)... removing my comment until I can figure out why.
edit edit: Apparently the last time I tried to install Firebug it instead asked me to just make Developer Tools look like Firebug, which is definitely a bad idea.
