Can I see dynamically-generated CSS source in Chrome DevTools?
css, google-chrome, google-chrome-devtools
Solution
No, you won't be able to see the source, as for dynamically generated `<style>` tags it is not stored anywhere and is thrown away right after parsing, unlike for the external or inline stylesheets, which have the underlying source text (in the `foo.css` file or in the loaded document `<style>` tag, respectively).
You are navigated to the document, since you cannot see the stylesheet itself, and it is the DevTools' best effort in this case.
Problem
I loaded a Javascript widget that outputs HTML, CSS, and additional Javascript. The source of the page (test.html) is just ``` <!DOCTYPE html> <html lang="en"> <head> <title>Widget Test</title> </head> <body> <div id="widget"></div> <script type="text/javascript" src="http://widgets.some.site/render?element_id=widget_id&customer_id=999999&gallery=22222&widget_config=769792669" async="async"> </script> </body> </html> ``` The script executes and generates a widget. I can see the HTML nodes in the Element tab of Chrome DevTools. When inspecting a particular element, the inspector says that its style is located at test.html:239, but when I click on the link, it shows me the source page again. When I load the page in Firebug, clicking on the line number sends me to an internal version of the stylesheet maintained by Firefox. Is there a way Chrome DevTools does this as well? I like Firebug's output of dynamically generated CSS, since I can copy and paste very easily.