biemkljjgcbgablgbccpdnfgijkpgiod
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.
GitHub Red Issues
Please report issues using the link in the support tab.
Website Aura: Color Analyzer
Unlock the mood of any website with a detailed color scheme analysis and mood-based design insights. Our team has launched Snable: UI Inspector & CSS Scanner — a complete tool for analyzing visual elements on websites. Inspect UI components, extract styles, and break down any web page’s design in one click. Inspect with Snable → snable.bozzhik.com/extension Website Aura brings professional color analysis to your browser. This powerful Chrome extension deconstructs web designs into their core color patterns, revealing the psychological impact and mood behind every palette. Perfect for creators who see colors as a language of design. Our team has launched Snable, a fully-fledged extension for analyzing visual elements on websites. With Snable, you can inspect UI components, extract styles, and get a comprehensive breakdown of any web page’s design structure—all in just one click. Instantly analyzes any website's color palette Reveals the emotional mood of the design Identifies professional color schemes Shows color relationships and harmony Extracts top 5 most used colors Professional: Balanced and trustworthy corporate designs Creative: Unique and expressive artistic approaches Minimalist: Clean and focused experiences Confident: Strong and impactful statements Elegant: Sophisticated and refined aesthetics Practical: Functional and straightforward layouts Monochromatic: Single-hue professional harmony Analogous: Neighboring colors for cohesion Complementary: Opposing colors for impact Practical: Balanced everyday functionality Vibrant: High-energy color combinations 🔒 PRIVACY FIRST Website Aura operates entirely within your browser, analyzing colors in real-time without storing or transmitting any data. No servers, no tracking, no data collection - just pure color magic happening right on your device. Your browsing remains private and secure. 👥 PERFECT FOR 💡 HOW TO USE Simply click the extension icon on any website to instantly see its color mood analysis. No configuration needed - just install and explore! 🔗 Visit bozzhik.com for more tools and inspiration.
Developer DOM Inspector
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!
Hide whitespaces GitHub
When navigating to the files tab on pull request reviews, append the url with ?w=1 to enable the "hide whitespace changes" option
