Hacker News Reader

Comment by oneeyedpigeon | Hacker News Reader

Are you a devtools user? How do the Firefox ones compare? I speak as someone who originally switched to Chrome (having been a Firefox user since the Phoenix days!) specifically for the devtools — it's pretty much the biggest factor in my browser choice.

View on HN

You get used to it - UI is slightly different in some areas, but it lacks for no major features and performance is good, like firefox in general.

I've found it's extremely valuable to be developing sites in Firefox using the dev tools simply to help catch issues that the rest of the team ignores as they're all stuck on Chrome. Fights monocultures by default!

I remember Firefox being seriously lacking in some WebSocket dev tools that I needed. But I checked again and they're there. So it seems like they are actively improving the dev tools.

Yep, I believe that was a relatively recent addition actually. They're making great progress on the dev tools side of things.

I think Firefox is better in some areas, especially their CSS grid viewer. https://developer.mozilla.org/en-US/docs/Tools/Page_Inspecto... I'm also keen to checkout the new Replay feature. https://developer.mozilla.org/en-US/docs/Mozilla/Projects/We...

Better in some aspects, worse in others, the interface is different enough to create a bit of a transition barrier.

You won't be worse off, it isn't a big effort to get used to FF devtools, but you must accept a learning curve if you want to switch.

DevTools member here. As this is something we are chipping away on, are there any specific places where the UI throws you off?

Sorry, I'm not that useful for your question. My experience is from the reverse switch. I'm used to Firefox (it's my daily driver) and had to get acquainted to Chrome.

I had to get used to Chrome devtools because javascript debugging is a lot better there. For completeness sake, CSS debugging is much better in Firefox. In time, I think both will converge.

Sadly, the performance inspector is still pretty useless compared to what Chromium is offering.

this is the biggest blocker for me. i still use ff as my main browser, but i cannot develop with it, so i have to spend a lot of my time in chrome.

we had a recent dialog about it here:

https://old.reddit.com/r/javascript/comments/ecyhmr/mozilla_...

there's some cool stuff in the works but it doesnt sound like there's a plan to internalize the work into devtools but to keep it as a web app and rely on a serviceworker for "localness" - not great, imo.

Thanks again for that discussion, it already spawned some follow up.

Sadly noone cares what the performance inspector says. Newspapers just get slower and slower. Our local newspaper takes 15 seconds to first visible paint and another 5-10 seconds to usefulness on my phone...

My impression as a web user is that if any devs actually use the performance inspector it's just to learn their site is slow and then not do anything about it.

Your devs might develop perfectly well behaving stuff just to see it get totally obliterated by loading 3 external tracking scripts through Tag Manager, three different pixels and 7 external contact form/chat bots/newsletter popover scripts from their CRM/ad platform/whatever crap marketing wants.

They're working on a new one that seems pretty cool, although you currently have to install it as an Add-on to use it: https://profiler.firefox.com/

I’m a Firefox ddg user, and I would recommend Chrome for devtools still. As of last month, Firefox devtools didnt even recognize meta viewport tags which caused UI discrepancies between testing and production. Chrome devtools does have it.

That being said, I still switched back to Firefox and ddg after I close devtools.

Interesting then that this release enables meta viewport support in responsive design mode - from the link: "Firefox now supports simulation of meta viewport in Responsive Design Mode."

Me and my not reading things. Thanks for the link!

From the 72.0 changelog:

> Firefox now supports simulation of meta viewport in Responsive Design Mode.

In Chrome 79 they broke or removed hovering over variables. They say it will be fixed in Chrome 80. https://support.google.com/chrome/thread/22882968?hl=en

This has been a huge Pita, for my team. Good news is it has gotten some of them to switch to Firefox for debugging. It really is awful that bug slipped through.

I use Firefox as my default browser. But the dev tools is too slow, apparently someone thought it was a good idea to rewrite it in React, causing it to lag even on a few thousand console log messages on a fairly powerful workstation. And there is no search functionality, only filter. So I've started to prefix all my debug messages with whatever I'm working on just so that the logs can be found in the Firefox dev tools console. One good feature though is that you can filter on type of messages, like only show error messages, or warnings. Which is very annoying in Chrome dev tools where it will tell you there is an error, but you can't click on it, so there is no way to see the actual error.

DevTools member here. We have been working on performance over the past release – is there anything specific that you can point out as being slower for us to focus on?

I have not yet tested v72, I'm on v71. The Chrome dev tools Console feels (not measured) about 100x faster then the Console in Firefox. Even Chromium Console can be limiting though. Yeh, I probably should not use console.logs for debugging, but it's much faster forkflow then firing up the debugger. Even with the lag. With the Chromium Console the lag is not that bad, and it has a search function. Both console's have a bunch of cool features, like being able to inspect DOM nodes, explore objects, etc. Witch I think might be a reason for the lag. Most of the time I just want to search the logs to find out what happened. An idea is if you can just get the plain text from the console.logs somehow. In chromium all console.logs get sent to stdout, so I can pipe the logs to a file, then use any editor to search it. But I prefer using the dev tools.

Maybe make a perf switch in the console, which dumps the text without formatting or other features. Something that can handle one million lines of logs and search in it. Being able to search the logs is critical. Filtering doesn't work as I need to see the surrounding logs, what happened after. I don't need to see all one million lines at the same time though, it can be buffered to only show 100 lines above it and 100 lines below it. Chromium has such an optimization. But search is a bit slow.

I'm on v72 now and the Dev tools console feels even slower. It now freezes with just a few thousand log messages.

I also have to keep clicking the clear button to prevent the page from freezing if the dev tools console is open when loading the page.

I’ve always preferred Firefox’s dev tools compared to Chrome’s.

Really like the ability to outline flexbox and grid elements.

I am not OP but I'm a FF user. I haven't got around to learning FF's dev tools and still need Chrome(ium) to test that platform for compat anyway. So I just still use Chrome dev tools (which also work for NodeJS instances) but use FF for actual browsing.

I like Edit and resend in the Network tab. I don't know how to do that in Chromium.

Firefox has a great feature where live css changes are placed into a "diff" panel.

Rather than having to remember all the small changes you made, you can just copy and paste the script out (or even just view what you changed).

When I’m using the Chrome tools, I miss some FF features, when I use the FF tools, I miss some Chrome features.

I generally like the FF tools better nowadays, but Chrome’s are a bit faster.

I heard FF recently added WebSocket support to their dev tools (being able to see payloads). Been meaning to give it another try.

I use that feature regularly, and it works very well.

Reply on news.ycombinator.com