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.
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.
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.
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.
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.
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 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.
Sorry but when someone describes what they are doing is wrong, maybe they need to hear that. I don't really care about being nice at all costs, because the truth sometimes hurts. If they change one little thing and the entire layout breaks, that says quite a lot about the situation, and that together with their insistence to do everything like they did 20 years ago just adds up to someone needing to hear the truth. They are doing things very wrong. And this also isn't the place to delve deeply into the root of their problems, as they obviously are not really interested in learning or changing - so if you're offended by the truth, well that's not really my problem.
Your comment didn't contain any information. It was just mean. When you do that, you make HN a nastier place.
These effects are always greater than the person adding the poison imagines they are—and worse, they compound over time. That path leads to the destruction of the forum as the most desirable users gradually get disillusioned and leave, and the proportion of nastiness grows among those who remain. The idea of HN has always been to try to stave that outcome off for as long as we can:
"Someone needs to hear the truth" is not an argument that carries much water because (1) it's what every internet asshole says, and (2) if you present the truth in a nasty way, you actually discredit the truth by giving neutral readers a reason to reject it (https://hn.algolia.com/?dateRange=all&page=0&prefix=true&sor...). In the future, if you have some truth to share, doing so respectfully will help protect the forum and will get the information across to more people.
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?
> 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?
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
