I did the yak shaving and I am glad I did. I only needed to inject my own CA into Firefox/Chrome and my self signed certificates now works like any other, no fiddling with about:config, no websocket mismatches or app complaining of not running on https. I can even curl and all that since I added this CA to my machine.
edit: I only self sign localhost subdomains (app1.localhost, www.site1.localhost, etc.) and each project has its own self signed certificate (by the same CA) with needed domains (usually traefik.localhost, www.site.localhost, api.site.localhost, etc.). localhost becomes basically my presonnal tld.
And now any security mishap with your CA compromises your entire browser because you can’t just trust a custom root certificate for “*.my stuff.com” without trusting for mybank.com
Firefox appears to support[0] name constraints[1] in CA certificates. It even appears to have code that supports adding further constraints to the root certificates after they were imported, but that doesn't seem to be exposed anywhere in the UI.
If you're that much of a target, you'll find your devices hacked soon enough regardless.
I can't speak about your threat model, but "exfiltrating my private CA keys to phish my browser" isn't really something I worry about in practice.
For those still checking certificate validity, Firefox will warn you that the certificate used is not in the system database when you click the little lock in the address bar.
That said, I'd absolutely love a system where I could restrict my private CA to certain domains.
You can use name constraints on the CA, but they are a bit hit and miss when it comes to client support.
For a local CA with the CA only on one machine you're perhaps OK if you are careful, but once you share the server with a couple of collegues you are potentially into a world of hurt.
On OSX you can choose "Always Trust" or "Never Trust" for various purposes (code signing, SSL, EAP, etc).
Why can't I have "Ask first time", or "Trust only for specific domains"
Same with built in ones. That "Hong Kong Post" root CA raises some eyebrows with me, I'd love to set that to "Ask first time" on it.
I think you can mitigate this by deleting your CA key after signing a certificate for localhost. Sure, that means you can't sign new certificates, but that's not a big deal as you can just replace the CA on your desktop when the time comes.
I do not recommend using the same browser for everyday web browsing and for development. For one thing, you don't want an adblocker or other content altering plugins on your dev browser.
I like Firefox with Tree Style Tabs and an adblocker for everyday browsing, and some Chrome derivative with no addons other than Xdebug for development. Lately I've been using the Responsively browser for dev, especially if I need to do anything mobile.
edit: I only self sign localhost subdomains (app1.localhost, www.site1.localhost, etc.) and each project has its own self signed certificate (by the same CA) with needed domains (usually traefik.localhost, www.site.localhost, api.site.localhost, etc.). localhost becomes basically my presonnal tld.