Web Content Inspector

Inspect text, media, layout, and spacing. Tool created by Mayantha Jayasinghe.

Stop Right-Clicking and "Inspect Element" for Every Little Detail. Web Content Inspector is the fastest way for Developers, Designers, and Content Creators to get an "X-Ray" view of any webpage. Whether you are debugging a layout, stealing design inspiration, or QA testing a staging site, this tool gives you the data you need instantly without opening the complex browser developer console. 🚀 ONE-CLICK ACTIVATION (NEW!) We respect your browsing experience. The Web Content Inspector stays completely dormant until you need it. Simply click the extension icon to toggle the tool ON or OFF. No more annoying overlays on pages when you're just browsing! ✨ KEY FEATURES: 📝 Text Info Inspector Stop guessing font sizes. Instantly see: Exact Font Sizes (in pixels). Font Families (Helvetica, Roboto, Inter, etc.). Visual bounding boxes around headers, paragraphs, and buttons. 🖼️ Media Dimensions Broken images or weird aspect ratios? We've got you covered. See exact rendered Width x Height of any image, video, or SVG. Detects naturalWidth vs. rendered width to find scaling issues. Perfect for checking if images are optimized for Retina displays. 📏 Spacing & Margins The invisible design killer. Visualizes Padding and Margins. Green overlays show you exactly where that extra whitespace is coming from. Great for debugging alignment issues. 📐 Layout X-Ray Understand the skeleton of the site. Outlines major containers (Divs, Sections, Headers, Footers). Color-coded purple overlays help you understand the DOM structure at a glance. ⚡ Real-Time Updates The inspector adapts as you scroll. Works perfectly on responsive mobile views when resizing your browser. "Click-Through" technology: You can still click links and buttons on the website while the overlays are active. 🔒 PRIVACY FIRST No Tracking: We do not collect, store, or sell any user data. Local Execution: The script runs entirely on your local browser. No Bloat: Extremely lightweight code (<50KB) that won't slow down your browser. 👨‍💻 WHO IS THIS FOR? Frontend Developers: Debug CSS issues faster than ever. UI/UX Designers: Audit existing sites or check if the dev team matched your Figma designs. QA Testers: Quickly spot layout shifts and broken assets. Marketing & SEO: Check header hierarchy and image sizes for optimization.