Detect Overflowing Elements With Javascript
Finding overflowing elements while building the frontend of your website or app can be an absolute nightmare but there is a little trick you can do to help yourself out. While viewing a page containing the offending elements, open the browser’s developer tools and paste the below javascript snippet into the console to list out all the overflowing elements.
document.querySelectorAll('\*').forEach(el => {
if (el.offsetWidth > document.documentElement.offsetWidth) {
console.log('Overflowing element: ', el);
}
});