Firebuggin’

Posted: July 17th, 2008

75 Comments (Show Comments)

1. Scott Olson (July 17, 2008 at 4:01 pm)

   John,

   Great to hear! As a web developer, I’ve found Firebug to be an invaluable tool. I’m glad to see that it’s receiving the attention and direction it deserves.

   Cheers,

   Scott

2. Darren Mak (July 17, 2008 at 4:02 pm)

   mini-congratulations John. I know this great tool can only get better!

3. Rey Bango (July 17, 2008 at 4:03 pm)

   Man that is awesome news John. Firebug is an essential tool for web development and you’re a great person to guide the development of it! :D

4. Marc Grabanski (July 17, 2008 at 4:03 pm)

   Great to hear! I use firebug every day, so I’m excited to see what happens with the tool after the newly formed Mozilla team jumps on board.

5. Edwin Khodabakchian (July 17, 2008 at 4:04 pm)

   Congratulations. Interestingly enough JQuery and Firebug are my two favorite web development “tools”.

6. Dan Pickett (July 17, 2008 at 4:05 pm)

   That’s awesome. Firebug is a great tool and I’m sure the team coming together will make it even better.

7. Scott Schiller (July 17, 2008 at 4:08 pm)

   (Best Farnsworth impersonation reasonably possible): “Good news everyone!”

   Seriously though, great to hear. Firebug has changed the way I do my job – it is amazing.

8. Sugendran Ganess (July 17, 2008 at 4:09 pm)

   Awesome!

   Are we going to get a “library quick load” button that pulls in the latest version of jQuery? …. actually a macro-ing system would be kinda handy…

9. Jörn Zaefferer (July 17, 2008 at 4:11 pm)

   Good news indeed! You could start gather extensions for Firebug – currently they are difficult to track down, while most of them are in an experimental status. Being able to toggle Firebug extensions on/off within Firebug could be useful.

10. Kristofer Baxter (July 17, 2008 at 4:28 pm)

    This is great news, I can’t wait to see what you guys come up with.

11. Adam Wulf (July 17, 2008 at 4:29 pm)

    Awesome! i’m really looking forward to see what you’re going to do with it. Firebug is by far the my most useful tool building apps. Great to hear!

12. Paul Irish (July 17, 2008 at 4:39 pm)

    @Jörn

    Check this: http://www.softwareishard.com/blog/firebug/list-of-firebug-extensions/
    It’s from Jan from Mozilla (listed above)

13. Anthony Mills (July 17, 2008 at 4:55 pm)

    EXCELLENT!

    This is wonderful news.

14. Irakli Gozalishvili (July 17, 2008 at 5:02 pm)

    Great to hear that Mozilla is interested in that.
    I hope to get firebug (+chromebug) not as firefox but as mozilla toolkit extension ?

    Is it possible ?? Are there any plans like that?

15. Greg Davidson (July 17, 2008 at 5:11 pm)

    Really great news. Firebug has changed the way I work too and helped me learn js along the way.

16. Tane Piper (July 17, 2008 at 5:27 pm)

    Much like Dimensions going into the core of jQuery because of it’s usefulness and popularity, it’s great to see Firebug get the same treatment from you ;)

    Congrats, and I can’t wait to see the roadmap.

17. Bob (July 17, 2008 at 5:38 pm)

    Is the Mozilla Firebug team going to work on Chromebug as well? It would really help me and many others if Chromebug worked as well as Firebug.

18. Lucas Myers (July 17, 2008 at 5:40 pm)

    Most excellent news indeed!! Firebug and jQuery and indispensable.

    @Sugendran Ganess
    There’s always Karl Swedberg’s jQuery bookmarklet: http://www.learningjquery.com/2008/06/updated-jquery-bookmarklet

19. Richard D. Worth (July 17, 2008 at 5:48 pm)

    Really really great news! Looking forward to what’s in store.

    Congrats John and team.

20. Buck Wilson (July 17, 2008 at 5:49 pm)

    Hooray firebug! This tool has really made web dev more fun, for sure.

    As a designer, a way to keep track of css changes I made directly in firebug would be nice, so I can then apply them directly to the .css file I’m working on.

21. Ryan (July 17, 2008 at 5:51 pm)

    Congrats! This is awesome news!

