See which element owns any specific pixel of a web page - html

Question

Sometimes I see some an unwanted border or another element in the web page and I have a lot of troubles identifying just to which element it belongs.
There may be many enclosed elements, any of which may or may not have the border in question, for example. Right now I have to go through each of them and check the border property of each, which takes a lot of effort.
So is there a way to see which element owns any given on-screen pixel with Firefox, Firebug, Chrome or any other web development tool?
I just want to point my mouse cursor at any pixel in question and see the corresponding element and/or rule.
There's usually an option to inspect any chosen element, but right-clicking on the border of an element and choosing to inspect the element doesn't seem to show the exact element the border of which was clicked.

Answer 1

The only way I could think of is to use the "element picker" function which exists in any developer tool.
In Chrome it is a "magnifying glass" and in Firefox a "square with an arrow" - both at the top left.
Click to activate and move the cursor around the page to inspect. The respective element is highlighted.
So you should easily find the element you are looking for.
An example:

Answer 2

The element inspector should do the job. The only reason I could think of for why it fails is when the element in question is covered by another element. See example:
#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>
And the solution is simple: right-click on the element in question and click inspect element (zoom the page if necessary). If it is not the correct element, hit the del button on the keyboard. This removes the element you just selected. Repeat until necessary.

Answer 3

As far as browser functionality goes, there are two thoughts that come to mind:
The 'elements' tab of Chrome Developer Tools. If you hover over elements within the tab, that area of the page will be highlighted, complete with a height/width tooltip. (I do realize this is sort of the opposite of your use case, but it could still be useful).
Similarly, the Firefox page inspector has similar functionality.
It might be worth writing a small script to get the functionality you're looking for. You might look into jQuery's elementFromPoint. Example: http://jsfiddle.net/t8vapLwr/2/

Answer 4

Why don't you try this chrome extension if you don't want to rely on the element picker.
https://chrome.google.com/webstore/detail/pesticide-for-chrome/bblbgcheenepgnnajgfpiicnbbdmmooh
what it does is highlight the different elements on chrome.

Answer 5

I totally understand your problem. I have been thought it. So what i do is the following:
Obviously you can use the inspect tool which sometimes doesn't shows us what we exactly need.
You can use this chrome extension Precise Element Picker Tool and then select the specific element.
I am sure the 2nd option will solve your problem.

Answer 6

Using "Inspect Element" on a border has always worked for me, but potentially this could help.
It was mentioned by Sculper, but you could do something really quick yourself using document.elementFromPoint.
Just copy and paste this into the console:
window.addEventListener('click', function(e) {
e.preventDefault();
console.log(document.elementFromPoint(e.clientX, e.clientY));
}, true);
Then you can click around the page to find the element in question.
In Chrome, Firefox, and Firebug, that outputs the element to the console, which you can then click (or for Chrome right-click and "Reveal in Elements Panel") to see it in the Elements Panel.
If you need clicking for navigation (for a single-page app or the like), you can simply change the event being captured to mousemove or dblclick.