我可以在 Chrome DevTools 中查看动态生成的 CSS 源代码吗？答案

【问题标题】：Can I see dynamically-generated CSS source in Chrome DevTools?我可以在 Chrome DevTools 中查看动态生成的 CSS 源代码吗？
【发布时间】：2013-04-23 17:46:10
【问题描述】：

我加载了一个输出 HTML、CSS 和其他 Javascript 的 Javascript 小部件。

页面的来源（test.html）只是

<!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>

脚本执行并生成一个小部件。我可以在 Chrome DevTools 的 Element 选项卡中看到 HTML 节点。检查特定元素时，检查器说它的样式位于 test.html:239，但是当我单击链接时，它会再次显示源页面。

当我在 Firebug 中加载页面时，单击行号会将我转到由 Firefox 维护的样式表的内部版本。 Chrome DevTools 有没有办法做到这一点？我喜欢 Firebug 的动态生成 CSS 输出，因为我可以非常轻松地复制和粘贴。

【问题讨论】：

右键点击Inspect Element。你可以在那里看到生成的 HTML
我明白了，但这不是我想要的。我想在元素检查器右侧的 CSS 面板中单击元素的样式。因为 CSS 是动态生成的，所以单击 CSS 源代码行只会让我回到只有 script 标签的源文件。

标签： css google-chrome google-chrome-devtools

【解决方案1】：

不，您将无法看到源代码，因为动态生成的 <style> 标签不会存储在任何地方，解析后会立即丢弃，这与外部或内联不同具有底层源文本的样式表（分别在foo.css 文件或加载的文档<style> 标记中）。

您被导航到文档，因为您看不到样式表本身，在这种情况下，这是 DevTools 的最大努力。

【讨论】：