CODEWITHSUNDEEP
cssgoogle-chromegoogle-chrome-devtools
Stephen
Stephen

Reputation: 2550

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

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.

Upvotes: 4

Views: 1870

Answers (1)

Alexander Pavlov
Alexander Pavlov

Reputation: 32286

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.

Upvotes: 6

Related Questions