Dynamic css styles are not editable in chrome dev tools
Reported by freshene...@gmail.com, Jun 23 2014
Jun 23 2014,
Looks like this is reporting the same problem: https://code.google.com/p/chromium/issues/detail?id=109063&q=dynamic%20css%20styles&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified
Jun 24 2014,
Jun 24 2014,
Andrey, please dupe against the appropriate issue.
Feb 16 2015,
What's the status on this? The other issue was marked "won't fix" for a reason unrelated to my problem.
Feb 28 2015,
I was previously able to work around this by setting element.style at the top of the style editing panel - but now not even that works. Is anyone gonna take a look at this or what?
Mar 1 2015,
UserAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.115 Safari/537.36" I was able to replicate this bug as well on OSX. I called the insertRule method on a style sheet and the style inspector in the dev tools became unresponsive. See capture: http://i.imgur.com/1cyLPSY.gifv Looks like it's back to modifying the style attributes on elements.
May 28 2015,
This is a huge problem for my team - is someone going to investigate this?
May 28 2015,
Nope, it is not currently being worked on. Since the styles are built using CSSOM, they don't have underlying text representation and that makes DevTools struggle with it. The workaround is whenever you want to change this color:red to say color:green, you should copy-paste it into element.style and edit it there. You anyways can't persist the changes you've made in case of CSSOM-built styles. Another workaround would be to generate stylesheet text directly instead of doing insertRule and appending //# sourceURL to it. That would make it a valid editable stylesheet.
Jul 25 2015,
@pfeld - element.style doesn't even always work. Sometimes when I put something in element.style, it just erases itself. Its very maddening behavior, but it means that your workaround doesn't always work, and therefore makes fixing this bug (or at least the element.style bug) more urgent. The only workaround i've found to work in this case is to create a style attribute on the html element and put in css. Super inconvenient. Might just go back to firefox..
Jul 27 2015,
@Fresheneesz: what's your chrome version? what's the concrete scenario? I just fixed CSS interop in a separate change and Canary should have it in. Could you give it a try?
Jul 28 2015,
Nov 13 2015,
We don't have any plans to support editing of CSSOM-based rules in DevTools.
Sign in to add a comment