Search code examples
web-applicationsframeworksgoogle-chrome-devtoolsdevtoolsfirefox-developer-tools

How to copy invisible embbed CSS rules which are added by web application frameworks?

I have been tasked with converting a website which appears to be built with a web application framework into a regular HTML/CSS/JS website. The website can be accessed here.

The task involves reusing the existing CSS rules. However, I'm unable to copy all embedded CSS rules in a <style> element at once because they are completely invisible to me.

Take an element .fjRKyu as an example, Chrome DevTools indicates that the element's CSS rule are embedded in a <style> element. Please see the figure below.

enter image description here

But after I click the "<style>" in order to see all other CSS rules, the inspector only highlights an empty <style> element. Other CSS rules are no where to be seen. Please see the figure below.

enter image description here

I also tried copying the outerHTML of that <style> element, but all I got is just an empty <style> element with no CSS rules in it.

Firefox DevTools shows a bit more information in its Style Editor and indicates that the <style> element contains 10 CSS rules. But again, those CSS rules are no where to be seen.

I need to copy all those embedded CSS rules in order to reuse them. Although I can copy them one by one by inspecting all elements one by one, that's time-consuming and can potentially miss some of them. A way for copying all CSS rules in a <style> element at once is more preferable.

Solution

  • These rules are generated programmatically using insertRule API.

    To copy the effective contents to clipboard:

    1. click the <style> element in devtools
    2. paste and run this in console:
    copy(Array.from($0.sheet.cssRules, r => r.cssText).join('\n'))

    You can save this code as a devtools snippet in Chrome and run it quickly via Ctrl-P shortcut.