Analyze the webpage DOM comparing the widths with the widths from raw CSS, to find nested html elements larger than parent nodes

Latest Version

Version
1.0
Update
October 31, 2014
Size
743KiB
Developer
Category
Users
1
Rating
0 ★
Manifest Version
2
Web Store Status
Languages Support
English (United States)
See more
Permissions
ActiveTab
Http://*/*
WebNavigation
See more

LFWidthChecker Extension

While updating a website to be mobile friendly, I had some issues with overflowing structures, so I made this extension to help me to find the tag responsible for the issue.

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.
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 2, "name": "LFWidthChecker", "description": "Analyze the webpage DOM comparing the widths with the widths from raw CSS, to find nested html elements larger than parent nodes", "version": "1.0", "permissions": [ "activeTab", "http://*/*", "webNavigation"], "devtools_page":"dev_tools.html", "options_page": "panel.html", "background": { "scripts": ["eventPage.js"], "persistent": false }, "browser_action": { "default_icon": "icon2.png", "default_popup": "popup.html" }}
Read more

Similar Extensions

icon

CSS Used Extension · Developer Tools 1 184 ★ 164KiB

icon

HTML5 Outliner Extension · Productivity 1 262 ★ 25.23KiB

icon

Pesticide for Chrome (mv3) Extension · Developer Tools 1 1 ★ 23.45KiB

icon

Show All Padding & Margins Extension · Developer Tools 1 1 ★ 23.17KiB

icon

PageRip (HTML + CSS Extract) Extension · Developer Tools 1 54 ★ 434KiB

icon

Responsive Tester Extension · Productivity 1 72 ★ 82.41KiB

icon

Widescreen Browsing Extension · Productivity 1 9 ★ 18.27KiB

icon

Measure-it Extension · Developer Tools 1 40 ★ 15.63KiB

icon

WhatFont - What html font Extension · Productivity 1 43 ★ 128KiB

icon

Zoom Per Tab Extension · Productivity 1 74 ★ 22.91KiB

icon

Autoscroll : Automatic Page Scrolling Extension · Productivity 1 9 ★ 117KiB

icon

Website Responsiveness Checker Extension · Developer Tools 1 3 ★ 149KiB

icon

Screen Ruler - Measure The Web Extension · Developer Tools 1 26 ★ 1.97MiB

icon

Custom CSS by Denis Extension · Productivity 1 46 ★ 162KiB

icon

HTML Tag Error Checker Extension · Developer Tools 1 0 ★ 1.55MiB

icon

Page Ruler Extension · Productivity 1 83 ★ 256KiB

icon

Page Ruler: Your Web Design Companion Extension · Developer Tools 1 0 ★ 46.28KiB

icon

Quick Inspect Element Extension · Developer Tools 1 9 ★ 360KiB

icon

Element Size Measurement Extension · Developer Tools 1 5 ★ 29.65KiB

icon

Inspecta - validate design implementation Extension · Developer Tools 1 3 ★ 420KiB

icon

HTML CSS Viewer Extension · Developer Tools 1 0 ★ 7.65KiB

icon

Outline HTML Elements Extension · Developer Tools 1 1 ★ 49.84KiB

icon

3D View website Extension · Productivity 1 4 ★ 17.25KiB

icon

CSS Debugger Extension · Developer Tools 1 9 ★ 13.27KiB