Question

我加载了一个输出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的输出，因为我可以很容易地复制和粘贴。

Answer 1

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

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

我可以在Chrome DevTools中看到动态生成的CSS源吗？

1 个答案: