Pixel Perfect Inspector

Inspect and extract CSS properties from DOM elements with pixel-perfect precision.

# Descrições para Chrome Web Store ## 🇺🇸 English Description ``` Pixel Perfect Inspector is a powerful Chrome extension that helps developers and designers inspect and extract CSS properties from DOM elements with pixel-perfect precision. Perfect for ensuring accurate design implementations, checking spacing and typography, and learning CSS. ✨ Key Features: 🎯 Hover Highlighting Visual overlay shows element boundaries and dimensions in real-time as you move your mouse over elements. 📝 Smart Tooltips Context-aware tooltips automatically display relevant information: • Typography properties for text elements (font-size, font-family, line-height, etc.) • Layout properties for containers (display, flex-direction, justify-content, etc.) • Detailed information for images and SVGs (dimensions, aspect ratio, file type, etc.) 📏 Distance Measurement Measure the exact distance between any two elements with a single click. Shows horizontal, vertical, and diagonal distances in a clean, easy-to-read format. 🎨 Customizable Themes Choose from 10 beautiful color themes (Purple, Blue, Cyan, Teal, Green, Orange, Red, Pink, Indigo, Amber) to match your workflow. 📏 Adjustable Font Size Customize tooltip font size from 10px to 20px for optimal readability. ⌨️ Keyboard Shortcuts Toggle inspection mode quickly with Ctrl+Shift+. (Windows/Linux) or Cmd+Shift+. (Mac). 🔒 Privacy First Works entirely locally in your browser. No data collection, no external servers, no tracking. Perfect for: • Frontend developers ensuring pixel-perfect implementations • Designers verifying spacing and typography • Anyone learning CSS and web development • QA engineers checking design consistency Get started in seconds - just install, click the extension icon, and start inspecting! ``` ## 🇧🇷 Descrição em Português ``` Pixel Perfect Inspector é uma extensão poderosa do Chrome que ajuda desenvolvedores e designers a inspecionar e extrair propriedades CSS de elementos DOM com precisão pixel-perfect. Perfeito para garantir implementações de design precisas, verificar espaçamento e tipografia, e aprender CSS. ✨ Principais Funcionalidades: 🎯 Destaque ao Passar o Mouse Overlay visual mostra limites e dimensões de elementos em tempo real conforme você move o mouse sobre os elementos. 📝 Tooltips Inteligentes Tooltips sensíveis ao contexto exibem automaticamente informações relevantes: • Propriedades de tipografia para elementos de texto (font-size, font-family, line-height, etc.) • Propriedades de layout para containers (display, flex-direction, justify-content, etc.) • Informações detalhadas para imagens e SVGs (dimensões, aspect ratio, tipo de arquivo, etc.) 📏 Medição de Distância Meça a distância exata entre quaisquer dois elementos com um único clique. Mostra distâncias horizontal, vertical e diagonal em um formato limpo e fácil de ler. 🎨 Temas Personalizáveis Escolha entre 10 temas de cores lindos (Roxo, Azul, Ciano, Verde-água, Verde, Laranja, Vermelho, Rosa, Índigo, Âmbar) para combinar com seu fluxo de trabalho. 📏 Tamanho de Fonte Ajustável Personalize o tamanho da fonte do tooltip de 10px a 20px para legibilidade ideal. ⌨️ Atalhos de Teclado Ative o modo de inspeção rapidamente com Ctrl+Shift+. (Windows/Linux) ou Cmd+Shift+. (Mac). 🔒 Privacidade em Primeiro Lugar Funciona inteiramente localmente no seu navegador. Sem coleta de dados, sem servidores externos, sem rastreamento. Perfeito para: • Desenvolvedores frontend garantindo implementações pixel-perfect • Designers verificando espaçamento e tipografia • Qualquer pessoa aprendendo CSS e desenvolvimento web • Engenheiros de QA verificando consistência de design Comece em segundos - basta instalar, clicar no ícone da extensão e começar a inspecionar! ``` ## 📝 Notas de Uso ### Para a Chrome Web Store: 1. **Short Description (Summary)** - 132 caracteres máximo: - EN: "Inspect CSS properties with pixel-perfect precision. Measure distances and view detailed element information instantly." - PT: "Inspecione propriedades CSS com precisão pixel-perfect. Meça distâncias e visualize informações detalhadas instantaneamente." 2. **Detailed Description** - Use as descrições completas acima (campo "Description" no formulário) 3. **Category**: Developer Tools 4. **Language**: Você pode publicar em ambos os idiomas criando listagens separadas ou escolhendo o idioma principal