Debug and inspect layouts by outlining elements with Layout Inspector to fix design issues quickly.

Latest Version

Version
1.0
Update
November 29, 2024
Size
16.58KiB
Developer
Category
Users
9
Rating
5 ★
Manifest Version
3
Web Store Status
Languages Support
English (United States)
See more
Permissions
ActiveTab
Scripting
See more

Layout Inspector Extension

Layout Inspector
The Layout Inspector extension helps web developers and designers quickly debug and inspect the layout of any webpage. With a single click, it outlines every element on the page, making it easier to visualize their placement and structure. This tool is especially useful for detecting layout issues, alignment problems, and spacing inconsistencies without needing to open complex developer tools.

Why You Should Install It:
Easy Debugging: Instantly view the outline of all elements on a webpage to identify layout problems.
Efficient Design Inspection: Quickly check the structure and positioning of elements, saving time during design and development.
User-Friendly: Simple one-click activation and toggling without the need to dig into complicated settings or developer tools.
Helps in Fixing Alignment Issues: Ideal for fixing CSS issues, improving web page layout design, and ensuring elements are correctly positioned.
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "Layout Inspector", "version": "1.0", "description": "Debug and inspect layouts by outlining elements with Layout Inspector to fix design issues quickly.", "permissions": [ "activeTab", "scripting" ], "action": { "default_popup": "popup.html", "default_icon": { "16": "icons/icon16.png", "48": "icons/icon48.png", "128": "icons/icon128.png" } }, "icons": { "16": "icons/icon16.png", "48": "icons/icon48.png", "128": "icons/icon128.png" }}
Read more

Similar Extensions

icon

CSS Viewer for Google Chrome™ Extension · Productivity 9 334 ★ 346KiB

icon

Page Ruler Extension · Developer Tools 9 15 ★ 15.33KiB

icon

HeadingsMap Extension · Developer Tools 9 70 ★ 575KiB

icon

css scanner Extension · Developer Tools 9 6 ★ 339KiB

icon

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

icon

Inspect Element Extension · Developer Tools 9 30 ★ 162KiB

icon

UI Inspector - Live Style Editor Extension · Developer Tools 9 2 ★ 90.41KiB

icon

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

icon

HTML5 Outliner Extension · Productivity 9 262 ★ 25.23KiB

icon

A11y quick check Extension · Accessibility 9 4 ★ 465KiB

icon

CSS Scan Extension · Developer Tools 9 84 ★ 1.41MiB

icon

BrowserStack Bug Capture Extension · Developer Tools 9 83 ★ 3.92MiB

icon

Image Size Checker Extension · Developer Tools 9 0 ★ 143KiB

icon

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

icon

CSS Peeper Extension · Developer Tools 9 363 ★ 279KiB

icon

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

icon

Hover inspector like in Zeplin , Figma Extension · Developer Tools 9 29 ★ 122KiB

icon

Visual Inspect UI Extension · Productivity 9 5 ★ 82.23KiB

icon

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

icon

Metric Spy Extension · Developer Tools 9 2 ★ 268KiB

icon

Layout Grid for browser Extension · Productivity 9 1 ★ 952KiB

icon

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

icon

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

icon

Accessibility Insights for Web Extension · Developer Tools 9 37 ★ 3.62MiB