22. Jethro Larson (July 17, 2008 at 6:31 pm)

    @Buck I’ll agree with that. I’ll often try stuff out and then lose it if I change pages, refresh, etc.. It’s be nice to be able to keep track of the modifications.

    Also adding “Add New Rule” to the context menu in the CSS tab would be a welcome addition. Maybe it could add a dynamic stylesheet with the effected changes. Though that would require some thought since where you make the changes in the flow makes a big difference in the cascade.

23. tr0y (July 17, 2008 at 7:52 pm)

    I am so glad to hear that – developing without firebug is terrible (cough, IE), and i imagine that its just going to get better now. Congrats! And since everyone else is throwing them out there… would love the ability to add a new selector and rules to the css file. And have to back up buck on his suggestion of a change log.

24. Karl Swedberg (July 17, 2008 at 8:10 pm)

    Congratulations, John! That’s terrific news!

    I have one request for Firebug: bring back the console feature that showed the array of DOM nodes returned by a jQuery selector. In Firebug 1.2, it just shows “Object length=n” and requires an extra click to then see which nodes are there.

    Cheers!

25. Dave Schoonover (July 17, 2008 at 8:13 pm)

    OH THANK GOD.

26. Yereth (July 17, 2008 at 9:05 pm)

    Does this mean that a bug which causes FF3 + Firebug1.2beta to crash on a whole bunch of jquery sites to be resolved? Because then it would indeed be fabulous.

    Just for a demonstration which makes firefox 3 instantly crash when firebug is enabled, go to this website:
    http://www.ilovemyitdepartment.com

    Works every time for me, on all computers. Also see this post:
    http://groups.google.com/group/firebug/browse_thread/thread/83f0b4cac62098dd/651e1c43d9250373#651e1c43d9250373

    Cheers for the good work and for keeping us updated!

    Yereth

27. Scott Fitchet (July 17, 2008 at 9:08 pm)

    Man, I need a second monitor at work for the Firebug popout. :(

28. Karim Nassar (July 17, 2008 at 9:22 pm)

    Congrats John!

    I’m really looking forward to hear what you guys come up with. If you’re taking requests, how about a way to force-reload individual page resources?

29. Mathew Wong (July 17, 2008 at 9:34 pm)

    Awesome news John! I’m looking forward to seeing some kick ass development for everybody’s favorite development tool.

30. Asrail (July 17, 2008 at 9:37 pm)

    Great!

    Nice to see a bigger development team for Firebug.

31. dkaz (July 17, 2008 at 9:41 pm)

    FF3/Firebug stability should be immediate goal #1 – I hope you guys are on it

    I’m really confused why the “disable Firebug” and “disable Firebug for site” options went away in the right-click context menu…they were invaluable

    that said, it’s a brilliant tool and you’re the right man to lead it forward

32. Collin Allen (July 17, 2008 at 9:45 pm)

    This news is most excellent! I’m glad to see Firebug is in good hands and will have an even brighter future ahead. It’s easily the best web development tool around, and personally saves me hours upon hours of work every week. I’m already eagerly awaiting future improvements! Congrats!

33. Ralph Whitbeck (July 17, 2008 at 9:57 pm)

    Don’t screw it up! ;)

    Congrats.

    I’d always wished firebug would be ported to IE and Safari just so web development could be the same on all platforms.

34. John Resig (July 17, 2008 at 10:32 pm)

    Thanks everyone – I know we’ll try to do our best to make things even better!

    @Sugendran: A library quick-load would be real useful. What do you mean by macroing, though?

    @Buck, tr0y: Dumping CSS and JS changes to a file is a great idea!

    @Jethro: Good call – that’s bitten me a couple times, as well.

    @Karl: That change upsets me, too. Definitely want to see that one resolved.

    @Yereth: I think this issue was fixed in Firefox 3.0.1 – try upgrading.

    @dkaz: That’s because Firebug is already disabled by default (in 1.2). You have to forcefully enable it for any site that you want it to run on. This saves a considerable amount of resources.

35. Collin Miller (July 17, 2008 at 10:52 pm)

    In addition to dumping CSS/JS changes.

    Drag and drop in the DOM tree.

    Easy insertion of nodes into DOM tree, such as:

    rightclick: appendChildNode…

    Then choose what element to insert.

36. Blair McBride (July 17, 2008 at 11:31 pm)

    Great news. I see Bob asked the same question, but: Will you be working on ChromeBug too?

    Also, a feature suggestion: highlight/blink elements that match a given CSS selector. Would be great to see what elements will be impacted by a CSS change, that might otherwise not be as noticeable.

