Project: chromium Issues People Development process History Sign in
New issue
Advanced search Search tips
Issue 387952 Dynamic css styles are not editable in chrome dev tools
Starred by 7 users Reported by freshene...@gmail.com, Jun 23 2014 Back to list
Status: WontFix
Owner:
Closed: Nov 2015
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug



Sign in to add a comment
UserAgent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.131 Safari/537.36

Steps to reproduce the problem:
1. Create an html page with the following:
<body><div class='a'>awef</div>
</body>

<script type='text/javascript'>
    var styleNode = document.createElement('style');
    styleNode.type = 'text/css';
    styleNode.rel = 'stylesheet';
    document.head.appendChild(styleNode);

    styleNode.sheet.insertRule(".a { color:red; }", styleNode.sheet.cssRules.length)
</script>

2. load the page
3. open the dev tools and select the div on the page
4. try to change the color from red to something else or try to disable that style by unchecking it

What is the expected behavior?
The style will be changed

What went wrong?
The style does not change, and the change you made in the dev tools reverts back to what it was originally set to.

Did this work before? N/A 

Chrome version: 34.0.1847.131  Channel: stable
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version: Shockwave Flash 13.0 r0
 
Owner: apavlov@chromium.org
Status: Assigned
Owner: lushnikov@chromium.org
Andrey, please dupe against the appropriate issue.
What's the status on this? The other issue was marked "won't fix" for a reason unrelated to my problem. 
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?
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.
This is a huge problem for my team - is someone going to investigate this?
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.
@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..
@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?
Would love to give it a try! My current version of chrome is 44.0.2403.107 m. After DLing the latest version of canary (46.0.2466.3 canary (64-bit)), looks like element.style css changing is definitely improved. While in my non-canary chrome, element styles set via javascript aren't editable through the dev tools, while in canary they are - which is great! Thanks!

It's a minor improvement that dynamically created css classes are greyed out and obviously non-editable in canary, whereas in my non-canary chrome they look like they can be edited, but revert back rather than changing. 

It would obviously be best if the dev tools allowed you to change styles on any class regardless of whether it was created via javascript or not tho. Would be a really big help for styling in our project!

Thanks again for the element.style improvement!
Status: WontFix
We don't have any plans to support editing of CSSOM-based rules in DevTools. 
Sign in to add a comment