查看哪个元素拥有网页的任何特定像素答案

【问题标题】：See which element owns any specific pixel of a web page查看哪个元素拥有网页的任何特定像素
【发布时间】：2015-02-02 20:01:20
【问题描述】：

有时我在网页中看到一些不需要的边框或其他元素，我很难确定它属于哪个元素。

可能有许多封闭的元素，例如，其中任何一个可能有也可能没有相关的边框。现在我必须遍历它们中的每一个并检查每个的边框属性，这需要付出很多努力。

那么有没有办法使用 Firefox、Firebug、Chrome 或任何其他 Web 开发工具查看哪个元素拥有任何给定的屏幕像素？我只想将鼠标光标指向任何有问题的像素，然后查看相应的元素和/或规则。

通常有一个选项可以检查任何选定的元素，但右键单击元素的边框并选择检查元素似乎不会显示单击边框的确切元素。

【问题讨论】：

收到反对票的原因是它是对工具、库或其他外部资源的请求，这不是 StackOverflow 在这里回答的请求。 Please see here on "How to ask". 也不清楚你在问什么。网络检查器/Firebug 都是非常知名的工具，可以准确地实现您正在寻找的东西，并且都应该可以通过 Google 搜索来识别。
问题不清楚，您是在寻找调试工具还是想知道调试技巧。很不清楚。我同意@JoshBurgess
假设您在网页的某处有一条水平或垂直的黑线。我正在寻找一种方法来知道它来自哪里。元素选择器似乎无法在任何地方可靠地做到这一点 - 我得到了一些与那条黑线没有直接联系的元素 - 它可能只是坐在它旁边，它可能是我所在元素的子元素寻找等。
@dragonroot，我明白了。您想知道杂散线的来源。元素检查器仍然是最好的选择，因为它解释浏览器如何显示您的页面，并且您不会比浏览器本身内置的东西更接近源代码。这个问题可能会更好地作为一个我如何调试？ foray。
当然！我的观点是，虽然任何浏览器都知道该行来自何处，但我并不是很成功地追求其中一个告诉我这一点，因此提出了这个问题。也许那里有一个更愿意的浏览器，或者一些专门的眨眼或基于壁虎的工具来实现这个目的，我不知道。

标签： html css dom firebug

【解决方案1】：

我能想到的唯一方法是使用任何开发工具中都存在的“元素选择器”功能。

在 Chrome 中它是一个“放大镜”，而在 Firefox 中它是一个“带箭头的正方形”——两者都在左上角。

单击以激活并在页面周围移动光标以进行检查。相应的元素被突出显示。

所以你应该很容易找到你正在寻找的元素。

一个例子：

【讨论】：

不可靠。请参阅我对主要问题的评论。
@dragonroot 由于元素可能“重叠”或“穿透”，因此仅通过在屏幕上将光标移到元素上就无法 100% 识别相应元素。在您在评论中描述的这种情况下，您必须在开发人员工具中遍历 DOM。
发布您正在谈论的网站的链接，以及您关注的像素

【解决方案2】：

就浏览器功能而言，我想到了两个想法：

Chrome 开发者工具的“元素”标签。如果您将鼠标悬停在选项卡内的元素上，页面的该区域将突出显示，并带有高度/宽度工具提示。（我确实意识到这与您的用例相反，但它仍然有用）。
同样，Firefox 页面检查器也有类似的功能。

可能值得编写一个小脚本来获得您正在寻找的功能。您可能会查看 jQuery 的elementFromPoint。示例：http://jsfiddle.net/t8vapLwr/2/

【讨论】：

【解决方案3】：

如果你不想依赖元素选择器，为什么不试试这个 chrome 扩展。

https://chrome.google.com/webstore/detail/pesticide-for-chrome/bblbgcheenepgnnajgfpiicnbbdmmooh

它的作用是突出 chrome 上的不同元素。

【讨论】：

【解决方案4】：

我完全理解你的问题。我一直在想。所以我要做的是：

显然您可以使用检查工具，它有时无法向我们显示我们真正需要的内容。
你可以使用这个chrome扩展Precise Element Picker Tool然后选择具体的元素。

我相信第二个选项会解决您的问题。

【讨论】：

【解决方案5】：

在边框上使用“检查元素”一直对我有用，但这可能会有所帮助。

Sculper 提到了它，但您可以使用 document.elementFromPoint 自己快速完成一些事情。

只需将其复制并粘贴到控制台中即可：

window.addEventListener('click', function(e) {
   e.preventDefault();
   console.log(document.elementFromPoint(e.clientX, e.clientY));
}, true);

然后您可以在页面周围单击以找到有问题的元素。

在 Chrome、Firefox 和 Firebug 中，将元素输出到控制台，然后您可以单击控制台（或者对于 Chrome 右键单击并“在元素面板中显示”）以在元素面板中查看它。

如果您需要点击导航（对于单页应用等），您只需将捕获的事件更改为mousemove 或dblclick。

【讨论】：

或elementsFromPoint

【解决方案6】：

元素检查器应该完成这项工作。我能想到它失败的唯一原因是当有问题的元素被另一个元素覆盖时。见例子：

#test-1 {
  float: right;
  width: 50%;
}
#test-1 >div {
  border-bottom: 1px solid;
}
#test-2 {
  float: left;
  width: 50%;
}
#test-2 > div {
  width: 200%;
}

<div id="test-1">
  <div>Inspect me</div>
</div>
<div id="test-2">
  <div>Obstructive element</div>
</div>

解决方案很简单：右键单击有问题的元素，然后单击检查元素（必要时缩放页面）。如果它不是正确的元素，请点击键盘上的 del 按钮。这将删除您刚刚选择的元素。重复直到必要。

【讨论】：