CSS source map support, network performance analysis and more in Firefox DevTools | Hacker News Reader

CSS source map support, network performance analysis and more in Firefox DevTools

hacks.mozilla.org

71 pointsrnyman30 comments

The CSS transform previews are pretty impressive.

And Vim keybindings! That's going to make the scratchpad so much more useful for me

I switched from Chrome a while ago and it's been great to see the dev tools mature. They're a suitable replacement for FireBug or Chrome now, though you may miss a feature here and there.

I feel like Firefox is getting better and better with each release. Is anyone using it as the default over Chrome.

I switched from Chrome to Firefox Nightly (i.e. Firefox with Australis) a couple of months ago.

I really like it. There's no noticeable performance hit, but I'm definitely finding it more stable. My favourite recent feature addition is the ability to pin add-on shortcuts to the new Firefox menu, which I'm finding a massive improvement over using the add-on bar/ramming stuff into the same toolbar as everything else.

Always had Firefox as my default, even when it was stuck on large, slow releases and was lagging a bit behind Chrome as far as features and speed.

My reasons are pretty trivial, and I'll readily admit Chrome can be better to work with in certain dev cases, but I like being able to customize the UI. (I think the back/forward buttons belong to the right of the address bar where they're easier to reach with a mouse and I like having an RSS button, dang it.)

I just switched a month ago from Chrome to Firefox Nightly as my default browser.

Some parts of the Chrome Web Inspector still outmatch Firefox (and Safari), esp. the profiling/heap view parts. Right now I switch back to Chrome when I need this functionality. Firefox’ web inspector feels a bit faster to me overall, though.

With Firefox’ new design in the nightly and the recent speed upgrades I don’t see a technical reason to prefer one or the other in many situations and that’s a very good thing. Welcome back FF!

I switched back to Firefox for web browsing a few months ago. I had started using Chrome because Firefox used to have horrible random UI freezes on OS X which seem to be fixed now.

They're both fine in usability, but I'd rather be using Mozilla's browser than Google's or Apple's. It seems like Mozilla has better incentives than Google to improve the World Wide Web as a whole rather than just its own WWW properties.

I still use Chrome for JavaScript debugging. I'm more familiar with it and the tools are better. I expect to switch to Firefox for that when their profiler improves and when they start putting the full stack trace in the console.

Edit after actually reading the article: it looks like they have done the stack trace thing in this very release!

Does anyone know how to look at cookies? I seriously cannot find cookies in the Firefox dev tools, the new interface is so irritating and disorienting. Plus I think everyone is just trying to collectively pretend that cookies don't exist anymore.

FF Dev Tools have serious usability quirks vs FireBug that prevent me from considering it for anything but FFDT-specific functionality.

I also agree that I find FFDT unusable compared to Firebug or Chrome dev tools. I find it hard to pinpoint exactly what it is about it though.

There are lots of things, which is why it's hard to pinpoint. It's a death by thousand cut things.

The unusable console printing of objects was a big one, glad to see it's finally getting somewhat rectified.

(OTOH, Safari has taken the cake as well as the whole kitchen with the new back-asswards development tools, going from perfectly usable ones to the current utter garbage while Chrome's gets better by leaps and bounds)

(meanwhile the one bloody thing they could have, namely Xcode's awesome breakpoint actions pane, they don't integrate)

I'm guessing the browser devtools space is being subjected to the user-hostile practice of "product differentiation."

I'm sure it is, but that's not much comfort when you're forced to use that POS because it's (AFAIK) the only remote debugger for Safari/iOS, and it was previously prefectly serviceable.

I used to agree with you until Firefox 25 or so. In fact, I always tested mainly in FF (as that is my main browser) but I'd switch to chrome when I needed any sort of debugging or inspecting more complicated than reading the console.

But in the past couple revisions, I've found myself going to Chrome less and less often. Hardly ever any more with 27, and never first. Mozilla is making constant improvements and I'm quite happy with them. The debugger seems very solid to me inspector is just as good as chrome. The Chrome profiler's flame-maps are pretty awesome though.

  - open dev tools
  - click on Network tab (far right)
  - make a request (e.g., reload current page)
  - click on one of the entries in the list
  - there's now a tab for cookies on the right

There is also a work in progress to add a better interface for inspecting storage (including cookies): https://bugzilla.mozilla.org/show_bug.cgi?id=926449

Jesus christ. Thank you, though.

It's pretty much the same as Chrome. One thing I see in Firefox that I don't in Chrome, though, is the "edit and resend" feature, which lets you edit a request and resend it. It's pretty cool.

If you just want a list of cookies, I usually look at them from the preferences (Privacy -> Show Cookies) and then use the search to narrow down to the domain I'm looking at. Not quite as good as Chrome's resource browser, but it works.

Little known feature: There's also a "cookie" command in the GCLI. Shift-F2 to bring up the command line, type "help cookie".

I'm glad they're adding a call stack. I thought I just couldn't find it. Other than that, I think the current version already works really well. When this new version comes out, I don't think the competition will have any major advantages.

Really looking forward to CSS transform previews.

That said, recently I'd moved away from Firefox because the developer console stuff had gotten a little bulky and they felt sluggish. Hopefully they also get around to optimizing it for performance someday too.

Console feeling bulky? Make sure CSS > Log is disabled. If this is enabled, your page gets a reflow listener that makes it slower.

Also, consider turning off logs you do not need. We have turned off css warnings by default, and we will continue to turn off more kinds of messages by default, soon.

That looks absolutely gorgeous. For a long time i've been using Firebug to deal with code in browser, then switched to Chrome and its inspector. Now i'm very tempted to try using Firefox as my main tool again.

Great progress. I think it would be better if you replace those pie charts with bar plots. Better use of the space, much better for comparison.

CSS source maps! Been waiting for this one

There should be another blog post on hacks detailing the whole workflow in the next day or two :)

These just keep getting better and better with every release. Vim keybinds might finally be my Firebug switch.

Reply on news.ycombinator.com