Google Chrome 中的“检查元素”功能是什么？

Question

是什么检查元素Google Chrome 中的功能以及我如何从中受益？在检查元素窗口中，如果我单击资源选项卡，它不会显示任何加载时间。我如何有效地使用此功能？

当我通过右键单击页面并选择“检查元素”项来打开“检查元素”时，我看到以下屏幕：

Answer 1

Inspect Element是 Chrome 版的 Firebug。它的功能并不那么全面，但仍是一个非常有用的工具。

确保资源选项卡已启用 - 如果没有启用，您将不会获得任何加载时间。单击大“启用资源跟踪”按钮。

Answer 2

正如其他人提到的，这是WebKit Web 检查器，它可让您检查页面的 HTML 和其他资源，并评估加载时间等。以下是在此页面上使用它的屏幕截图（来自 Safari；相同的检查器）：

Answer 3

检查元素允许您检查最接近您单击区域的任何 HTML 元素，就像 Firefox 扩展一样萤火虫。如果您想查看时间安排，您必须永久启用资源跟踪，它会提示您这样做。

Answer 4

不确定其他人使用的 Chrome 版本是什么，14.0.835.202 开发人员工具有很多东西可供选择。其中最有用的是检查元素和 a) 实时编辑 html 或 b) 实时编辑 CSS 以进行 Web 开发。一旦一切正常，您就可以编辑实际内容，而不必执行编辑-刷新-重新加载的循环来查看布局更改。

这是显示页面元素加载时间的网络部分（如 Firebug 中的 YSlow）。

事实证明，它比 Firefox 中的 Firebug 速度更快，布局更好。