35

Since I've implemented server side rendering and managing the styles with styled-components, Im unable to edit styles in Chrome Dev Tools. The styles in devtools become italic and theres no checkbox to turn off/on specified style.

enter image description here

It works properly in Mozilla. But why not in Chrome? Any ideas why does it happen? Thanks.

Note: It happens in production.

Emile Bergeron
  • 17,074
  • 5
  • 83
  • 129
Patrickkx
  • 1,740
  • 7
  • 31
  • 60
  • 6
    This has been driving me nuts in the newer Chromes (when I used a locked older chrome it NEVER did this stupid behavior). I have to keep full-refreshing whole pages and frameworks just so I can fiddle in the styles in devtools. So annoying. – IncredibleHat Oct 28 '19 at 18:29

2 Answers2

27

I think you're probably seeing the styles injected via "speedy mode" in production. This uses a special DOM API that Chrome DevTools currently only shows in a read-only capacity. We haven't put in an escape hatch to disable this injection method yet, but it's being considered.

When running your setup in development mode everything should be normally inspectable and editable.

probablyup
  • 7,636
  • 1
  • 27
  • 40
  • Problem that I see here with that *speedy mode* apparently, is that it doesn't respect specificity rules. And always has priority (like an inline style?), or that's simply what `JSS` makes it look like. Either way it's a bug in a mode or in `JSS`. – jayarjo Aug 19 '19 at 06:23
  • No it does respect specificity, all CSS obeys specificity regardless of injection vector. – probablyup Aug 22 '19 at 17:14
  • I mean JSS makes it look like it attaches them to a className, but in reality they are injected more like inline styles. And they take precedence over the className with the rule for the same style, specified on the same element and coming after the className injected in speedy mode (or whatever). – jayarjo Aug 23 '19 at 09:35
6

You may also want to consider Firefox, it can edit such styles as usual

xumix
  • 593
  • 7
  • 17