Firefox Developer Edition (Or, What's you browser?)

Anyone using Firefox’s “Developer Edition”? I’m using it right now, and other than it looking pretty cool, I’m not sure what it offers over “vanilla” Firefox. I’ve been through the videos on the product page, but I don’t really see anything that’s not available in standard Firefox.

I’ve been using Chrome for the past few years after having switched from Firefox. I’ve tried Firefox again recently and really liked the developer tools, but something that I can’t quite remember right now caused me to switch back to Chrome.

Well, after running across this article today on Gizmodo I’ve decided to switch back to Firefox - not so much because of the article, but mostly because I like to switch things up every now and then, I’d like to start using more open source software, and did I mention that I really like the Firefox dev tools. :smile:

I considered giving Safari 8 a chance for a week. I’m pretty invested in the Apple ecosystem (ie, I’ve got a mac, an iPad and an iPhone) so the tab syncing was really tempting, but the lack of favicons in the tabs combined with the dev tools not being quite as robust (IMO) squashed that idea almost immediately.

Not sure yet which flavor of Firefox I’m going to use, but I’m looking forward to giving Firefox a nice run. It’s really come a long way.

Is anyone here using Firefox as their daily driver, or the Developer Edition?

I’ve used the “Developer Edition”, but it’s not good enough to steer me away from Chrome’s dev tools.

When I switch my development computer over to Ubuntu I tried to live with Firefox, but I couldn’t do it! :stuck_out_tongue:

Never even heard of this before. As far as differences with Vanilla Firefox, all I spot is this:

Inspect and debug your app across any browser or device with Valence — a powerful, pre-installed extension that you’ll only find in Firefox Developer Edition.

I wonder how in-depth that actually goes? Is it just user-agent spoofing and dimensions? Or an actual rendering engine simulator?

Besides that, can’t think of any reason to switch from using Chrome Dev Tools. There are so many little things missing compared with Firefox’s that I can’t take this very seriously.

Actually, I use both of them, and don’t really have a preference. But I’ve noticed that Firefox is faster and more stable than Chrome when there are many tabs open, and I can have more than 20 tabs open in a single session

Hey, I’m curious - what sorts of things do you find are missing from Friefox dev tools? Personally I prefer the Firefox tools for CSS. I can’t really give a definitive why, I just like the tools better.

On the other hand, I have heard people say that they prefer Chrome’s tools for working with JavaScript, but I’m not deep enough into JavaScript yet to really see any differences.

It seems when there’s some sort of responsive breakpoint, Firefox doesn’t specify that in the CSS area when the breakpoint CSS is active. You’re just supposed to guess. But maybe I’m missing something.

Also, I don’t like how it displays the “live” source code, like inline styles. Instead of saying something like <whatever style="display:none"> it marks it as an “element” style to the right. The way Chrome does it helps me better visualize what exactly is going on in the DOM. But maybe that’s more of a personal preference type thing. The responsive CSS is inexcusable though, unless again, I’m just missing something.

I’m sure there are other things too. But Chrome just generally seems more complete to me.

Same here, I gave Firefox a go couple of times already, but Chrome is irreplacable.

I really got used to it’s look and feel, and as you have already mentioned, dom is somehow better represented in Chrome’s inspector.

The only thing I like in Firefox and Chrome (I think) does not do the same is Style Editor. I love how you can write in it just like you would in editor. In Chrome I use Custom CSS extension for that.

Ah, that’s a nice tip. I was wondering an easier way of doing that.

This is the exact extension I use:

It also saves any styles you write to local storage for that particular url, which can be handy.

EDIT: Just a note, in rare cases, you might experience styling problems with the extension. What I mean by that is, the extension works by inserting textarea (in which you write your css) directly into the DOM, so if on some website textareas have very specific rules (or !important is used), it might mess up the look of said textarea. It rarely happens though.

1 Like

Good stuff guys! Leland, I think you’re right about the break point display, this is not included in Firefox, unless I’m missing something too.

its hard to top chrome for its chrome developer tools. but while im huge fan of it a few months ago i started to fiddle with firefox’s default developer tools and I think it by itself is pretty dope. it was actually ahead in certain aspects against chrome.

It was only recent that by default chrome dev tools had the device mode made as part of the default chrome installation(i used to only see it in canary). Firefox had their responsive design view way way earlier see what im talking about here screenshot. firefox developer tools also has built in font sniffer which is a lot of help compared to chrome where you need an extension for that. the 3d view in firefox is also great cause it offers a huge help especially if you have z-index predicaments as well as it gives a visual benchmark of the nesting of your elements. To top it off with the many built in tools in firefox, it manages to use significantly less RAM compared to chrome’s developer tools.

thats why i was really happy when firefox released their developer version. because that to be honest what caught my eye was how dope was that color scheme.

my main petpeeves on chrome is how bad it handles multitab browsing and extensions even for just casual use and relying on third party extensions is not necessarily the best solution for it.

chrome developer tools vs firefox developer tools. id say we can use both but right now im beginning to be more attached to firefox’s because using IDE it handles usage of RAM a lot better

i just discovered this extension on chrome
it called css dig it helps you dig through your css more extensively


I love the screen shot button in the Firefox responsive view, so incredibly handy. The animation tools are also pretty cool.


What do you mean by this exactly? If I have a default style, AND a media query at (say) 600px on top of that, my inspector shows the CSS for the default, and it also shows that the additional style is due to “styles.css: 671 @media all and min-width(600px)”. Is that what you meant?

Mark, that’s the way that I took it.

Her’s what I have in Chrome -

vs. the same in Firefox -

You’re seeing the mq’s in Firefox?

Yep, this is what I mean. I just don’t see the “styles.css: 671 @media all and min-width(600px)” like you describe.

Yup, I totally see it in my Firefox:

Your screenshots actually gave me the idea – Macs, right? I’m on Windows, perhaps that’s the difference.
I tried it on my Mac myself and indeed I don’t see the media query. But I also don’t see the darker backgrounds you have in your inspector panel, which confuses me a bit.

I’m on a mac. Also, I’m using the Firefox “Developers Edition”, which uses a dark theme for the browser and for the dev tools. You can enable the dark theme for dev tools in normal Firefox in the dev tools settings panel.

For Chrome, I’m using the Zero Dark Matrix dev tools theme, by Maurice Cruz. I prefer dark themes on the dev tools, it’s much easier on my eyes.

That makes it even weirder, that of all versions, the Developer Edition doesn’t show the media queries!

Hey Mark, what’s the version of Firefox that does show you the MQ’s?

Okay, the media query thing in Firefox is a bug. :wink:

It’s actually a regression. The mq info used to be there, in FF 34, but disappeared after 35.

It looks like this is being worked on now. There’s a number of open tickets, here’s the active one.