Ste*_*hen 4 css google-chrome google-chrome-devtools
我加载了一个输出 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>
Run Code Online (Sandbox Code Playgroud)
该脚本执行并生成一个小部件。我可以在 Chrome DevTools 的“元素”选项卡中看到 HTML 节点。当检查特定元素时,检查器说它的样式位于 test.html:239,但是当我单击该链接时,它会再次显示源页面。
当我在 Firebug 中加载页面时,单击行号会将我转到由 Firefox 维护的样式表的内部版本。Chrome DevTools 是否也可以做到这一点?我喜欢 Firebug 动态生成 CSS 的输出,因为我可以非常轻松地复制和粘贴。
不,您将无法看到源代码,因为对于动态生成的<style>
标签,它不会存储在任何地方,并且在解析后立即被丢弃,这与外部或内联样式表不同,它们具有底层源文本(在文件foo.css
或<style>
分别在加载的文档标签中)。
您将导航到该文档,因为您看不到样式表本身,这是 DevTools 在这种情况下的最大努力。