10 ms·
Firebug
- Normille 6y agoIs this archaeology corner?
- letientai299 6y agoNo. But once in a while, I want to remind us some bit of history. Hopefully inspire new developers, just like how I got the inspirations about old stuff when I first joined HN.
- Normille 6y agoFair 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.
- irrational 6y agoFirebug 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.
- ChrisMarshallNY 6y agoI loved FireBug. Nowadays, every browser has its capabilities, but back in the day, FireBug was the only game in town.
- troyjfarrell 6y agoVenkman was the only game in town. It was a glorious day when Firebug surpassed Venkman. https://wiki.mozilla.org/Venkman/Firebug_Comparison https://wiki.mozilla.org/Venkman/Firebug_Comparison
- ChrisMarshallNY 6y agoForgot about that one.
- sroussey 6y agoYeah, this was the original front end to the debugger apis (which then barely changed for a decade).
- crizzlenizzle 6y agoThat 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.
- erk__ 6y agoMy fondest memory of Firebug is not the javascript tools, but the Flash Debugger tool; FlashFirebug. I used it years ago to reverse engineer a now gone livestreaming website to figure out how it worked in the backend.
- naicuoctavian 6y agoI remember the tool. Saved me many times during my heavy Flash development years!
- mostlystatic 6y agoThis reminds me of two other now-obsolete web debugging tools. Weinre[1] let you to view the DOM, network requests, and console output when testing sites on a phone. Aardwolf[2] provided an interactive JavaScript debugger, by rewriting the code to add debug hooks. [1] http://people.apache.org/~pmuellr/weinre/docs/latest/ http://people.apache.org/~pmuellr/weinre/docs/latest/ [2] https://github.com/lexandera/Aardwolf https://github.com/lexandera/Aardwolf
- chedabob 6y agoWeinre made building apps using PhoneGap/Cordova just that tiny little bit less painful in the early days. Really great tool.
- anderspitman 6y agoIs there consensus on what to use instead of weinre these days? I have mobile-only issues with my web apps rarely enough that I feel like I always have to start searching from scratch to find a remote debugging tool.
- admax88q 6y agoBoth chrome and Firefox support debugging their mobile android versions from their desktop versions. I'm sure safari offers the same for iOS.
- JohnBooty 6y agoI'm sure safari offers the same for iOS. Indeed it does! Been quite a while since I used it, but I do remember it being quite seamless and enjoyable. https://www.browserstack.com/guide/how-to-debug-on-iphone https://www.browserstack.com/guide/how-to-debug-on-iphone
- anderspitman 6y agoActually, 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 https://apitman.com/12/#debuggin-ios-safari
- krisgenre 6y agoI 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.
- kilroy123 6y agoFor 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.
- pknerd 6y agoAs long as I used FF I always used Firebug. Thanks Joe Hewitt.
- usr1106 6y agoConfused. 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
- dewey 6y agoIt's the old website, look at the timeline that stops at 2017 and it pointing to the default Firefox tools.
- lol768 6y ago> The site mentions Firefox Developer Edition. What is that? A quick search seems to indicate that it's just one version ahead of Beta, what was called Aurora in the past. > Certainly if you want to test new features that's good. But what is the benefit for general Web development? See https://news.ycombinator.com/item?id=8583747 https://news.ycombinator.com/item?id=8583747 In short, separate profile, quicker access to new developer tools/new web standard implementations by virtue of being its own release channel (as you mention), developer-friendly defaults.
- evo_9 6y agoThanks 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.
- zwarag 6y agoDo you know if they are going to keep developing the Developer Edition after all the layoffs?
- jmuguy 6y agoOn 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.
- dependenttypes 6y agoI never understood why mozilla decided to implement their own inferior and laggier version of developer tools when firebug existed.
- JohnBooty 6y agoIn what way(s) do you find it inferior?
- ars 6y agoIf you log the contents of an object with firebug and then modify the object later in your script the firebug output does not change. But do the same thing with Firefox and the contents of the object will change. To preserve the object as it was when debugged you have to either copy it or log all the specific properties you're interested in rather than the object as a whole.
- coolreader18 6y agoSome would probably find that superior to firebug
- ars 6y agoIt'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.
- sroussey 6y agoFirebug could do it both ways, that was the beauty of console.dir().
- brainless 6y agoI feel Firebug is one of those developer tools that would have been highly monetized in the current start era. I owe a lot of my own career path as a Web software engineer to Firebug.
- homero 6y agoI learned CSS with firebug, before that I had no clue what CSS was when it first came out in daily use
- derefr 6y agoI 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?
- JohnBooty 6y agoI 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)
- leptons 6y agoI 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.
- globular-toast 6y agoFirebug, along with web developer toolbar, changed everything for me. I learnt web development on IE6 by editing html in notepad. I switched to Firefox for tabbed browsing and because it was faster. When I discovered firebug I almost couldn't believe it. What the hell had I been doing up to this point? Why doesn't everyone know about this? Later I discovered that Chrome had it built in and still most web devs hadn't heard of firebug.
- burlesona 6y agoSame. I remember what an epiphany Firebug was, and I felt bittersweet later when quality dev tools started being built-in, just because it seemed a little sad to think Firebug wasn’t going to be needed anymore.
- ktpsns 6y agoSame 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.
- alexknowshtml 6y agoSame here. I remember showing Firebug to coworkers and them thinking that I was showing them some kind of wizardry.
- interestica 6y agoI 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.
- 6y ago
- theomega 6y agoDoes anyone know a trick how to get Firebug or similar running directly on iOS? I know that you can connect the iOS device to your Mac and run the developer tools on the big machine. What I’m looking for is having Firebug directly running on the mobile device.
- yorwba 6y agoLiriliri's Eruda is in the "or similar" category and works directly in mobile browsers: https://github.com/liriliri/eruda https://github.com/liriliri/eruda With the caveat that if you want to use it on arbitrary websites, you need to be able to inject the script somehow, e.g. using a bookmarklet, which may not be possible in all browsers. EDIT: Discussion 4 months ago https://news.ycombinator.com/item?id=22968079 https://news.ycombinator.com/item?id=22968079 , where nxrabl shared the tip of editing an existing bookmark with the javascript code to get it to work in Safari on iOS.
- Ayesh 6y agoI 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.
- kentbrew 6y agoI have a career because of Firebug.
- sroussey 6y agoThat’s probably the best compliment I’ve seen.
- mongol 6y agoTwo distinct periods. Web development before Firebug. And web development after Firebug.
- paul7986 6y agoFirebug and or Chrome's similar dev tool is how I design websites for a living. Everything can be changed live in the browser. I start with a bootstrap template change its html/css accordingly and after save it in my html or css files. Just don't refresh the browser though there is a way to have it saved directly to your html file without leaving the browser.
- FajitaNachos 6y agoMy first real dev project was a chrome extension that would save those html/css and auto commit them to a GitHub repo.
- paul7986 6y agoYes 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.
- edgarvaldes 6y agoWere the team and functionality of Firefox Developer Tools affected by the recent downsize at Mozilla?
- valtism 6y agoYes, most of the team were laid off, along with most of the team maintaining MDN
- NamPNQ 6y agoFirebug, the most wanted tool for web developer in the 2000s
- abhisheksp 6y agoI remember feeling like a Hacker using Firebug to catch rare shiny Pokemons on poorly designed online Pokemon games through simple edits in 200x
- Mustan 6y agoThanks, Firebug.
- julius 6y agoStill remember that Javascript bug that only occured when Firebug was NOT installed. Was quite tricky to debug, until it finally clicked. Back then the browser did not have a console.log() function.
- joshstrange 6y agoThis was still an IE "bug" at least up to 11 IIRC. If you had the console open then `console.*()` worked but if the console was not open then you would get an error. So frustrating to have the problem "go away" when you tried to dig into the issue more. At my last company we had some logic that ran first that would proxy all the console.log calls through some code that would check if IE and if the console was open before trying to call the native console.log and friends.
- sroussey 6y agoWe 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. :)
- mixmastamyk 6y agoI 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.
- fao_ 6y agoThey're advertising a web development tool on a website that doesn't scale to my laptop's 1280x800 monitor. I literally don't know what to say to that.
- stjohnswarts 6y agoIt's a tribute page, not a money maker site. They did fine.
- fao_ 6y agoconversely 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
- bovermyer 6y agoI feel grateful for everything Firebug did for me over the years. It definitely made my life easier as a web developer.
- nojvek 6y agoI 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.