4 ms·

I like to switch from Chrome to Firefox but only thing keeping me with Chrome is its superior web development tool. One my the dev here recommends us to use Chr

I like to switch from Chrome to Firefox but only thing keeping me with Chrome is its superior web development tool. One my the dev here recommends us to use Chrome because of its better Javascript debugger - something to do with the output in the web console takes you to the corresponding Javascript line & instance where it is invoked on the web page. I am not entirely sure what it is. Whatever it is, its not in Firefox.

WorldMaker 7y ago
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.
- worble 7y ago
  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?
  - WorldMaker 7y ago
    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.
    - chris_wot 7y ago
      Do you know if there is a Mozilla bug for this?
      - WorldMaker 7y ago
        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/3603 https://github.com/webpack/webpack/issues/1194 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 https://bugzilla.mozilla.org/show_bug.cgi?id=1177329
ambicapter 7y ago
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).
- pixelrevision 7y ago
  lol why on earth would someone poo poo a debugger?
  - ambicapter 7y ago
    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.
    - JimiofEden 7y ago
      I wish that person the best of luck and hope they stay as far away from my team as possible.
icebraining 7y ago
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!
leevlad 7y ago
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
mythmon_ 7y ago
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.
redka 7y ago
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.
tvanantwerp 7y ago
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.
petepete 7y ago
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.
digitarald 7y ago
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-debugging-in-firefox/ https://hacks.mozilla.org/2019/05/faster-smarter-javascript-...). Hope devs try it out again, as tools evolve and improve fast.

WorldMaker 7y ago

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.

worble 7y ago
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?
- WorldMaker 7y ago
  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.
  - chris_wot 7y ago
    Do you know if there is a Mozilla bug for this?
    - WorldMaker 7y ago
      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/3603 https://github.com/webpack/webpack/issues/1194 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 https://bugzilla.mozilla.org/show_bug.cgi?id=1177329

ambicapter 7y ago

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

pixelrevision 7y ago
lol why on earth would someone poo poo a debugger?
- ambicapter 7y ago
  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.
  - JimiofEden 7y ago
    I wish that person the best of luck and hope they stay as far away from my team as possible.

icebraining 7y ago

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!

leevlad 7y ago

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

mythmon_ 7y ago

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.

redka 7y ago

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.

tvanantwerp 7y ago

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.

petepete 7y ago

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.

digitarald 7y ago

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-debugging-in-firefox/ https://hacks.mozilla.org/2019/05/faster-smarter-javascript-...). Hope devs try it out again, as tools evolve and improve fast.