☰

像在 Safari 中一样在 Firefox 中检查元素？

tag-icon • tag-icon html javascript web
像在 Safari 中一样在 Firefox 中检查元素？

以下是 d3.js 的截图教程网页：

在此处输入图片描述

在 safari 中这种检查方式非常酷，在 Firefox 中也有办法做到这一点吗？

让我把事情说清楚一点，我有一个包含以下来源的页面：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Test</title>
        <script type="text/javascript" src="d3/d3.v3.js"></script>
    </head>
    <body>
        <script type="text/javascript">
var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body").selectAll("p")
    .data(dataset)
    .enter()
    .append("p")
.text(function(d) {
    return "I can count up to " + d;
});
        </script>

    </body>
</html>

在 Safari 中，对于每个

元素，它显示一个名为的属性__data__，这是 d3.js 脚本输入到其中的内容。

在此处输入图片描述

答案1

您不是在检查 HTML。您正在查看 JavaScript 函数调用的结果。

Firefox 的控制台做类似的事情：

截屏

请注意 smc 的回答是个正确的查看 HTML/DOM 的方式。

另外，我仍在运行一个旧版本；新版本看起来更好（并且足够智能，可以链接到检查器，在那里你可以应该检查 DOM)。

答案2

是的，您只需右键单击，然后选择“检查元素（Q）”

在此处输入图片描述

然后你会得到一个非常相似的界面：

在此处输入图片描述

答案3

话虽如此，Firefox 有许多插件/扩展程序与您所要求的类似。一个流行的插件是：FireBug，它是 Web Developer 的一部分。它将分解并“实时”显示正在显示的 html/javascript/css 片段。许多建议之一...

编辑：有基于 Web 开发人员的控制台。我承认错误。Firebug 扩展了控制台功能。Firebug 的其他信息是图形化显示元素在页面结构中的位置以及它们如何交互。检查 HTML 并实时修改样式和布局，准确分析网络使用情况和性能，检查和编辑 HTML 代码，可视化 CSS 指标，调试和分析 JavaScript，记录 JavaScript 日志，等等。

相关内容