2

我加载了一个输出 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 输出，因为我可以非常轻松地复制和粘贴。

4

1 回答 1

4

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

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

于 2013-04-30T11:56:13.060 回答