amgiflol

Tired of tedious manual checks and endless back-and-forth when verifying web designs? The Amgif Inspector streamlines the process, empowering designers and developers to achieve pixel-perfect implementations on any live webpage. Inspired by the "Inspect" functionality found in leading design tools, this extension bridges the gap between design mockups and live web implementations.

This tool focuses on providing robust debugging for standard HTML tags and their computed CSS properties, giving you a foundational understanding of any webpage's structure and styling. (Note: Framework-specific debugging is not supported at this time, ensuring a focused and lightweight experience).

Target Audience

Front-end Developers: Debug layouts and catch spacing issues as you code UI/UX Designers: Validate live implementations against design specifications QA Engineers: Identify visual inconsistencies during testing cycles Product Managers: Review features with precise measurements and documentation

Key Features

Precision Tools

Distance Measurements - Instantly see precise measurements between elements and parents Layer-to-Layer Measurements - Hold Alt/Option key to measure distances between any two elements Dynamic Rulers - Mouse-following coordinate system for precise pixel positioning Visual Overlays - Highlight elements and parent relationships for DOM understanding

Smart Inspection

Real-time Detection - Hover for immediate element information (tag, ID, classes) Side Panel - Detailed properties, computed styles, and attributes with auto-move Lock/Unlock Mode - Persistently track specific elements without losing focus

Productivity Features

Keyboard Shortcuts - Quick access to all features with intuitive shortcuts Design Mode - Edit text directly on screen for quick content adjustments Screenshot Capture - Save page state with active overlays for sharing Smart UI Positioning - Auto-hide/move interface to avoid obstructing view

Advanced Visual Tools

Rainbow Layouts - Colorful nested layer visualization for complex structures Floating Toolbar - Smart auto-positioning interface with minimal interference Feature Voting - Vote for features you want developed next

Usage Scenarios

During Development: Catch spacing/alignment issues while coding - eliminate guesswork, reduce debugging time Design Reviews: Verify implementation vs specifications with precise measurements and visual overlays QA Testing: Identify visual inconsistencies across browsers using systematic inspection tools Final Polish: Perfect pixel-level details before shipping with comprehensive measurement data

Quick Start Guide

1. Install - Add extension from Firefox Add-ons
2. Navigate - Go to any webpage you want to inspect
3. Activate - Click the extension icon in toolbar
4. Inspect - Hover over elements for instant measurements
5. Advanced - Use shortcuts or floating toolbar for more features
6. Track - Lock elements for persistent monitoring

Free & Open Source - Completely free to use with open source code available on GitHub No External Dependencies - Works entirely in browser, no login required for prototyping tools Instant Setup - No data sent to external servers, immediate productivity gains Workflow Integration - Active visual debugger for real-time development and design audits Professional Grade - Built for workflows where precision matters and time is valuable

Current Status

Keyboard Shortcuts: Continually refining for industry-standard usability Rainbow Layouts: Optimized for Chrome, Firefox enhancements in development Framework Support: Focused on standard HTML/CSS for lightweight experience User Feedback: Actively welcomed to shape future development

Ready to achieve pixel-perfect web designs with ease? Install Figma Inspector today and transform your visual debugging workflow.