Can I see dynamically-generated CSS source in Chrome DevTools?

Question

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.

Right click and click on Inspect Element. You can see the generated HTML there — Cody Guldner
– Cody Guldner, Commented Apr 30, 2013 at 1:22
I see that, but that's not want I wanted. I wanted to click into the element's style in the CSS panel on the right of the element inspector. Because the CSS is dynamically generated, clicking the CSS source line just points me back to the source file, which only has the script tag. — Stephen
– Stephen, Commented Apr 30, 2013 at 11:42

Alexander Pavlov · Accepted Answer · 2013-04-30 11:56:13Z

7

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.

answered Apr 30, 2013 at 11:56

Alexander Pavlov

32.4k5 gold badges71 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can I see dynamically-generated CSS source in Chrome DevTools?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related