I've always found the Firefox devtools be a little less 'quality of life' like. Just my opinion. Haven't used it in a few years. But for me, I just live in devtools, you know. As most of you here, probably. Opinions?
In my opinion this is one of those "use what you're used to" things. Firefox's dev tools are amazing for me and Chrome's seem difficult to use. They both have very similar features, but the UI of the dev tools is different enough that it is difficult to regularly switch between the two.
I still haven't figured out how to collect and view profiling information in when disconnected from the internet, ever since they integerated it with profiler.firefox.com.
Fair enough. I just started the latest version and must say, it has really improved. Quality of life probably means I have to look a bit more for where stuff is. And hey, they might have some stuff that Chrome doesn't have, right?
So my first one is 'Chrome devtools has a little button to instantly switch to mobile view, where you simulate (more or less) the viewport of various mobile devices'. I don't see this in Firefox.
> So my first one is 'Chrome devtools has a little button to instantly switch to mobile view, where you simulate (more or less) the viewport of various mobile devices'. I don't see this in Firefox.
The icon is slightly different and is in a different place (same vicinity though, somewhere on the top-right), but the "Responsive Design Mode" is equivalent to Chrome's "Device Toolbar". See https://firefox-source-docs.mozilla.org/devtools-user/respon...
It's called Responsive Design Mode, and it's the third button from the the right on the top bar. Even better, use the shortcut Ctrl-Shift-M, which works even when devtools is closed.
...Really? It's the icon on the top-right of the Fx dev tools menu that looks like a mobile device. Also, both Chrome and Fx use the same keyboard shortcut to activate mobile view (Ctrl + Shift + M)
The debugger and the source map loading are noticably slower. The DOM browser is slower as well and I get things shifting a few pixels up/down randomly in there.
On the bright side, it keeps a running diff of the css changes you make. Super useful when you're trying to fix some stupid layout thing, get it working and then forget all the changes you made.
Because their examples are always "it's not exactly the same as Chrome devtools, it has all of the same features but they aren't a pixel perfect replication!".
I prefer the Firefox dev tools, except for one thing: Chrome's websocket debugger is better. Firefox seems to miss some websocket messages and sometimes they don't show up at all for me.
The CSS dev tools for things like grids and flex in the Firefox dev tools are much better than Chrome's. The debugger is a tad slower if you need to prettify obfuscated Javascript but both do a good enough job at it.
I also prefer the theme Firefox applies to the dev tools, they feel more native and less like something slapped onto the browser.