6 ms·

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 day

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.

Siecje 7y ago
I like Edit and resend in the Network tab. I don't know how to do that in Chromium.
mushufasa 7y ago
I think Firefox is better in some areas, especially their CSS grid viewer. https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts 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/WebReplay https://developer.mozilla.org/en-US/docs/Mozilla/Projects/We...
sergiosgc 7y ago
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.
- digitarald 7y ago
  DevTools member here. As this is something we are chipping away on, are there any specific places where the UI throws you off?
  - sergiosgc 7y ago
    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.
yingw787 7y ago
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.
- splatcollision 7y ago
  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."
  - yingw787 7y ago
    Me and my not reading things. Thanks for the link!
- DangerousPie 7y ago
  From the 72.0 changelog: > Firefox now supports simulation of meta viewport in Responsive Design Mode.
leesalminen 7y ago
I heard FF recently added WebSocket support to their dev tools (being able to see payloads). Been meaning to give it another try.
- JshWright 7y ago
  I use that feature regularly, and it works very well.
makepanic 7y ago
Sadly, the performance inspector is still pretty useless compared to what Chromium is offering.
- leeoniya 7y ago
  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_survey_how_can_devtools_support_you/fbez5c0/ 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.
  - digitarald 7y ago
    Thanks again for that discussion, it already spawned some follow up.
- Moru 7y ago
  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...
- omaranto 7y ago
  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.
  - folkrav 7y ago
    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.
splatcollision 7y ago
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!
- Waterluvian 7y ago
  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.
  - kossae 7y ago
    Yep, I believe that was a relatively recent addition actually. They're making great progress on the dev tools side of things.
towndrunk 7y ago
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 https://support.google.com/chrome/thread/22882968?hl=en
- gboss 7y ago
  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.
SCdF 7y ago
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.
z3t4 7y ago
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.
- digitarald 7y ago
  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?
  - z3t4 7y ago
    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.
Semaphor 7y ago
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.
alwillis 7y ago
I’ve always preferred Firefox’s dev tools compared to Chrome’s. Really like the ability to outline flexbox and grid elements.
lysp 7y ago
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).

Siecje 7y ago

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

mushufasa 7y ago

I think Firefox is better in some areas, especially their CSS grid viewer. https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts 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/WebReplay https://developer.mozilla.org/en-US/docs/Mozilla/Projects/We...

sergiosgc 7y ago

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.

digitarald 7y ago
DevTools member here. As this is something we are chipping away on, are there any specific places where the UI throws you off?
- sergiosgc 7y ago
  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.

yingw787 7y ago

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.

splatcollision 7y ago
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."
- yingw787 7y ago
  Me and my not reading things. Thanks for the link!
DangerousPie 7y ago
From the 72.0 changelog: > Firefox now supports simulation of meta viewport in Responsive Design Mode.

leesalminen 7y ago

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

JshWright 7y ago
I use that feature regularly, and it works very well.

makepanic 7y ago

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

leeoniya 7y ago
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_survey_how_can_devtools_support_you/fbez5c0/ 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.
- digitarald 7y ago
  Thanks again for that discussion, it already spawned some follow up.
Moru 7y ago
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...
omaranto 7y ago
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.
- folkrav 7y ago
  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.

splatcollision 7y ago

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!

Waterluvian 7y ago
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.
- kossae 7y ago
  Yep, I believe that was a relatively recent addition actually. They're making great progress on the dev tools side of things.

towndrunk 7y ago

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 https://support.google.com/chrome/thread/22882968?hl=en

gboss 7y ago
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.

SCdF 7y ago

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.

z3t4 7y ago

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.

digitarald 7y ago
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?
- z3t4 7y ago
  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.

Semaphor 7y ago

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.

alwillis 7y ago

I’ve always preferred Firefox’s dev tools compared to Chrome’s. Really like the ability to outline flexbox and grid elements.

lysp 7y ago

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