Firebug 2.0 | Hacker News Reader

Firebug 2.0

blog.getfirebug.com

327 pointssroussey120 comments

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 just played around with it, and 2.0 is indeed much faster. Seems on par with other dev tools now.

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

Nice. I am running the aurora release on this machine so it is still on the left. I cant wait to have button sanity. Thank you for your efforts.

http://i.imgur.com/W9Z5jBJ.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.

Are you on a mac? I just tried and the close button is on the right.

In that case, it's still backwards, because the normal close button on OSX is on the left.

Re: the multi-line JS stuff in Chrome, there's snippets!

https://developer.chrome.com/devtools/docs/authoring-develop...

Probably not 100% what you wanted, but they're really handy for sketching out code fragments.

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 ;)

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.

> 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).

You can enable XHR logging in the settings panel as well.

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.

Alas, no. Common Lisp has this, and its very nice. http://www.lispworks.com/documentation/HyperSpec/Body/m_trac...

Have a look at this Q&A: http://stackoverflow.com/questions/5226550/can-i-override-th...

Firebug 1.x (only with activated "Scripts" tab) is only slow in newer version of Firefox. http://www.reddit.com/r/firefox/comments/1f4u9x/firebug_make...

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.

I used to use Firebug extensively. These days, the built-in Firefox developer tools seem to cover everything I need.

Same here.

Can any current Firebug users comment as to what they like about it over the built-in tools?

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...).

I'll give the new firebug a try.

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.

I find the Firefox dev tools very inferior to Chrome dev tools, missing a lot of "must have" features.

such as? not disagreeing, just wondering what you consider "must have" features that Firefox currently lacks.

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.

Yes, extensively; try about:memory for a few of them.

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].

[1] https://addons.mozilla.org/en-US/firefox/addon/fx-statistics...

I'm working on these tools now, finishing up initial platform work, should start on business logic/UI fairly soon here and get a version 0 out soon.

See http://fitzgeraldnick.com/weblog/54/ for some implementation details.

IIRC Firefox builtins don't have a cookie editor.

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.

> stack traces

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.

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.

Mobile tools, especially user agent spoofing per tab and presets for different devices. And disabling of all caches when the developer tools are open.

Mobile development with Firefox is a pain compared to Chrome.

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.

If you are using Firefox for testing front-end, I suggest using Nightly as a copy for dev tool. You will get the latest goodies.

Easy way to install them both?

I hope this can help you: http://forums.mozillazine.org/viewtopic.php?f=23&t=2821799&s...

Just download and then use profile manager to open them.

https://support.mozilla.org/en-US/kb/profile-manager-create-...

This way you can open as many firefox as you want.

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.

Same here, but this feature list looks really nice. I might go back to Firebug.

It covers everything, but I prefer the UI of Firebug over Firefox and Chrome's built-in tools. Pretty pumped to try this out.

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.

So what if you are the black sheep of the shed?

Rejection for bad culture fit.

I thought that was only applicable if you weren't young, white, and male?

<strainedmetaphor>Gotta get into the shed before you can be the black sheep.</strainedmetaphor>

I thought that shed was for storing bikes, not sheep.

its like being on yahoo mail when gmail happened or having a new ibm when mac pros happened or doing php when ruby happened, or.. you get the drift.

So everyone like to be on the loop for the sake of being in the loop and not for practical reasons, that is golden!

Most developers I've met have both installed, and wouldn't think twice if you said "I'm better with Firebug, do you mind if we switch browsers?"

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.

(Edited for tone)

Video walk through of what is new: https://www.youtube.com/watch?v=LtgLX5vZZSI

Still the best developer toolset, on any browser. Unarguably once its combined with FF native tools, and the webdevtoolbar.

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.

Chrome still does not support multiline JS console (you need to shift-enter every single lines)

See: https://code.google.com/p/chromium/issues/detail?id=35487

That is useful, but doesn't really seem to cover the original comment's assertion that Firebug is still "inarguably the best"

This seems more like a different preference than a bug.

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.

Chrome dev tools has that too these days. Copy as curl.

these days == for years

Chrome and Firefox both have that.

ff 31: https://developer.mozilla.org/en-US/docs/Tools/Network_Monit...

Chrome dev tools lacks in the DOM view of firebug. Firebug makes it easy to search and identify all the DOM objects.

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?

publicity.

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)

Can someone explain what Safari's Web Inspector is lacking?

It has a platform limitation.

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.

Does Safari support source-maps yet?

Yes, Safari supports source maps (has for a while).

It doesn't run on PCs.

Which is a shame. Apple should bring back Windows Safari.

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.

Firebug 2 finally supports prettified JSON preview of XHR that start "while(1);" and "for(;;);" that is commonly used (also by G+ and FB). Thanks! I prefer Firebug over the other bundled DevTools in FF, Chrome and IE.

@Firebug 2 devs: Please make the JSON preview table-rows-width adjustable - the JSON "key" row-width is too wide!

@Firefox DevTools devs: please finally fix support your JSON preview (see above)

The first thing I see is the glaring lack of anti-alias on the Firebug logo.

It looks like a variant of Open Sans, if anyone would point me to it, I can fix it.

https://github.com/firebug/firebug/tree/master/extension

I don't see either the font file or the vector artwork in this distribution

https://github.com/firebug/firebug/tree/master/extension/ski...

Look for firebugBig.png and firebugSmall.svg. I _think_ those are the files.

Thanks, but that's not it. Nevermind

Haha trying to talk about .ai and .psd files with programmers is always funny :)

But does it not slow everything down horrendously?

It does for me. I have it installed but disabled until I really need to use 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.

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.

Once Firebug support Sourcemaps, I can start using it again. https://code.google.com/p/fbug/issues/detail?id=5765

I prefer Firebug over other dev tools but it is useless without this feature.

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.

Great, it seems console.log works now (it seems other extensions were making it non-effective since FF29).

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.

No one mentioned ie dev tools. I had to use them in ie 11, and I was very impressed. Firebug ftw though

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.

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.

It's indeed really fast. Also it's possible to deactivate Firefox' default "Inspect Element":

about:config -> devtools.inspector.enabled -> false

I used to use firebug religiously, however I've been using chrome's tools for the past two years and haven't felt a need to go back.

I switched from Firebug to Firefox new DevTools and I didn't have any problems, yet. maybe I'm not developing for front-end too much.

I had to do the same because of Source map support. I find Firebug more responsive and faster to use, however.

I used Firebug to debug the javascript, but nerver use it again when I use Chrome. Firefox's development tool is better than Firebug.

Isn't a promise of Firefox that the energy spent on something like Firebug could instead be utilized on the built-in dev tools?

Who would have promised that? The firefox developers? Or the firebug developers?

In general, in the open source landscape, people work on whatever they want to work on, not on what somebody promises.

Am I the only one using firebug for javafx webview debugging? java lacks a proper javascript debugger.

Maybe someone can help.

Can I inspect Websockets with Firebug? Or maybe newer Firefox versions ?

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.

Any plans for sourcemap support?

Yes: https://code.google.com/p/fbug/issues/detail?id=5765

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.

Still no SASS integration?

I wish Firebug had proper JS stack trace. I find Chrome/Webkit's implementation essential for debugging.

What do you mean?

Reply on news.ycombinator.com