[HN Gopher] Firebug
___________________________________________________________________
Firebug
Author : letientai299
Score : 322 points
Date : 2020-09-13 09:13 UTC (13 hours ago)
(HTM) web link (getfirebug.com)
(TXT) w3m dump (getfirebug.com)
| pknerd wrote:
| As long as I used FF I always used Firebug. Thanks Joe Hewitt.
| Ayesh wrote:
| 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.
| crizzlenizzle wrote:
| 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.
| erk__ wrote:
| 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.
| naicuoctavian wrote:
| I remember the tool. Saved me many times during my heavy Flash
| development years!
| edgarvaldes wrote:
| Were the team and functionality of Firefox Developer Tools
| affected by the recent downsize at Mozilla?
| NamPNQ wrote:
| Firebug, the most wanted tool for web developer in the 2000s
| bovermyer wrote:
| I feel grateful for everything Firebug did for me over the years.
| It definitely made my life easier as a web developer.
| Mustan wrote:
| Thanks, Firebug.
| abhisheksp wrote:
| I remember feeling like a Hacker using Firebug to catch rare
| shiny Pokemons on poorly designed online Pokemon games through
| simple edits in 200x
| mostlystatic wrote:
| This reminds me of two other now-obsolete web debugging tools.
|
| Weinre[1] let you to view the DOM, network requests, and console
| output when testing sites on a phone. Aardwolf[2] provided an
| interactive JavaScript debugger, by rewriting the code to add
| debug hooks.
|
| [1] http://people.apache.org/~pmuellr/weinre/docs/latest/ [2]
| https://github.com/lexandera/Aardwolf
| anderspitman wrote:
| 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.
| admax88q wrote:
| Both chrome and Firefox support debugging their mobile
| android versions from their desktop versions.
|
| I'm sure safari offers the same for iOS.
| JohnBooty wrote:
| I'm sure safari offers the same for iOS.
|
| Indeed it does! Been quite a while since I used it, but I
| do remember it being quite seamless and enjoyable.
|
| https://www.browserstack.com/guide/how-to-debug-on-iphone
| anderspitman wrote:
| Actually, last time I had an issue with iOS safari I found
| this really useful since I'm developing on Linux:
|
| https://apitman.com/12/#debuggin-ios-safari
| chedabob wrote:
| Weinre made building apps using PhoneGap/Cordova just that tiny
| little bit less painful in the early days. Really great tool.
| brainless wrote:
| 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.
| homero wrote:
| I learned CSS with firebug, before that I had no clue what CSS
| was when it first came out in daily use
| derefr wrote:
| 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?
| leptons wrote:
| 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.
| heavenlyblue wrote:
| I could still do all of that by implementing some
| JavaScript to immediately preview the CSS I am writing.
|
| I don't really think there is a paradigm shift except for
| general learning curve that is in effect here.
| derefr wrote:
| 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.
| leptons wrote:
| >I try to "move around an element" in the panel? The
| whole layout breaks.
|
| Just more evidence you are doing it really wrong. But,
| whatever makes you happy, I guess.
| fiddlerwoaroof wrote:
| 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.
| JohnBooty wrote:
| 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)
| usr1106 wrote:
| Confused. I thought Firebug is no longer needed because the
| functionality is part of Firefox developer tools, which have been
| always visible in Firefox for years (at least in many Linux
| distros, maybe that's not a Mozilla default?).
|
| The site mentions Firefox Developer Edition. What is that? A
| quick search seems to indicate that it's just one version ahead
| of Beta, what was called Aurora in the past.
|
| Certainly if you want to test new features that's good. But what
| is the benefit for general Web development?
|
| /not a web developer
| lol768 wrote:
| > The site mentions Firefox Developer Edition. What is that? A
| quick search seems to indicate that it's just one version ahead
| of Beta, what was called Aurora in the past.
|
| > Certainly if you want to test new features that's good. But
| what is the benefit for general Web development?
|
| See https://news.ycombinator.com/item?id=8583747
|
| In short, separate profile, quicker access to new developer
| tools/new web standard implementations by virtue of being its
| own release channel (as you mention), developer-friendly
| defaults.
| evo_9 wrote:
| Thanks for this, this should be the top comment.
|
| It's nice to praise Firebug - it's awesome and I agree with
| all the praise - but none of the praise explains / points to
| this awesome FF Developer Edition which up until this comment
| I had never heard of.
| jmuguy wrote:
| 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.
| dewey wrote:
| It's the old website, look at the timeline that stops at 2017
| and it pointing to the default Firefox tools.
| paul7986 wrote:
| 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.
| FajitaNachos wrote:
| My first real dev project was a chrome extension that would
| save those html/css and auto commit them to a GitHub repo.
| paul7986 wrote:
| Yes a friend set it up so it automatically changed the files
| locally. But, for me I frequently use the undo function in my
| local files and having it auto save didnt work for me.
| Personal preference.
|
| Cool that yours auto pushed to a repo.
| kentbrew wrote:
| I have a career because of Firebug.
| sroussey wrote:
| That's probably the best compliment I've seen.
| dependenttypes wrote:
| I never understood why mozilla decided to implement their own
| inferior and laggier version of developer tools when firebug
| existed.
| JohnBooty wrote:
| In what way(s) do you find it inferior?
| ars wrote:
| 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.
| sroussey wrote:
| Firebug could do it both ways, that was the beauty of
| console.dir().
| coolreader18 wrote:
| Some would probably find that superior to firebug
| ars wrote:
| It's rare to need to see the current (static) state of an
| object, more often you want to see how the object changes
| as the code runs.
| krisgenre wrote:
| I am indebted to Firebug forever. If it weren't for Firebug it
| would have taken me a really long time to understand how the web
| (browser) works.
| Normille wrote:
| Is this archaeology corner?
| letientai299 wrote:
| 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.
| Normille wrote:
| Fair enough.
|
| I remember first discovering Firebug and being wowed by it,
| back when most browsers only offered you "View Source" as a
| way of looking under the bonnet.
|
| I just wondered why someone had submitted a 4 year old blog
| post announcing the demise of Firebug, seeing as every
| browser now has it built-in.
| julius wrote:
| Still remember that Javascript bug that only occured when Firebug
| was NOT installed.
|
| Was quite tricky to debug, until it finally clicked. Back then
| the browser did not have a console.log() function.
| joshstrange wrote:
| 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.
| sroussey wrote:
| 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. :)
| mongol wrote:
| Two distinct periods. Web development before Firebug. And web
| development after Firebug.
| fao_ wrote:
| 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.
| globular-toast wrote:
| 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.
| forgotmypw17 wrote:
| 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.
| burlesona wrote:
| 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.
| heavenlyblue wrote:
| Firefox took tabs from Opera.
| johannes1234321 wrote:
| Excel invented tabs! (Got this from some MSFT presentation,
| when they introduced tabs tonIE)
| alexknowshtml wrote:
| Same here. I remember showing Firebug to coworkers and them
| thinking that I was showing them some kind of wizardry.
| abhgh wrote:
| 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.
| irrational wrote:
| Firebug is the reason that I started using Firefox, and still use
| it as my primary browser today.
|
| The difference between web development before and after firebug
| was dramatic.
| kilroy123 wrote:
| For a long time, I resisted switching to Chrome just because of
| Firebug. IMO it was superior for quite a while. Eventually,
| Chrome got better, and I made the jump.
|
| Nowadays, I'm back on Firefox.
| ChrisMarshallNY wrote:
| I loved FireBug. Nowadays, every browser has its capabilities,
| but back in the day, FireBug was the only game in town.
| troyjfarrell wrote:
| Venkman was the only game in town. It was a glorious day when
| Firebug surpassed Venkman.
|
| https://wiki.mozilla.org/Venkman/Firebug_Comparison
| ChrisMarshallNY wrote:
| Forgot about that one.
| sroussey wrote:
| Yeah, this was the original front end to the debugger apis
| (which then barely changed for a decade).
| mixmastamyk wrote:
| I used firebug for about ten years, until a new update came out
| with hardcoded white backgrounds, ignoring the dark system theme
| we used in a studio.
|
| After my bug was closed wontfix I switched to the then new
| Firefox dev tools and never used firebug again. White background
| fascists take note.
| theomega wrote:
| 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.
| yorwba wrote:
| 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.
___________________________________________________________________
(page generated 2020-09-13 23:00 UTC)