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

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.

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..

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!