37. Felipe Gomes (July 18, 2008 at 12:10 am)

    Congrats John! A new team being formed sure brings some boost and fresh air to the development of Firebug. I hope you and the other guys can keep making Firebug the *one true firefox extension* for every developer out there, and specially that Chromebug can reach such great level and feature-richness too.

38. Havy (July 18, 2008 at 12:33 am)

    Feel like adding an IRC link next time you show a channel? Chatzilla and Mibbit users can click on irc://irc.mozilla.org/firebug

39. Daniel (July 18, 2008 at 12:52 am)

    Head of jQuery *and* Firebug?!? That’s some serious leverage.

    PS: Congrats!

40. Sugendran Ganess (July 18, 2008 at 7:29 am)

    @John RE: Macroing

    I guess a DIY script library is what I had in mind. So rather than having to type out the common code that I use to debug a page, I could just have firebug insert and run it (right now I copy and paste from my google notebook).

    It would be useful to simulate clicks etc.. for testing a page as well, though this could probably be done via the script library.

41. Robin (July 18, 2008 at 9:02 am)

    Sugendran: Can’t you just add your debugging code + jQuery to a bookmarklet and add it to your bookmarks toolbar? That should give you what you want right?

42. Tim Towdi (July 18, 2008 at 9:25 am)

    I suppose then, if its “officially” a Mozilla project now, it’s never going to produce an IE, Safari, or Opera version…*sigh*

    Oh well, at least there will be an active development team for it.

43. John Resig (July 18, 2008 at 9:33 am)

    @Tim Towdi: It’s not a Mozilla project, per se – we’re just offering 3 people to the Firebug Working Group to help development. IE, Safari, and Opera all have their own – official – tools at this point with their own development teams, it would be wasteful for us to try and duplicate their efforts. That being said development on Firebug Lite is still going very strong – you can expect to see more here quite soon.

44. Josh Miller (July 18, 2008 at 9:54 am)

    @John – glad to hear that your post about firebug and it’s future didn’t go unnoticed. Though, please PLEASE PLEASE make it browser independent (is that even possible?) so I can debug my IE6 issues easily. I hate IE6 and have many more problems with it than I do Firefox, which is sad because Firefox makes it so easy to fix the problems I do have…

45. Josh Miller (July 18, 2008 at 9:56 am)

    Huge feature request!

    I would love to be able to right click on a script or file on the “Net” panel and tell it to reload. Would make it very easy to reload the CSS and reapply it to the page.

46. Aaron Holden (July 18, 2008 at 10:15 am)

    John.. don’t you sleep? Seriously, this is the best news I’ve heard for a long time… it’s a great tool and your magic touch can only make it better…

47. Ronny Karam (July 18, 2008 at 10:30 am)

    I know this is great news for you as it should be for any developer who finally got a breakthrough. Congratulation!

    I’ve been using firebug for a year now, yet with the release of Firefox 3, the add-on is not really stable and causes Firefox to crash sometimes.

    Hope the new team will be able to release a working bug free version as soon as possible.

    Congratulations again.

48. Ralph (July 18, 2008 at 10:33 am)

    @John – IE, Safari and Opera might have their official tools but that doesn’t mean they make development easier or as easy as firebug. Especially IE’s web dev toolbar is so bad that it’s practically useless.

    I think having a standard tool like Firebug on all browsers would make web development that much more enjoyable.

    But to @Josh statement is an interdependent firebug possible. Maybe as a separate app?

49. an0n1 m0us (July 18, 2008 at 10:42 am)

    This is the best news I’ve heard since the performance improvements in the ‘fox.

    Amazing what a little dragonfly pressure can do.

    Here’s an idea to warp everyone’s minds:

    Save edits back to the server!

    I know, I know, it makes the ‘bug more like an editor and/or IDE and blurs the line between client side and server side … but who cares!

    Where I work we haven’t yet got version control. We FTP open files, edit them, save, F5. If I get sick of that loop 2and want to tweak something inline, I use ‘bug until I get something right.

    How awesome would it be to then be able to simple click “save” and have the server side code updated?

    Next:

    Since Microsoft are too pathetic to ever provide a Firebug equivalent for Exploder, why not do it ourselves? Am I stretching things too far or can Firebug be adapted to interrogate a Trident document if that document is embedded with the ‘fox like IE Tab and Netscape did?

50. Iraê (July 18, 2008 at 10:57 am)

    This is awesome news!

    Good luck!

    I’m already looking forward for the results! I’m sure you’ll do great!

