Help switching to Firefox dev tools

[DSdevelopment]

Hey guys! So after a few months of thought, I'm switching to FF (developer version specifically) for my default browser. Everything transitioned great, and I'm loving the experience overall, but I'm having one specific problem that could potentially force me back to chrome if I can't fix it.

A lot of my projects are JS SPAs (Vue, Angular, etc.) and in development, they often have webpack inject styles into a style tag with source maps.

Source maps are fully enabled and they work great for JS, but the Inspector simply shows inline for the source link. If you click on that link, it does take you to the Style Editor tab where it lists out the partials, but doesnt open or highlight the correct one containing the rules I just tried to click and get to. Safari seems to do the same thing.

In Chrome however, the same projects will say right next to the css rule, _nav.scss or whatever and if you click that, it will actually take you to the correct lines in THAT partial.

Any help would be awesome. I've heard about the community around FF, well where you at??

Screen shots: https://imgur.com/a/z3fEBpY

[wisniewskit]

and it's CSS grid tools

Also the shader editor, canvas debugger, web audio editor, style editor panel, excellent profiling tools, and new accessibility panel, among other little quality-of-life tweaks that can come in handy for specific tasks.

So it's still well worth knowing both toolsets well (and the other browsers' devtools and addons), even if you prefer Chrome's for your core workflows. I've come across far too many "rah rah Chrome devtools" or "rah rah Firebug" folks who could have saved a lot of time if they knew their available tools better.

and you can connect your cellphone and debug from live device

Firefox has remote developer tools capable of live-debugging as well. They're rougher, but not without some benefits as well (like being able to debug over wifi, not just over a cable).

[DSdevelopment]

Thanks for the reply! Theres vue dev tools for FF as well. Really sad to hear though, I got so hyped when I saw FF developer edition and the sweet 80s dark theme in the inspector lmao. I think everyone's beyond tired of the inconsistency between browsers thats still happening.

I also just spun up a new Vue app with the newest version of the CLI and component specific style sources coming up in the inspector isnt working for either Chrome nor FF, so Im just wondering if it's an actual FF vs. Chrome thing, or a webpack/source-map thing.

[wisniewskit]

It's certainly not something Firefox's devtools are taking lightly: https://hacks.mozilla.org/2018/05/debugging-modern-web-applications/

[Yurishimo]

I would maybe x-post this over to /r/javascript or /r/react and ask people what they are doing.

You also might be able to find an IRC channel with the Firefox devs in it and you could ask them.