* Proposed solution For programmatically constructed stylesheets, we can generate a source text by collecting the rules from the styles engine. A proof-of-concept CL is here. Pros: It requires no modifications of the frontend code or CDP changes so editing works out-of-the-box as soon as the source css text is provided Changes made to styles show up in Changes panel automatically Cons: Works well only for fully programmatic stylesheets created with new CSSStyleSheet(); See limitations below for more details. Limitation # 1 Mutated stylesheets of const element = document.querySelector('style'); const sheet = element.sheet; sheet.insertRule('div { background-color: grey; }', 0); In this case, there is the original style content that is currently used by InspectorCSSAgent and that includes a single rule for a div and there is an additional rule added programmatically. Basically, there are two sources of CSS rules for the element. Currently, the programmatically inserted rule is not editable in DevTools because it’s not present in the source text backing the modification. Use cases Styled-components (29.5k stars) injects styles using this method (example). Emotion (10.9 stars) does not use CSSOM APIs in development but uses it in production mode (example). Polyfills The next version of CodeMirror is using this approach to inject styles React Native for Web LitElement uses new CSSStyleSheet() when available Possible solution 1: don’t use the original text for all