Media
4 items
Description
Debug faster: visualize outlines, measure elements, inspect text styles, audit SEO, and check heading hierarchy. INSPEKT is a powerful frontend debugging tool designed for designers and developers. Inspect any webpage with professional-grade tools—all within your browser, with zero setup required. 🎨 FEATURES • Element Outlines Visualize page structure instantly. Each HTML element gets a unique color for easy identification. Adjust outline opacity to match your preference. • Measurement Tool Measure distances between elements with pixel-perfect accuracy. Click to select elements and see spacing, dimensions, and distances in real-time. • Text Styles Inspector Hover over any text to see complete styling details: font family, size, weight, line height, letter spacing, color, and more. Click to copy styles to clipboard. Configure units (px/rem/em) and color formats (hex/rgb/hsl/oklch). • Live Text Editing Enable edit mode to make temporary content changes—perfect for testing copy variations. Visual border indicator shows when edit mode is active. • Heading Hierarchy Analyze document structure and accessibility. View all headings (H1-H6), detect skipped levels, and get clear issue descriptions with fix recommendations. • SEO Audit Comprehensive SEO analysis including title tags, meta descriptions, Open Graph tags, Twitter Cards, canonical URLs, and robots directives. • Full Page Screenshots Capture complete webpage screenshots, including content below the fold. Smart header handling prevents duplicate sticky headers. • Customizable Settings Choose light or dark theme, position the panel in any corner, customize measurement colors, and toggle feature visibility. 🔒 PRIVACY FIRST • No data collection • No external servers • No tracking or analytics • All processing happens locally in your browser • Settings stored locally only ✨ PERFECT FOR • Frontend Developers debugging layouts and element spacing • UI/UX Designers verifying designs • SEO Specialists auditing metadata • QA Engineers 📋 HOW IT WORKS 1. Click the INSPEKT icon in your toolbar 2. Select a tool from the panel 3. Interact with the page to inspect elements 4. Customize settings to match your workflow All tools work instantly—no page reload, no setup, no configuration files. 🆕 WHAT'S NEW IN v1.1.0 • Click to copy text styles to clipboard • Configurable units (px/rem/em) and color formats (hex/rgb/hsl/oklch) • Adjustable outline opacity • Text Edit mode visual indicator • Heading issue descriptions with fix recommendations • Smart full-page screenshots (no duplicate sticky headers) • Viewport-aware scrollable panels 🆓 COMPLETELY FREE No subscriptions, no ads, no premium features. INSPEKT is free forever. Made with ❤️ by Jonas Arden