Pixel Perfect Inspector

About

# 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