Can you explain why? I've never found a use case that it covers better than Chrome, and it seems to bloat FF a bit. But I'm very willing to believe I just don't understand what it offers.
One thing that I found indicative of the "depth" of Firebug is the very simple context menu item when you right-click a URL in the Network tab: "Copy as Curl command" (the text may read differently, this is from memory). It creates a clipboard entry which contains a "curl" command line with all the cookie/header/etc. data that would be sent from your browser if you were to request that URL (via Ajax or whatever). You paste that into your terminal and you can keep retrying indefinitely without having to click/interact with the web page at all. Hugely useful if you're debugging the server side of a client->server interaction.
I'm always surprised when I read comments about how the Firefox devtools offer the best developer experience. Every single one of these new features (except searching the dom via CSS selectors or regex) have been available in Safari's Web Inspector for OS X for at least a year. Plus, I think the UI is more thought out and easy to use in Safari. Can someone explain what Safari's Web Inspector is lacking?
I've met quite a few developers that really like the safari dev tools. If your not developing on mac though I don't know how good your experience is (and linux is a non starter)
Now that Chrome and Safari inspectors have started to diverge significantly I find the Chrome inspector far superior. It just feels like more time has been invested in it.
Only issue I have is the fact it changes more or less every release, leading to a day or so of re-learning how to do certain tasks.
Would be good to bring it back to Windows, so that we can test our web sites. However last time when I was using it on Windows it was making my hard drive to make strange noises. I think that it was using my hard disk constantly.
Even as a Mac user, Safari completely has vanished from my radar. Apple seems too slow to adopt the latest web technologies and Safari to me is a completely lackluster browser. It has neither the market share of IE nor the raw speed of Chrome nor the versatility and configurability of Firefox.
Safari does not work on anything but MacOS and iOS, so developing for it requires additional testing.
I like the search feature in Firebug. Being able to search across all scripts/nodes/stylesheets is rad. Is Chrome Dev Tools' search that good yet? Every time I am working with another dev and want to search for a symbol, I tell the other devs to switch to Firefox/Firebug because Chrome Dev Tools is a mystery of hunting and pecking when it comes to search. (Google is not the best at something-something search??) I cannot understand why other devs are so happy with Chrome.
The Chrome timeline is rad when it comes to performance tuning, and maybe a lot of devs are light on the JS and heavy on the CSS. I jump into Chrome, briefly, whenever I want to tune performance.
All of the dev tools have quirks, bugs, and dumb UI usability issues, but when I want to work with a large codebase (which is every day of my life), I find Firebug works the best.
Chrome Dev Tools have had this for some time. On OSX Command-Option-F. Or, click the 'Search' tab in the console.
I haven't really found anything Firebug does that Chrome doesn't, and tons of stuff Chrome does that others don't, like debugging Web Workers, or awesome profiling tools for both JS CPU/HEAP, as well as internal browser profiling. Chrome Tracing is unparalleled.
Command-Option-F! I learn something new every day, thanks!
I've always gotten tripped up by the fact that Command-F pulls up a local file Find toolbar when I've focused a JavaScript source page. I assumed that was the extent of the Find capabilities Chrome offered. I'm 51% angry and 49% embarrassed that I never knew this! :)
Agreed the Web Workers debugger in Chrome is very advanced and as I recall they had that available straight away when the Web Workers feature was first released.
I think the Firefox/Firebug guys have only just added javascript console output for web workers in Firefox 30 and the debugger protocol for web workers is still in development.
I agree that Chrome's developer tool suite is more comprehensive than other browsers. For my day to day development tasks, looking at network calls, inspecting html and debugging CSS/JavaScript, Firefox+Firebug is still the most user friendly and accessible to me.
You can combine Firebug with the FF native developer tools? Like all-in-one in the Firebug UI?
I agree with you on webdevtoolbar, that is a fantastic tool for inspecting/altering aspects of the page. I wish webdevtoolbar had user agent tools. I have to run another plugin to give me user agent spoofing.
I'm in the same boat, but I run into weird bugs.. like dev-tools inside my dev-tools, or some sort of split screen that I can't get rid of. I just restart them, but still weird
Ever since FF tools added the "clear" buttons in the Console and Network tab, they won me over
I got a similar question when someone asked me at a short firefox development tools demo I gave: when would I use firebug over native development tools? I didn't have a good answer. (they had noted I had firebug installed)
I liked firbugs javascript debugger a bit better. Firefox has been updating the tools alot lately though and I like them. Though sometimes they tend to flake out (javascript debugger blowing over breakpoints until restart...).
The last thing that still bothers me (now that Firefox 30 added margin/padding highlighting) is that the built in dev tools don't have a way to manage cookies.
I like the built-in tools, but the two things I like in Firebug and use extensively are the DOM inspector and pretty printing JSON results in the Net panel for API calls.
Does FF have nice memory tools? I can't see any. I've come to rely a lot of Chromium built in mem tools: Heap snapshot (including diff between snapshots), Record Heap Allocations, Timeline.
To be fair, about:memory is designed to be used primarily by Firefox developers. Some web developers will be able to use it effectively, but it is quite intimidating.
Happily, memory profiling tools designed for use by web devs are being actively worked on.
To be honest, it is impressive the kind of detail about:memory manages to provide. But yes, it can be fairly intimidating. That is the problem I tried to address when I tried building a D3 backed front-end over it[1].
I've had trouble with them. They don't include inline stack traces for errors, so you have to do a lot more digging to find what happened and where. Also, in the Network panel, every refresh resets your filters so you have to select XHR every time if you don't want to see a bunch of .html/.js file requests (this may have been fixed in FF v30, haven't tested yet).
There are just a number of really small issues other than those that when you add them up, make the dev toolbar a lot less useful than Chrome. That said, I like Firefox the browser much better than Chrome.
If you're using nightly you already have had a lot of features like this for a while.
I find the dev tools in nightly a lot more useful than those in chrome and I prefer the way the dev tools are layed out in nightly. I also like the responsive design view, GCLI, and the eyedropper.
Same thing for me. I use Firefox as my main browser and I think it's far better than Chrome, but its native developer tools are just very confusing so I'm sticking with Canary as my development browser.
For me it's the interface - chrome dev tools are similar to what I learned with firebug, where as Firefox builtin tools don't make sense to me. When I need to debug something in Firefox I always install firebug and it's almost the same as if I'm debugging in chrome. Totally a UX thing for me... Happy firebug is still being worked on - it really changed the game in web development.
i feel the same way. firefox dev tools feel as if they were put together without much thought. a lot of features just thrown all over the place. I still use firebug mostly but chrome dev tools even if not as good as firebug are still a lot better than the firefox ones.
Not that I hate the Firefox devtools, but at the moment I'm using Chrome because there's no way to disable the caching of XMLHTTPRequests in Firefox, and I'm developing a Google Polymer app.
One of the features that Chrome has and that is just great is ability to connect resource in the webpage to the resource on your disk.
This way, with other tools such as HostAdmin and PerfectPixel you can turn desinged page template into pixel perfect html pretty fast - you just play with the css values in the inspector and your changes write-through to the file on your disk.
Similarly, Dragonfly was one step above in my opinion. In-line editing was weird, but debugging, console, and network stuff suited me more. Now I use it alongside Chrome's default set, but I haven't even thought about firebug. I just assumed the firefox default replaced it.
No, that's the old firebug. There was a platform bug in Firefox linked to the usage of the old javascript debugger module. This version of Firebug is completely unaffected.
I really need to stop being so dependent on Firebug. I've done coding sessions or interviews where the other developer only has Google Chrome. Since I use Firebug so much, I am not as proficient with Chrome Dev tools. It makes me look like an amateur when I fumble around. Half the time saying I am used to Firebug is useless since they don't even know what it is.
If they don't know what Firebug is, they're not versed in the tools of the trade. You should consider that to be a very serious red flag about working with them.
I use Chrome or Firefox built in developer tools, however I still think Firebug fits my workflow the best. Unfortunately it's too slow to use.
The thing I miss the most is the inline display of AJAX call responses, and being able to write/run multi-line snippets of JavaScript (without ctrl+enter).
Somewhat interestingly, Firefox built their entire add-on architecture because Joe Hewitt wanted dev tools (for debugging the actual browser moreso than websites), and Firebug was split off from Firefox and made into an add-on. A decade later, this has reversed and every major browser now ships with integrated dev tools.
"too slow to use" -- it now uses JSD2, which is much faster. So you may want to give a try again, as your previous experience may no longer be valid on this point.
I hate the fact that the close window/dialog button for the devtools is on the left hand side when every other plugin puts this on the right hand side. I am not an every day user of FF's built in devtools so it is not something that I am accustomed to. Despite firebug's performance troubles when I go to select devtools or firebug I usually opt for firebug simply because the close button drives me nuts.
We moved the button and a number of the tabs in Firefox devtools to be more like the order in Firebug and Chrome devtools. Here's a screenshot from current Nightly: https://i.imgur.com/EmVIZYO.png
New devtools are much improved however would it be possible to remove the dotted lines whilst inspecting an element (toggled option would be fine), just seems to get in the way of things.
And for Firefox Developer Tools, we have the Scratchpad. I like ours better due to the keyboard shortcuts for eval/display/inspect/re-eval function/etc, but I may be biased ;)
> The thing I miss the most is the inline display of AJAX call responses
If I understood correctly, you can have this on Chrome. In Chrome JS Console, do a right click in an empty space, and select "Log XMLHTTPRequests" (or it was something similar).
I have the enabled, however it only shows the URL accessed.
To see the actual response, you have to click the URL, which takes you to the Network panel. Then you have to find the request on the Network panel (no clue why it doesn't deep link to the correct tab), then click Response.
that works but still not as good as firebug's UI. basically you then need to click on the log entry, it will take you to the network panel and then you need to do another click to view the actual data. firebug has it all there in JSON decoded form and HTML its more convenient and requires a single click.
Shamelessly hijacking your comment to ask a question....is there any way (Chrome/Firebug, whatever) to somehow output to console or a log, all javascript execution (ie: as any function is executed, output the function name and the argument values). I know there is some way to turn on debugging and breakpoints, but having very little expertise in javascript and no knowledge of the code I'm looking at, the ability to just dump all activity so I could sift through it later would be tremendously useful.
I read that Firebug 2 now uses the newer JSDBG2 API of recent Firefox, so there should be no performance problems as there were with Firebug 1.x in recent Firefox versions.
I hate that I have to use both. If I right click and inspect element on your username, and then search for 'gkoberger', firefox shows zero matches because it doesn't search attributes. At the time of this posting, chrome finds four matches. It's little stuff like that which drives me crazy.
A word of warning to others: Not a good start. Trying replace my current installation of Firebug with this one caused my Aurora to enter a constant crash-loop.
Entering safe mode, uninstalling the existing version and attempting to close all tabs related to Firebug seemed to fix the problem.
So you may want to try removing your existing Firebug before installing.
Pretty-printing: awesome! Unfortunately it's a little buggy when setting breakpoints. I tested it using the minified version of jquery on the Mozilla pages and it quickly went out of sync while stepping into a function.
I'd consider dropping Chrome for this feature, as Chrome broke pretty printing in some cases in a recent update.
this was one of the original must have extensions in the early days of FF.. haven't been back though since the browsers integrated them in by default. not sure why i would?
Firebug is still the best tool set on any browser. I still recall the times where you had to debug IE using alert() statements without any sort of debugger.
One thing that i would love to see the callback on event listeners. And one feature that i was missing a couple weeks ago in the firefox dev tool was the ability to preserve network logs when changing page.
This is good news, Firebug is a steady companion in my work.
The UI is consistent, no elements moving around between releases. It works with Django web applications, which the built-in devtools does not. And allows me to persist the log of network connections between page reloads.
Not sure why Firefox chose to build their own developer tool when firebug was one of the compelling reason to use firefox and started the trend of having an extensive tool for debugging/inspecting webpages.
I may be wrong ..
Originally firebug had to be really slow because of the interfaces available for debugging, the internal tool could work without slowing everything to a crawl.
With the newer debugging interface it seems like firebug can work and the browser can be fast.
Yeah, you are right. But i meant to say that firefox could have made firebug as its own developer tool and continue to make it better instead of building their own.
122 comments
[ 1.9 ms ] story [ 169 ms ] threadSee: https://code.google.com/p/chromium/issues/detail?id=35487
I've met quite a few developers that really like the safari dev tools. If your not developing on mac though I don't know how good your experience is (and linux is a non starter)
It has a platform limitation.
Only issue I have is the fact it changes more or less every release, leading to a day or so of re-learning how to do certain tasks.
Does Safari support source-maps yet?
Safari does not work on anything but MacOS and iOS, so developing for it requires additional testing.
The Chrome timeline is rad when it comes to performance tuning, and maybe a lot of devs are light on the JS and heavy on the CSS. I jump into Chrome, briefly, whenever I want to tune performance.
All of the dev tools have quirks, bugs, and dumb UI usability issues, but when I want to work with a large codebase (which is every day of my life), I find Firebug works the best.
I haven't really found anything Firebug does that Chrome doesn't, and tons of stuff Chrome does that others don't, like debugging Web Workers, or awesome profiling tools for both JS CPU/HEAP, as well as internal browser profiling. Chrome Tracing is unparalleled.
I've always gotten tripped up by the fact that Command-F pulls up a local file Find toolbar when I've focused a JavaScript source page. I assumed that was the extent of the Find capabilities Chrome offered. I'm 51% angry and 49% embarrassed that I never knew this! :)
Agreed the Web Workers debugger in Chrome is very advanced and as I recall they had that available straight away when the Web Workers feature was first released.
I think the Firefox/Firebug guys have only just added javascript console output for web workers in Firefox 30 and the debugger protocol for web workers is still in development.
I agree that Chrome's developer tool suite is more comprehensive than other browsers. For my day to day development tasks, looking at network calls, inspecting html and debugging CSS/JavaScript, Firefox+Firebug is still the most user friendly and accessible to me.
I agree with you on webdevtoolbar, that is a fantastic tool for inspecting/altering aspects of the page. I wish webdevtoolbar had user agent tools. I have to run another plugin to give me user agent spoofing.
Can any current Firebug users comment as to what they like about it over the built-in tools?
Ever since FF tools added the "clear" buttons in the Console and Network tab, they won me over
I liked firbugs javascript debugger a bit better. Firefox has been updating the tools alot lately though and I like them. Though sometimes they tend to flake out (javascript debugger blowing over breakpoints until restart...).
I'll give the new firebug a try.
Happily, memory profiling tools designed for use by web devs are being actively worked on.
[1] https://addons.mozilla.org/en-US/firefox/addon/fx-statistics...
See http://fitzgeraldnick.com/weblog/54/ for some implementation details.
There are just a number of really small issues other than those that when you add them up, make the dev toolbar a lot less useful than Chrome. That said, I like Firefox the browser much better than Chrome.
Starting in Firefox 31, the console will display a full stack trace for errors
https://developer.mozilla.org/en-US/docs/Tools/Web_Console
If you're using nightly you already have had a lot of features like this for a while.
I find the dev tools in nightly a lot more useful than those in chrome and I prefer the way the dev tools are layed out in nightly. I also like the responsive design view, GCLI, and the eyedropper.
Mobile development with Firefox is a pain compared to Chrome.
https://support.mozilla.org/en-US/kb/profile-manager-create-...
This way you can open as many firefox as you want.
(Edited for tone)
The thing I miss the most is the inline display of AJAX call responses, and being able to write/run multi-line snippets of JavaScript (without ctrl+enter).
Somewhat interestingly, Firefox built their entire add-on architecture because Joe Hewitt wanted dev tools (for debugging the actual browser moreso than websites), and Firebug was split off from Firefox and made into an add-on. A decade later, this has reversed and every major browser now ships with integrated dev tools.
http://i.imgur.com/W9Z5jBJ.png
https://developer.chrome.com/devtools/docs/authoring-develop...
Probably not 100% what you wanted, but they're really handy for sketching out code fragments.
https://developer.mozilla.org/en-US/docs/Tools/Scratchpad
Much of the new JS that I write these days starts as a scratchpad that I evolve over many iterations, right in the browser.
If I understood correctly, you can have this on Chrome. In Chrome JS Console, do a right click in an empty space, and select "Log XMLHTTPRequests" (or it was something similar).
To see the actual response, you have to click the URL, which takes you to the Network panel. Then you have to find the request on the Network panel (no clue why it doesn't deep link to the correct tab), then click Response.
I read that Firebug 2 now uses the newer JSDBG2 API of recent Firefox, so there should be no performance problems as there were with Firebug 1.x in recent Firefox versions.
It looks like a variant of Open Sans, if anyone would point me to it, I can fix it.
Look for firebugBig.png and firebugSmall.svg. I _think_ those are the files.
In general, in the open source landscape, people work on whatever they want to work on, not on what somebody promises.
It wasn't ready in time to coincide with Firefox 30 (which removed our default debugger interface, so our release had to go out).
You can star the issue to get updated on progress.
Entering safe mode, uninstalling the existing version and attempting to close all tabs related to Firebug seemed to fix the problem.
So you may want to try removing your existing Firebug before installing.
I'd consider dropping Chrome for this feature, as Chrome broke pretty printing in some cases in a recent update.
Can I inspect Websockets with Firebug? Or maybe newer Firefox versions ?
With the newer debugging interface it seems like firebug can work and the browser can be fast.
I prefer Firebug over other dev tools but it is useless without this feature.