Analyze the webpage DOM comparing the widths with the widths from raw CSS, to find nested html elements larger than parent nodes
LFWidthChecker Extension
How it works:
It will install a tab panel in the chrome developer tools and a browser action button. To use the extension you have to open my extension's tab in the developer tools and then click on the browser action button to install the code in your webpage and let the extension to analyze it.
After a first run you might set a limit width and run again the script.
The extension will load the CSS rules for \"width\" and \"min-width\" and compares it with the width from DOM.
Feel free to let me know if it works for you.
Source Manifest.json
Similar Extensions
CSS Used 1 184 ★ 164KiB
HTML5 Outliner 1 262 ★ 25.23KiB
Pesticide for Chrome (mv3) 1 1 ★ 23.45KiB
Show All Padding & Margins 1 1 ★ 23.17KiB
PageRip (HTML + CSS Extract) 1 54 ★ 434KiB
Responsive Tester 1 72 ★ 82.41KiB
Widescreen Browsing 1 9 ★ 18.27KiB
Measure-it 1 40 ★ 15.63KiB
WhatFont - What html font 1 43 ★ 128KiB
Zoom Per Tab 1 74 ★ 22.91KiB
Autoscroll : Automatic Page Scrolling 1 9 ★ 117KiB
Website Responsiveness Checker 1 3 ★ 149KiB
Screen Ruler - Measure The Web 1 26 ★ 1.97MiB
Custom CSS by Denis 1 46 ★ 162KiB
HTML Tag Error Checker 1 0 ★ 1.55MiB
Page Ruler 1 83 ★ 256KiB
Page Ruler: Your Web Design Companion 1 0 ★ 46.28KiB
Quick Inspect Element 1 9 ★ 360KiB
Element Size Measurement 1 5 ★ 29.65KiB
Inspecta - validate design implementation 1 3 ★ 420KiB
HTML CSS Viewer 1 0 ★ 7.65KiB
Outline HTML Elements 1 1 ★ 49.84KiB
3D View website 1 4 ★ 17.25KiB
CSS Debugger 1 9 ★ 13.27KiB