Firebug 2.0

https://blog.getfirebug.com/2014/06/10/firebug-2-0/

by sroussey • 12 years ago

327 120 12 years ago

blog.getfirebug.com

ep103• 12 years ago

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

ben3362• 12 years ago

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.

tszming• 12 years ago

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

lomnakkus• 12 years ago

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.

_karthikj3• 12 years ago

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

andrethegiant• 12 years ago

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?

acomjean2• 12 years ago

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)

rhizome2• 12 years ago

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

It has a platform limitation.

_puk• 12 years ago

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?

darkhorn2• 12 years ago

It doesn't run on PCs.

iSnow• 12 years ago

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.

EdSharkey3• 12 years ago

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.

cromwellian• 12 years ago

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.

EdSharkey3• 12 years ago

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.

JoshTriplett2• 12 years ago

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

Viper007Bond• 12 years ago

Same here.

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

arenaninja• 12 years ago

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

acomjean2• 12 years ago

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.

eeperson• 12 years ago

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.

rsl7• 12 years ago

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.

Kiro• 12 years ago

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

21echoes• 12 years ago

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

yeukhon2• 12 years ago

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.

rplnt• 12 years ago

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.

scrabble• 12 years ago

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

toxican• 12 years ago

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

natmaster• 12 years ago

But does it not slow everything down horrendously?

instakill• 12 years ago

It does for me. I have it installed but disabled until I really need to use it.

riquito• 12 years ago

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.

Sindrome• 12 years ago

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.

jbeja2• 12 years ago

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

rhizome2• 12 years ago

Rejection for bad culture fit.

ChrisLTD• 12 years ago

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

smrtinsert• 12 years ago

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.

justinsteele• 12 years ago

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?"

chowells• 12 years ago

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)

gkoberger2• 12 years ago

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.

sroussey5• 12 years ago

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

RussianCow• 12 years ago

I just played around with it, and 2.0 is indeed much faster. Seems on par with other dev tools now.

dfc2• 12 years ago

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.

joewalker• 12 years ago

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

u124556• 12 years ago

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

anykey• 12 years ago

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.

mnemonik2• 12 years ago

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.

batuhanicoz• 12 years ago

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

interurban• 12 years ago

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

gkoberger2• 12 years ago

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.

kyriakos2• 12 years ago

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.

mistermann• 12 years ago

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.

frik2• 12 years ago

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.

snarfy• 12 years ago

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.

sroussey5• 12 years ago

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

nodweber• 12 years ago

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.

ArtDev2• 12 years ago

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

esalman• 12 years ago

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

sroussey5• 12 years ago

What do you mean?

conradfr• 12 years ago

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

tambourine_man3• 12 years ago

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.

sroussey5• 12 years ago

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

tambourine_man3• 12 years ago

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

ibarrajo• 12 years ago

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

pbreit• 12 years ago

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

perlgeek• 12 years ago

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.

skybrian• 12 years ago

Any plans for sourcemap support?

sroussey5• 12 years ago

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.

josteink• 12 years ago

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.

dc_ploy• 12 years ago

Still no SASS integration?

wnevets• 12 years ago

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.

mmastrac• 12 years ago

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.

lampe3• 12 years ago

Maybe someone can help.

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

razorshine• 12 years ago

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?

doque• 12 years ago

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.

n0body• 12 years ago

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

schobesam• 12 years ago

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.

KNoureen• 12 years ago

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.

_karthikj3• 12 years ago

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.

stuaxo• 12 years ago

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.

_karthikj3• 12 years ago

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.

ArtDev2• 12 years ago

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.

dillon_easyeda• 12 years ago

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

frik2• 12 years ago

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)

psilva261• 12 years ago

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

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

Firebug 2.0

Related Stories