The "magic" is Source Maps. Firefox supports Source Maps just fine, it's just pickier about their formats. It was supposed to be a standard and all the browsers supported it (Edge and Firefox have had support for as long as Chrome has). Chrome allowed some Source Map formats that didn't exactly follow the standards/specs, and a bunch of tools started using Chrome-only Source Maps by default accidentally because so many devs were using Chrome. If you use webpack or similar tools check the various format options for Source Maps until you find one that works in non-Chrome browsers.

How strange, this is the first I've heard of this. I've never had to touch source maps config in my webpack and it's always shown fine in Firefox. Is it just specific circumstances/specific code patterns that have source map problems in Firefox? Or is it when it's transpiling from TypeScript or JSX or something?

From what I've investigated so far, webpack likes to use the webpack:// pseudo-protocol for file references in most of its Source Map modes, including its defaults, and from what I've seen that seems to be the single biggest issue of cross-browser Source Map compatibility in the webpack ecosystem (other ecosystems have different problems). Chrome seems to be able to figure things out from the pseudo-protocol in just about all cases, but Edge and Firefox seem to be confused more often than not.

In some cases it looks like Chrome takes extra efforts to find physical files on disk from bad URLs, and in other cases Chrome does more with virtual file structures included in the same bundles (the webpack:// pseudo-URLs often point to other "sections" of the same JS bundle) creating a virtual file tree from them that looks close enough to the on-disk file tree as to seem effectively the same to many developers.

Do you know if there is a Mozilla bug for this?

Some of the Issues I've seen/sort-of-bookmarked on various webpack-related Source Map problems:

https://github.com/webpack/webpack/issues/3603 https://github.com/webpack/webpack/issues/1194

That last one does mention at least one already fixed Mozilla bug:

https://bugzilla.mozilla.org/show_bug.cgi?id=1177329

This feature (source maps) has been improving a lot over time. A year ago it was basically unusable, and today I rarely have problems jumping from console to debugger. We're even working on a way to show the original variable names in the scope inspector when paused in the debugger now.

On the other hand, Firefox's layout dev tools, like the grid and flex box inspector, are way better than doing the same task in Chrome, in my experience.

The dev tools made me stick with Chrome longer than I'd have liked, but I made the switch a few months ago and Firefox's have improved so much I'd put them on par.

Firefox also has an amazing flexbox inspector and inline breakpoints.

You could always use Chrome for dev and Firefox for the rest. The lack of ad-blocking is presumably not a problem for your sites in development, and you'll be supporting Firefox just the same!

DevTools PM here. I did write about improved source maps in Firefox a few weeks ago on hacks (https://hacks.mozilla.org/2019/05/faster-smarter-javascript-...). Hope devs try it out again, as tools evolve and improve fast.

I'm using latest stable FF release as my main dev browser. Sourcemaps are supported just fine. For my usecases, I can hardly tell the difference between Chrome devtools and FF devtools. YMMV

I'm in the same boat - I much prefer Chrome web development toolkit - the feel and everything. The solution - I use Chrome _only_ for development.

You're talking about source mapping I believe. I've only used it in Chrome but I've heard only Chrome has it as good as it has it. Honestly, it's a lifesaver if you're doing frontend stuff (and you're not one of those people who poo-poo's debuggers).

lol why on earth would someone poo poo a debugger?

There was a post recently about some CS OG who stated at some point that print statements was all you needed and using a debugger was counter-productive to your understanding of the code.

I wish that person the best of luck and hope they stay as far away from my team as possible.

Our particular web dev workflows likely differ, but I really didn't notice much difference when I switched from Chrome to Firefox with their Quantum release.