51. Darren Craine (July 18, 2008 at 11:56 am)

    Awesome news. Firebug is a staple of my engineering team and we use it religiously. It has sped up development/debugging significantly. It has gotten to the point where many conversations start off with “well, what did Firebug say?” :)

52. Teja (July 18, 2008 at 1:54 pm)

    Wow… great news… what am I going to get? Is it going to be an IDE for JS? Or is it going to write code for me?

53. Steve Streza (July 18, 2008 at 3:32 pm)

    Awesome news, John!

    My top request: a “step back” feature in the debugger.

54. Jon (July 18, 2008 at 6:48 pm)

    Javascript editing!

    I know you can sortof edit with the console, by redefining functions, but when I’m looking through my code in the Script tag I really wish I could just in and there and type just like you can with the HTML tab. Sometimes you just want to quickly experiment.

55. Nosredna (July 18, 2008 at 7:42 pm)

    Terrific.

    This might not fall well on the ears of a Mozilla guy, but I love Firebug so much that what I want more than anything is a better Firebug Lite. Whatever you can do to give me more capabilities in Firebug Lite in other browsers to make it feel more like Firebug, that helps me a lot.

56. James Oppenheim (July 18, 2008 at 7:43 pm)

    Excellent news, I don’t know what I would do with out it.

    On another note, I think it would be great to be able to see all the custom event handlers attached to a particular DOM node.

57. Nosredna (July 18, 2008 at 7:55 pm)

    Could you guys make it so that Firebug reports errors back to you as Firefox does. That’d be a good way to clear up any remaining stability problems.

58. Andrew Wooldridge (July 19, 2008 at 2:05 pm)

    When Joe was originally working on Firebug I was encouraging him to create some systematic way to allow plugins for it. I think this is a critical feature for firebug’s future. Having a unified way to extend firebug will allow its featureset to grow without having a bunch of seemingly incompatible extensions and hacks to make it work.

    These plugins would allow web developers to add features to firebug in a way that does not clobber one another. And these features could act as a way to learn what features should be added to the core firebug.

    That said, I’ve always had a short list of really really wanted features in firebug:

    1) a way to show all the “diffs” of a css or html or js file that I modify during my session in firebug. You know, add a border here, or tweak a timer — then be able to do “show diffs” which just displays what I need to go back and add to the “real” css or js or html file.

    2) a way to hook into the event system of firebug — this would be for extension development

    3) Be able to show orphan CSS in a file — when Firebug reads a site – it “knows” what rules are being used (that Match on a selector) and which ones arent. To be able to see a list of “orphan” rules that no longer apply would be awesome

    4) Be able to show given any DOM element what javascript libraries have attached events to it — like click on the body tag and see all the jQuery functions that are attached to the click event, the onload, etc etc. There would probably need to be special adaptors for each library.

    5) be able to save and “run” macros within the firebug context. For instance you have a snippet of code that finds all the divs on a page and attaches a console.log when you mouse over them. Have a way to create a code snippet that you could save , edit, load, and “run” like a javascript based macro. This would be HUGE!!!

59. Thomas1OF12 (July 20, 2008 at 12:24 pm)

    Greetings,

    Sorry if this has already been said – Firebug will not work with FireFox version 3.0.1. Is anyone else experiencing this same issue? Is there a work around?

    Firebug is a great tool and I miss it now because I updated FireFox and did not keep the older install active in a different install location.

    Regards,
    Tom

60. Nosredna (July 20, 2008 at 12:33 pm)

    >>Sorry if this has already been said – Firebug will not work with FireFox version 3.0.1.

    Works for me. You using the correct Firebug?

    I have FF 3.0.1 and FB 1.2.0b6.

    Took me a while to figure out the Firebug I was using (had to hover over the bug icon). Why not put the version info right in FB’s title bar?

61. Comme une image (July 20, 2008 at 3:23 pm)

    I’m glad to see that the development of this vital extension is promise to a brillant future!

    Well, I don’t know if this is the right place for feature requests, but…
    1/ Make “search” function more powerfull : add previous/next navigation, enable search in css panel…
    2/ Enhance handling of pseudo-class like :hover
    3/ Enhance copy/cut/paste in CSS panel
    4/ Permit creation of brand new entry in CSS panel (not just “element.style”)
    5/ Already said, but a save (html/css/js) feature would be great. Also a “freeze” CSS (just like “web developer” plugin) to apply a (modified or not) CSS stylesheet to any page (reloaded, from other tab/website, …)

