10 ms·

Out of curiosity, what do you use Firebug for that the regular developer tools can't handle? There used to be a huge feature gap between them, but that's been

Out of curiosity, what do you use Firebug for that the regular developer tools can't handle? There used to be a huge feature gap between them, but that's been shrinking for a while, and I thought it had been eliminated altogether.

pmontra 11y ago
Firebug still has a better UI. The dev tools seem coming straight from the 90s (Chrome's ones too) but they feel faster. Advantages and disadvantages in functionality are mixed, but I end up using Firebug almost all the time. Unfortunaly I'm on a tablet now, if I were at the computer I'd give you examples. I wish the teams merge and give us dev tools with a Firebug UI and all the functionalities of the two tools.
- josefresco 11y ago
  I use Firebug simply because it's what I'm comfortable with and "used to". The UI, keyboard shortcuts and general expected behavior are what keep me locked in. When debugging in Chrome/IE it's always painful to use the developer tools even though they are very capable.
  - greenpizza13 11y ago
    IE's developer tools are very far from capable.
- wldcordeiro 11y ago
  Odd I think that Firebug's UI is the one still stuck in the past vs Chrome's and Firefox's native tools.
- pmontra 11y ago
  At the computer now. Here is a comparison of the tools. It's not in depth and limited to what I usually use. Inspector, HTML editing, Net panel: Basically the same. Storage: you can inspect localstorage and IndexedDB with dev tools. You need https://addons.mozilla.org/en-US/firefox/addon/firestorage-plus/ https://addons.mozilla.org/en-US/firefox/addon/firestorage-p... for inspecting localstorage with Firebug. No IndexedDB support, but I never used it (localstorage is so much simpler) so I didn't search much. Firebug can delete cookies (maybe that's another extension, can't remember), dev tools can. It could be even, depending on what you use most. Console: dev tools autocompletes functions. Inspection of variables is abot the same but Firebug displays more information without having to browse all the values tree. Firebug's console is multiline which is handy for typing in short scripts. However that means that commands run only with CTRL-Enter. I prefer Firebug. HTML structure: the same but the dev tools bury the DOM tab into a right click menu. I prefer Firebug's UI. CSS editing: the same. Script/Debugger: almost the same but I prefer Firebug because of the way it displays information about the variables (similar to my reasoning about Console). Aesthetics: Chrome and Firefox dev tools looks more primitive than Firebug to me but this is very subjective and I have a theory about it. Web and mobile have been moving to a minimalistic and flat design for the last few years. Having used computers since the 80s that reminds me of some designs of the 80s/early 90s. The flat Windows 8 desktop mode decorations are somewhat similar to the early Windows (check http://www.webdesignerdepot.com/2009/03/operating-system-interface-design-between-1981-2009/ http://www.webdesignerdepot.com/2009/03/operating-system-int...) with obviously everything that more pixels, colors and animations allow. Still I can't feel it a bit deja-vu like some elements of fashion that came back after forty years (example: the brown color - Europe here, USA could be different). Younger folks will say that are Firebug's 3D buttons to look dated and I understand it. But just wait some 20 years and I bet you'll start having that feeling too :-) As I said: very subjective. Summary: that basic functionality is more or less the same and the difference is probably more a matter of UI and habits than of technical merit. There might be some use cases where you need to dig into dev tools' options and enable more functionality. Dev tools win there.
  - Excavator 11y ago
    > Firebug's console is multiline which is handy for typing in short scripts. However that means that commands run only with CTRL-Enter. I prefer Firebug. Like with most similar consoles the Firefox dev tools allow you to create newlines with Shift+Enter
    - pmontra 11y ago
      So it's the opposite approach. Thank you, I'll try to remember it.
EdSharkey 11y ago
I have seen this question a lot when Firebug vs. Developer Tools comes up ... for like years and years, since Developer Tools first dropped even. Now you've got me curious. Please reply with points I offer below that you HAVEN'T heard before. 1. Just make Find work right. I need global find, that's all I need. On what corporate drone planet is it a smart idea to prepend an exclamation mark to search terms to request a global find? Chrome makes the same mistake - The Search Company got Find wrong... (Perhaps Chrome ain't all that and a bag of chips!?) MAKE CTRL-F DEFAULT TO GLOBAL FIND! [Scream your favorite cuss word now if you're with me on this!] One strike and you're out when you screw up something dead simple like Find! I don't need file-catalogged search results where I stoke my chin and ponder all the matches; just go to each match by jumping around directly in the source, let me hold down Enter while you cycle through the matches and source files, let me know when we wrap around the search result list with a little informative "search results wrapped" pop-under - how do I describe my frustration?? FIND IS VERY UNPRODUCTIVE AND OVER-ENGINEERED IN DEVELOPER TOOLS. This is somebody's baby, I'm sorry to whomever if he is reading this - I just think simple is the key and that's what Firebug has going for it. Just do me a favor and toss the whole Find as you got it into an Advanced Find dialog box and give me simple, Firebug-style, rip n' roll global find in Developer Tools, PLEASE. 2. I know Firebug is an opt-in extension, so they have the right to do this, but ... Firebug puts that handy bug icon on the location bar for popping open the firebug panel. It's nice, appeals to my lazy muscle memory! I'm sure the Firefox Developer Edition does something similar (right??), and they wouldn't force me to go rummage the hamburger menu for their link in that version of Firefox. But, I'm too unmotivated to switch to that version of Firefox. I'm far too unmotivated to customize my location bar (except to remove the new Pocket icon, gross.) The firebug icon is beautiful, I want to click its button. 3. I like the tabs in firebug better than those in developer tools. The CSS inspector is great in Firebug, always has been very productive. 4. Breakpoints are hinky in Firefox in general, both in Firebug and in Developer tools. I've seen the JIT'er optimize away my line with a breakpoint in both environments, but in Firebug my breakpoints seem to 'catch' a little better. I'd like to see a lot more work done on breakpoints in the debugger in general and have breakpoints (potentially) survive refreshes (or Webpack autoreloads) where the sources or script filenames have have changed. I suppose the debugger could achieve this linking my breakpoints to line numbers in sourcemaps rather than to the .js files themselves. If it already works this way, then I must be doing something wrong, because I am constantly losing my breakpoints when actively developing code that I am also stepping through. 5. Could we just have the Firebug UI atop the Developer Tools? Firebug has made Firefox unstable lately leading to stalls and shutdown timeouts. I would love to see Firebug team re-skin the developer tools with their UI and throw away the firebug kernel. The native integrations in developer tools are bound to do a much better job debugging than an extension like Firebug ever could. I thought I heard that this was the plan for Firebug.next, and I am all for it.
acemarke 11y ago
Disclaimer: I'm still stuck on FF31 for dev testing purposes (internal application targeting FF31 ESR), and haven't tried newer builds. My biggest complaint about both Firebug and the FF Dev Tools is the way they list downloaded content files. FF Dev Tools seems to only have a flat list of filenames, which is ridiculous. Firebug has a dropdown that can be filtered by name, which helps, but is slow. I'd always been a Firebug user, but I finally gave Chrome Dev Tools a shot a few months back and was sold by a combination of its speed and general usability. In this case, stuff like having an actual tree of content files that I can expand. Also, to echo another comment, Firebug seems to go haywire every so often while trying to set breakpoints. Either the breakpoint symbol just spins and never actually sets, or when you reload the page it acts like you set the breakpoint on the last line of a module, etc. Haven't yet tried out Firebug 3, as it requires FF35+.
- canuckistani 11y ago
  Man, that was 7 versions ago! WOuld love to get your impressions of Dev Edition 40. FYI it will create and use a separate profile from your main Firefox profile, so there is no risk in trying it out.
Touche 11y ago
Firefox Devtools still shows scripts in the debugger as one single scrollable list. No folder hierarchy.

pmontra 11y ago

Firebug still has a better UI. The dev tools seem coming straight from the 90s (Chrome's ones too) but they feel faster. Advantages and disadvantages in functionality are mixed, but I end up using Firebug almost all the time. Unfortunaly I'm on a tablet now, if I were at the computer I'd give you examples. I wish the teams merge and give us dev tools with a Firebug UI and all the functionalities of the two tools.

josefresco 11y ago
I use Firebug simply because it's what I'm comfortable with and "used to". The UI, keyboard shortcuts and general expected behavior are what keep me locked in. When debugging in Chrome/IE it's always painful to use the developer tools even though they are very capable.
- greenpizza13 11y ago
  IE's developer tools are very far from capable.
wldcordeiro 11y ago
Odd I think that Firebug's UI is the one still stuck in the past vs Chrome's and Firefox's native tools.
pmontra 11y ago
At the computer now. Here is a comparison of the tools. It's not in depth and limited to what I usually use. Inspector, HTML editing, Net panel: Basically the same. Storage: you can inspect localstorage and IndexedDB with dev tools. You need https://addons.mozilla.org/en-US/firefox/addon/firestorage-plus/ https://addons.mozilla.org/en-US/firefox/addon/firestorage-p... for inspecting localstorage with Firebug. No IndexedDB support, but I never used it (localstorage is so much simpler) so I didn't search much. Firebug can delete cookies (maybe that's another extension, can't remember), dev tools can. It could be even, depending on what you use most. Console: dev tools autocompletes functions. Inspection of variables is abot the same but Firebug displays more information without having to browse all the values tree. Firebug's console is multiline which is handy for typing in short scripts. However that means that commands run only with CTRL-Enter. I prefer Firebug. HTML structure: the same but the dev tools bury the DOM tab into a right click menu. I prefer Firebug's UI. CSS editing: the same. Script/Debugger: almost the same but I prefer Firebug because of the way it displays information about the variables (similar to my reasoning about Console). Aesthetics: Chrome and Firefox dev tools looks more primitive than Firebug to me but this is very subjective and I have a theory about it. Web and mobile have been moving to a minimalistic and flat design for the last few years. Having used computers since the 80s that reminds me of some designs of the 80s/early 90s. The flat Windows 8 desktop mode decorations are somewhat similar to the early Windows (check http://www.webdesignerdepot.com/2009/03/operating-system-interface-design-between-1981-2009/ http://www.webdesignerdepot.com/2009/03/operating-system-int...) with obviously everything that more pixels, colors and animations allow. Still I can't feel it a bit deja-vu like some elements of fashion that came back after forty years (example: the brown color - Europe here, USA could be different). Younger folks will say that are Firebug's 3D buttons to look dated and I understand it. But just wait some 20 years and I bet you'll start having that feeling too :-) As I said: very subjective. Summary: that basic functionality is more or less the same and the difference is probably more a matter of UI and habits than of technical merit. There might be some use cases where you need to dig into dev tools' options and enable more functionality. Dev tools win there.
- Excavator 11y ago
  > Firebug's console is multiline which is handy for typing in short scripts. However that means that commands run only with CTRL-Enter. I prefer Firebug. Like with most similar consoles the Firefox dev tools allow you to create newlines with Shift+Enter
  - pmontra 11y ago
    So it's the opposite approach. Thank you, I'll try to remember it.

EdSharkey 11y ago

I have seen this question a lot when Firebug vs. Developer Tools comes up ... for like years and years, since Developer Tools first dropped even. Now you've got me curious. Please reply with points I offer below that you HAVEN'T heard before. 1. Just make Find work right. I need global find, that's all I need. On what corporate drone planet is it a smart idea to prepend an exclamation mark to search terms to request a global find? Chrome makes the same mistake - The Search Company got Find wrong... (Perhaps Chrome ain't all that and a bag of chips!?) MAKE CTRL-F DEFAULT TO GLOBAL FIND! [Scream your favorite cuss word now if you're with me on this!] One strike and you're out when you screw up something dead simple like Find! I don't need file-catalogged search results where I stoke my chin and ponder all the matches; just go to each match by jumping around directly in the source, let me hold down Enter while you cycle through the matches and source files, let me know when we wrap around the search result list with a little informative "search results wrapped" pop-under - how do I describe my frustration?? FIND IS VERY UNPRODUCTIVE AND OVER-ENGINEERED IN DEVELOPER TOOLS. This is somebody's baby, I'm sorry to whomever if he is reading this - I just think simple is the key and that's what Firebug has going for it. Just do me a favor and toss the whole Find as you got it into an Advanced Find dialog box and give me simple, Firebug-style, rip n' roll global find in Developer Tools, PLEASE. 2. I know Firebug is an opt-in extension, so they have the right to do this, but ... Firebug puts that handy bug icon on the location bar for popping open the firebug panel. It's nice, appeals to my lazy muscle memory! I'm sure the Firefox Developer Edition does something similar (right??), and they wouldn't force me to go rummage the hamburger menu for their link in that version of Firefox. But, I'm too unmotivated to switch to that version of Firefox. I'm far too unmotivated to customize my location bar (except to remove the new Pocket icon, gross.) The firebug icon is beautiful, I want to click its button. 3. I like the tabs in firebug better than those in developer tools. The CSS inspector is great in Firebug, always has been very productive. 4. Breakpoints are hinky in Firefox in general, both in Firebug and in Developer tools. I've seen the JIT'er optimize away my line with a breakpoint in both environments, but in Firebug my breakpoints seem to 'catch' a little better. I'd like to see a lot more work done on breakpoints in the debugger in general and have breakpoints (potentially) survive refreshes (or Webpack autoreloads) where the sources or script filenames have have changed. I suppose the debugger could achieve this linking my breakpoints to line numbers in sourcemaps rather than to the .js files themselves. If it already works this way, then I must be doing something wrong, because I am constantly losing my breakpoints when actively developing code that I am also stepping through. 5. Could we just have the Firebug UI atop the Developer Tools? Firebug has made Firefox unstable lately leading to stalls and shutdown timeouts. I would love to see Firebug team re-skin the developer tools with their UI and throw away the firebug kernel. The native integrations in developer tools are bound to do a much better job debugging than an extension like Firebug ever could. I thought I heard that this was the plan for Firebug.next, and I am all for it.

acemarke 11y ago

Disclaimer: I'm still stuck on FF31 for dev testing purposes (internal application targeting FF31 ESR), and haven't tried newer builds. My biggest complaint about both Firebug and the FF Dev Tools is the way they list downloaded content files. FF Dev Tools seems to only have a flat list of filenames, which is ridiculous. Firebug has a dropdown that can be filtered by name, which helps, but is slow. I'd always been a Firebug user, but I finally gave Chrome Dev Tools a shot a few months back and was sold by a combination of its speed and general usability. In this case, stuff like having an actual tree of content files that I can expand. Also, to echo another comment, Firebug seems to go haywire every so often while trying to set breakpoints. Either the breakpoint symbol just spins and never actually sets, or when you reload the page it acts like you set the breakpoint on the last line of a module, etc. Haven't yet tried out Firebug 3, as it requires FF35+.

canuckistani 11y ago
Man, that was 7 versions ago! WOuld love to get your impressions of Dev Edition 40. FYI it will create and use a separate profile from your main Firefox profile, so there is no risk in trying it out.

Touche 11y ago

Firefox Devtools still shows scripts in the debugger as one single scrollable list. No folder hierarchy.