14

I'm looking at the elements in the hamburger menu of this site:

https://rainbowedit.com/

using Chrome devtools, and the CSS in Elements is in red italics and uneditable. What does this mean? Is there a way to make them editable?

devtools with italic css hilighted

G-Man Says 'Reinstate Monica'
  • 8,029
spongefile
  • 241

3 Answers3

10

It seems to be using some kind of JS generated CSS injected in the page. styled-components is known to do this and the styles are then read-only in the Dev tools.

Source: Impossible to edit styles in Chrome?

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.

Emile Bergeron
  • 1,021
3

This seems to happen for some styles if you reload the page with Chrome Dev Tools already open on that page. Try closing Dev Tools, reload the page, and then reopen Dev Tools and see if you can then make them editable.

SlowFamily
  • 31
1

This is happening for me in the last several builds of Chromium. Only happens when I edit a css rule on a file within an iframe, then reload the iframe. Then I see the locked italicized rule (only for the rule I edited).

I do not think "speedy mode" is in play.

I have reported the behaviour @ Chromium Bugs

Mahks
  • 121