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

Question

有时候我会在网页上看到一些不需要的边框或其他元素，而且我有很多麻烦来确定它属于哪个元素。

例如，可能存在许多封闭元素，其中任何一个都可能具有或不具有所讨论的边界。现在我必须仔细检查每一个并检查每个属性的边界属性，这需要付出很多努力。

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

通常可以选择检查任何选定的元素，但右键单击元素的边框并选择检查元素似乎并未显示单击边框的确切元素

Answer 1

我能想到的唯一方法是使用＆＃34;元素选择器＆＃34;任何开发人员工具中都存在的函数。

在Chrome中它是一个＆＃34;放大镜＆＃34;并在Firefox a＆＃34;方形箭头＆＃34; - 都在左上角。

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

所以你应该很容易找到你想要的元素。

示例：

Answer 2

就浏览器功能而言，有两种想法可以想到：

1. ＆＃39>元素＆＃39; Chrome开发者工具标签。如果将鼠标悬停在选项卡中的元素上，页面的该区域将突出显示，并带有高度/宽度工具提示。 （我确实意识到这与你的用例相反，但它仍然有用）。

2. 同样，Firefox页面检查器具有类似的功能。

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

Answer 3

如果您不想依赖元素选择器，为什么不尝试使用此chrome扩展。

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

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

Answer 4

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

1. 显然，您可以使用检查工具，有时无法向我们展示我们确切需要的内容。

2. 您可以使用此Chrome扩展程序Precise Element Picker Tool，然后选择特定元素。

我确信第二个选项可以解决您的问题。

Answer 5

在边框上使用“Inspect Element”对我来说一直很有用，但这可能会有所帮助。

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。

Answer 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>

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