INSPEKT

About

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