Way to find the element with the highest width

Question

I have a webpage which has thousands of small elements, each with a different width and height.

What I want is to find the element with the highest width in a webpage via Chrome developer tools or Mozilla developer tools.

I can do it one by one by looking at the layout, but it will waste a lot of time.

Chrome Developer's tool

Mozilla's developer's tool

Please help me by your experience with it.

Answer 1

Assuming that you have jQuery, you can do the following in the console of the Chrome Dev Tools:

var width = 0;
var element;
$('*').each(function() { 
    var element_width = $(this).width();
    if(element_width > width) {
        element = $(this);
        width = element_width;
    }
});
console.log(element);
console.log(element.width());

This code runs through all elements on the page, checks for the height and saves the one with the greatest height.

If you don't want to run over all elements, but rather over some child elements of an element, you can do the following:

var width = 0;
var element;
$('#myElement').children().each(function() { 
    var element_width = $(this).width();
    if(element_width > width) {
        element = $(this);
        width = element_width;
    }
});
console.log(element);
console.log(element.width());

And if your site doesn't have jQuery, you can insert it like that;

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);