jgjieooadlmhhaocmajfdkneibjkldlh
A powerful, Chrome DevTools-style DOM inspector that helps developers and QA engineers visually analyze, debug, and understand web page layouts with precision. 📦 VISUAL BOX MODEL INSPECTOR - Color-coded margin, padding, border, and content layers - Live overlay visualization while hovering - Instant box model calculations 🎨 SMART CSS FILTERING - Shows only non-default, meaningful CSS properties - Groups properties by category (Layout, Typography, Flexbox, Grid) - Toggle between filtered and complete CSS views - Hex color codes for easy copying - Syntax-highlighted, DevTools-style formatting 🔄 FLEXBOX & GRID VISUALIZATION - Visual direction indicators for flex containers - Grid line overlays for grid layouts - Auto-detection of layout types 📱 RESPONSIVE DESIGN TESTING - Test multiple device viewports (iPhone, iPad, Desktop) - Custom viewport dimensions - Zoom controls and rotation - Side-by-side comparison mode 📏 DISTANCE MEASUREMENT TOOL - Measure precise pixel distances between elements - Horizontal and vertical spacing calculations - Visual measurement lines with arrows - Overlap detection ⬚ ELEMENT OUTLINE MODE - Color-coded outlines for all page elements - Quick visual hierarchy understanding - Different colors for divs, semantic HTML, media, forms, etc. 🗂️ INTELLIGENT ELEMENT SELECTION - Multiple element tracking - Breadcrumb navigation through DOM tree - Click breadcrumbs to inspect parent elements - History navigation (undo/redo for inspected elements) 🚀 PERFECT FOR ✓ Front-end Developers - Debug layouts and CSS issues quickly ✓ QA Engineers - Verify design implementation accuracy ✓ UI/UX Designers - Inspect spacing, typography, and colors ✓ Web Developers - Learn from other websites' CSS ✓ Students - Understand how websites are built 1. Click the DOM Inspector icon in your toolbar 2. Choose from the floating menu: • 🔍 Inspect Element - Click any element to analyze • ⬚ Outline All - See page structure at a glance • 📏 Measure Distance - Calculate spacing between elements • 📱 Responsive Mode - Test different screen sizes 3. View detailed CSS information in the panel 4. Copy CSS with one click 5. Navigate element hierarchy via breadcrumbs - Lightweight and fast - No page reload required - Works on any website - Clean UI that doesn't interfere with your work - Easy cleanup with one click Perfect for learning CSS! See exactly how professional websites implement: - Flexbox and Grid layouts - Responsive designs - Typography systems - Spacing scales - Color schemes - Only activates when you click the icon - No data collection - No external requests - Works completely offline - Open source and transparent Unlike browser DevTools: ✓ Simpler, focused interface ✓ Visual box model overlays ✓ Smart CSS filtering (no noise) ✓ Built-in responsive testing ✓ Distance measurement tool ✓ Outline mode for quick understanding ✓ No learning curve Found a bug or have a suggestion? We'd love to hear from you! Visit our support page or leave a review. Made with ❤️ for web developers worldwide. Install now and start inspecting smarter!
Focus: The Elements - DOM Inspector & Editor
DOM Inspector & Editor, inspect and edit HTML element styles directly on any page. It is a lightweight DOM Manipulation Tool and powerful browser extension that helps developers, designers, and curious learners inspect and edit any webpage in real time. With a simple hover or double-click, you can instantly view detailed information about HTML elements such as width, height, font size, font family, font weight, colors, margins, padding, and background. The inline editor lets you change styles directly on the page with live updates, making it easy to experiment, debug, and customize without touching the source code. Whether you’re testing layouts, fine-tuning typography, or exploring how websites are built, this extension gives you a fast and intuitive way to take full control of the DOM.
Page DOM Stats
Gather statistics on DOM and CSS This is a simple Chrome extension to inspect performance-related properties of a web page:
Inspect All - Web Inspector, Fonts & SEO Tools
Inspect fonts, colors, assets, SEO and responsiveness of any website in one simple side panel. Inspect All is the all-in-one Chrome extension designed to give developers, designers, and SEO experts instant clarity. From CSS properties to tech stacks, get the insights you need to build, design, and optimize faster than ever. Say goodbye to switching between multiple tools and digging through complex code. Inspect All provides an intuitive, organized interface to access all the insights you need in one place. 🚀 Core Features (Available for Free) ✦ Page Overview. Get instant insights into any webpage's structure, metadata, fonts, and key information. Understand the foundation of any website at a glance. ✦ Inspect design properties effortlessly. Stop digging through the code. Save hours by quickly inspecting element properties with a simple point-and-click. View and edit CSS properties, dimensions, positioning, and computed styles instantly. ✦ Explore colors used on your favorite sites. Browse a variety of colors extracted from text, backgrounds, borders, shadows, and gradients. Find inspiration, check color formats, and easily copy color codes in multiple formats (HEX, RGB, RGBA, OKLCH). Love a palette? Save it to your favorites. ✦ Identify typography. Explore the typography across any site, uncover unique font pairings, and check the most relevant text properties including font families, weights, styles, and heading structures. ✦ Explore assets. Browse and analyze all images, icons, fonts, scripts, and graphics used across a website. View dimensions, formats and sizes. ✦ SEO Analysis. Perform comprehensive SEO audits with detailed analysis of meta tags, Open Graph data, structured data, heading structure, and link analysis. Identify optimization opportunities instantly. ✦ Color Picker Tool. Use the built-in EyeDropper API to pick colors directly from any webpage element. See color codes displayed on the page in real-time with a beautiful overlay that shows the selected color format. ✦ Instantly detect the complete tech stack of any website. Identify JavaScript frameworks, UI frameworks, CMS platforms, analytics tools , CDNs, hosting platforms etc. Get version information when available. ✦ Advanced SEO Scoring with detailed analysis and actionable recommendations. Receive comprehensive SEO scores, identify issues, and get suggestions for improvement. Track your SEO performance and optimize your website effectively. ✦ Responsiveness Checker helps you test your website's responsive design across multiple device sizes. Preview how your site looks on mobile, tablet, and desktop viewports. Ensure perfect responsiveness on all devices. ✦ Browser Storage Inspector offers advanced inspection of Local Storage, Session Storage and Cookies. View and delete storage data directly from the extension. Perfect for debugging and development workflows. ✦ Hover Inspection Mode provides an advanced way to inspect design details at a glance. See element details as you move your mouse over different parts of the page. Streamline your inspection workflow with instant feedback. ✦ Advanced Link Analysis helps you dive deep into internal and external links. Analyze link structure, identify patterns, and understand the website's linking strategy. Get insights into link distribution and relationships. ✦ Page Structure Analysis visualizes and helps you understand the complete page structure. See the hierarchy of elements, understand layout patterns, and identify structural issues at a glance. ✦ Grid View Visualization helps you understand CSS Grid and Flexbox layouts with an intuitive visual representation. Understand complex layouts instantly and learn from well-designed websites. ✦ Font & Heading Analysis provides comprehensive typography analysis with detailed font information, heading hierarchy, and typography recommendations. Understand typography choices and create better designs. ✦ Element Hide and Deletion Tool lets you test layouts by temporarily removing elements. See how pages look without specific components and understand element dependencies for better design decisions. You can see the full list of available features at our website. By using the Inspect All extension, you agree to our Terms & Conditions and Privacy Policy. Inspect All is designed to help developers, designers, and SEO professionals work more efficiently. We're committed to providing powerful tools that save time and enhance productivity.
Vanilla Pudding🌿🍮
Vanilla Pudding Userscript Manager helps you manage and run browser userscripts When Do You Need This? 1、A modern script manager with default support for ESM script loaders. 2、A script manager similar to Tampermonkey, but without support for GM_* APIs. 3、Built-in MonacoEditor. 4、A powerful manager that supports advanced API capabilities from the plugin.