62. Robert O'Callahan (July 20, 2008 at 5:12 pm)

    It would be good to get Firebug people and Gecko people together at the summit to discuss things we could do in Gecko to make Firebug better. I’ve got a few ideas.

63. Jonathon Hill (July 20, 2008 at 9:05 pm)

    I heartily echo everyone’s sentiments. FB has become an indispensible tool not only for JS debugging but also CSS. It is exciting to see the development and attention that FB is attracting.

    Do you think that this extension might get rolled into a future version of Firefox?

64. David (July 20, 2008 at 10:26 pm)

    I hope this means that the Firebug website will be fixed up soon. After the domain was handed over to Mozilla, half the links on the site don’t work anymore…. hmmm, just checked it and what do you know.. most of the links work now :-) All except the blog. Will that be coming back?

    @Paul:
    Thanks for link to the list of FB extensions!

65. xwisdom (July 22, 2008 at 12:19 am)

    This is great news. Just two quick things that are on my mind:

    1) Can Web Developer and Firebug be merged into one? I think web Developer is also a great plugin

    2) Will Firebug become a Firefox certified plugin?

66. Igor Kononuchenko (July 22, 2008 at 12:05 pm)

    Hi, my suggestions is

    1) Allow to save JS, CSS
    2) Allow to change JS, CSS on fly like in editor. Just edit code
    and page catch them on fly then you can save it in your place or upload to ftp.
    3) Go to line – go to code line
    4) Search in JS and css
    5) code higlight
    6) version for IE, Safari, Opera :-)

    It would be great to see such functionality

    Igor

67. claudiobosticco (July 22, 2008 at 2:38 pm)

    +1 for firebug to become THE client side IDE

68. David Bolter (July 23, 2008 at 3:11 pm)

    Great to know you are on firebug John.

    If there are unit tests… please add one so that debugging of evals never gets broken :)

69. Ben (July 24, 2008 at 3:59 pm)

    Hi John,

    Great news! A feature I’d really love to see is an addition to the DOM inspector, where you could see any attached javascript event handlers for the node you are inspecting. For example, if I inspect a button it would be nice to see in the panel on the right something like:

    click:
    + handleButtonClick()
    hover:
    + changeImage()

    Where you could press [+] to view more details (including the code) of the handler.

    I look forward to seeing some great Firebug updates!

    Cheers, Ben

70. Suplementy (July 28, 2008 at 4:08 pm)

    This fantastic good news;
    I can not wait longer Firebug

71. pd (August 6, 2008 at 11:13 pm)

    right now the most immediate Firebug issue i have is perhaps not quite a Firebug-specific issue but it’s polluting my use of Firebug.

    John could you pretty please push through a solution/priority for solving this bug:

    https://bugzilla.mozilla.org/show_bug.cgi?id=433748

72. kiwi (August 7, 2008 at 4:34 am)

    im new to this, so i have a question: can u save things and how on firebug?

73. Will (September 6, 2008 at 11:57 pm)

    This is great great news. I have a couple of requests.

    I’d love to be able to sort the columns on the NET tab.

    I’d also love to see some attentive care casted towards copying stuff out of firebug. Things like ignoring line numbers, keeping indents alive, ignoring the name of the stylesheet/line number when copying from the style sub-panel… that sort of junk.

    Thanks,
    Will

74. andrew luetgers (December 16, 2008 at 10:55 pm)

    heres my request for firebug… I want to be able to edit js, css, and html live in the same manner i do in eclipse but i want to see those changes live. eg. edit a callback function click the button again and see the new code in action. oh yeah and if i could save those changes with ctrl+s. in short make it a lightweight IDE. Yeah i know Firebug is for debugging but ask yourself “is debugging not just diagnosing but coding too?” the IDE puts the de in de-bugging, so put the IDE in firebug! my $0.02 :-)

75. Mike (January 12, 2009 at 10:28 am)

    I *just* installed Firebug and I love the way it does the things. The only thing that makes this very impossible to use is that it doesn’t allow local save (remote save is something I don’t even need!) or that its CSS editor doesn’t allow working copying. Say I press ctrl-a ctrl-c and I should get nicely intended, customized style sheet of the page I modified WITHOUT any lines I’ve disabled. Very nice otherwise!

Comments are closed.
Comments are automatically turned off two weeks after the original post. If you have a question concerning the content of this post, please feel free to contact me.