Primes Debugger - Extensão Chrome

Codigo aberto, arquitetura simples e intuitiva.

code 932414510

$12.65

or 2x of $7.05

By completing this purchase you earn

32 DFG Points

+ 16 bonus DFG Points

Available: 99999

Sold: 0

Quantity:

Digital delivery

Up to

10 payment methods

kronos_boderline (0)

Member since 07/2024

0.0% positive ratings

More listings

Description

PRIMES - DEBUG ASSISTANT

Ferramenta Avançada de Debugging para Desenvolvedores Web

================================================================================

O QUE É O PRIMES?

Primes é uma extensão completa de navegador que oferece 11 módulos especializados

para análise, debug e otimização de websites. Com uma interface moderna e intuitiva,

permite que desenvolvedores inspecionem, monitorem e melhorem seus projetos web de

forma eficiente.

================================================================================

RECURSOS PRINCIPAIS

1. Inspector (Inspetor de Elementos)

• Seleção visual de elementos na página

• Visualização de código HTML

• CSS computado de cada elemento

• Geração automática de seletores CSS

• Geração de XPath

• Dimensões e posicionamento

• Informações de Z-Index

2. Console (Logger Aprimorado)

• Captura todas as mensagens do console

• Filtros por tipo (Info, Warning, Error)

• Busca em mensagens

• Timestamps em cada entrada

• Exportação de logs (JSON/TXT)

• Limpeza rápida do console

3. Network (Monitor de Rede)

• Rastreamento de todas as requisições HTTP/HTTPS

• Informações detalhadas (método, status, tamanho, tempo)

• Filtros por tipo de requisição

• Exportação em formato HAR

• Visualização de headers

• Inspeção de request/response

4. Performance (Análise de Performance)

• Monitoramento de FPS em tempo real

• Uso de memória JavaScript

• Contagem de nós DOM

• Contagem de event listeners

• Métricas de carregamento da página

• First Paint e First Contentful Paint

• Score de performance

• Recomendações de otimização

5. Storage (Gerenciador de Armazenamento)

• Visualização de localStorage

• Visualização de sessionStorage

• Gerenciamento de cookies

• Navegador de IndexedDB

• Edição de valores

• Exclusão de itens

• Limpeza completa de storage

• Exportação/importação de dados

6. Errors (Capturador de Erros)

• Captura automática de erros JavaScript

• Stack traces completos

• Arquivo e linha do erro

• Agrupamento de erros similares

• Contagem de frequência

• Exportação de relatórios de erro

7. Accessibility (Verificador de Acessibilidade)

• Validação de conformidade WCAG

• Detecção de textos alternativos faltantes

• Validação de labels em formulários

• Análise de estrutura de headings

• Verificador de contraste de cores

• Teste de navegação por teclado

• Validação de atributos ARIA

• Verificação de atributo lang

• Pontuação de níveis de conformidade (A, AA, AAA)

8. SEO (Analisador de SEO)

• Validação de tag title (50-60 caracteres)

• Verificação de meta description (150-160 caracteres)

• Validação de tag H1

• Análise de hierarquia de headings

• Validação de textos alternativos em imagens

• Análise de links internos/externos

• Verificação de URL canônica

• Detecção de tags Open Graph

• Detecção de marcação Schema.org

• Cálculo de score SEO

9. CSS Analyzer (Analisador de CSS)

• Detecção de CSS não utilizado

• Identificação de regras duplicadas

• Alertas de alta especificidade

• Detecção de uso excessivo de !important

• Análise de prefixos vendor

• Extração de paleta de cores

• Recomendações de otimização

10. JavaScript Analyzer (Analisador de JavaScript)

• Detecção de variáveis globais

• Detecção de console statements

• Alertas de uso de eval()

• Detecção de APIs depreciadas

• Identificação de problemas de performance

• Recomendações de boas práticas

11. Search Helper (Auxiliar de Busca)

• Busca de texto completo na página

• Suporte a expressões regulares

• Opções de case-sensitive

• Highlight visual dos resultados

• Navegação para elementos encontrados

================================================================================

RECURSOS ADICIONAIS

Interface e Usabilidade

• Widget flutuante arrastável e redimensionável

• Funcionalidade de minimizar/maximizar

• Navegação por abas (11 módulos)

• Posição persistente

• Tema dark com design glassmorphism

• Animações suaves

• Menu de contexto (clique direito)

Dashboard

• Histórico de sites analisados

• Tracking de timestamps

• Acesso rápido a re-análises

• Funcionalidade de busca

• Exportação de histórico

• Limpeza de entradas antigas

Suporte Multi-idioma

Interface completamente traduzida em 5 idiomas:

• Inglês (en)

• Português (pt)

• Espanhol (es)

• Russo (ru)

• Chinês (zh)

Atalhos de Teclado

• Alt + Shift + D - Alternar visibilidade do widget

• Alt + Shift + I - Ativar inspetor de elementos

• Alt + Shift + W - Abrir documentação wiki

• Esc - Fechar widget ou recurso ativo

Integração com DevTools

• Painel dedicado no Chrome DevTools

• Todos os recursos acessíveis via DevTools

• Sincronizado com o widget

================================================================================

COMO INSTALAR

Instalação em Navegadores Chromium (Chrome, Brave, Edge, Opera)

Passo 1: Baixar a Extensão

1. Faça o download do arquivo ZIP da extensão

2. Extraia os arquivos para uma pasta permanente no seu computador

3. IMPORTANTE: Não use pastas temporárias ou a pasta de Downloads

4. RECOMENDADO: Crie uma pasta como C:\Extensions\primes (Windows)

ou ~/Extensions/primes (Mac/Linux)

Passo 2: Abrir Página de Extensões

Google Chrome:

1. Abra o Google Chrome

2. Digite na barra de endereços: chrome://extensions/

3. Ou vá em: Menu (⋮) → Mais Ferramentas → Extensões

Brave:

1. Abra o Brave

2. Digite na barra de endereços: brave://extensions/

3. Ou vá em: Menu (☰) → Extensões

Microsoft Edge:

1. Abra o Microsoft Edge

2. Digite na barra de endereços: edge://extensions/

3. Ou vá em: Menu (⋯) → Extensões

Opera:

1. Abra o Opera

2. Digite na barra de endereços: opera://extensions/

3. Ou vá em: Menu → Extensões → Extensões

Passo 3: Ativar Modo Desenvolvedor

1. Na página de extensões, procure pelo botão "Modo do desenvolvedor"

no canto superior direito

2. Ative o switch/toggle

3. Novos botões aparecerão: "Carregar sem compactação", "Compactar extensão",

"Atualizar"

Passo 4: Carregar a Extensão

1. Clique no botão "Carregar sem compactação" (ou "Load unpacked")

2. Navegue até a pasta onde você extraiu os arquivos

3. Selecione a pasta PRINCIPAL que contém o arquivo manifest.json

4. Clique em "Selecionar pasta" (ou "Abrir")

Passo 5: Verificar Instalação

1. A extensão "Primes - Debug Assistant" deve aparecer na lista

2. Verifique se o status está "Ativado" (toggle azul)

3. O ícone da extensão deve aparecer na barra de ferramentas

Passo 6: Fixar Extensão (Opcional mas Recomendado)

1. Clique no ícone de extensões (peça de quebra-cabeça 🧩) na barra de ferramentas

2. Encontre "Primes - Debug Assistant"

3. Clique no ícone de alfinete 📌 ao lado do nome

4. O ícone da extensão ficará permanentemente visível

Passo 7: Configurar Permissões

1. Vá em chrome://extensions/ (ou equivalente no seu navegador)

2. Encontre "Primes - Debug Assistant"

3. Clique em "Detalhes"

4. Role até "Acesso ao site"

5. Selecione "Em todos os sites"

================================================================================

COMO USAR

Primeira Utilização

1. Visite qualquer página web

2. Clique no ícone da extensão na barra de ferramentas

3. Ou pressione Alt + Shift + D

4. O widget aparecerá como um painel flutuante

5. Selecione seu idioma preferido no dropdown do cabeçalho

Navegação

• Trocar de módulo: Clique nas abas no topo do widget

• Minimizar: Clique no botão de minimizar no cabeçalho

• Mover: Arraste o cabeçalho para reposicionar

• Redimensionar: Arraste o canto inferior direito

• Fechar: Clique no X ou pressione Esc

• Menu contextual: Clique com botão direito no widget

Exportação de Dados

Cada módulo possui botões de exportação que permitem salvar:

• Logs do console (JSON/TXT)

• Dados de rede (formato HAR)

• Relatórios de performance

• Relatórios de acessibilidade

• Relatórios de SEO

• Análises de CSS/JavaScript

• Dados de storage

================================================================================

REQUISITOS DO SISTEMA

Navegadores Compatíveis

Navegador | Versão Mínima | Status

-------------------|---------------|---------------------------

Google Chrome | 88+ | ✅ Totalmente Suportado

Microsoft Edge | 88+ | ✅ Totalmente Suportado

Brave | 1.20+ | ✅ Totalmente Suportado

Opera | 74+ | ✅ Totalmente Suportado

Chromium | 88+ | ✅ Totalmente Suportado

Sistema Operacional

• Windows 7 ou superior

• macOS 10.12 ou superior

• Linux (qualquer distribuição moderna)

• Chrome OS

Hardware Recomendado

• RAM: 4GB mínimo (8GB recomendado)

• Espaço em Disco: 10MB para arquivos da extensão

• Processador: Qualquer processador dual-core moderno

================================================================================

CARACTERÍSTICAS TÉCNICAS

Tecnologia

• Manifest Version: 3 (mais recente)

• Linguagens: JavaScript (ES6+), HTML5, CSS3

• Dependências: Nenhuma (100% vanilla JavaScript)

• Frameworks: Não utiliza frameworks externos

Permissões Necessárias

• storage: Salvar configurações e histórico

• tabs: Interagir com abas do navegador

• activeTab: Acessar conteúdo da página atual

• webNavigation: Rastrear navegação da página

• webRequest: Monitorar requisições de rede

• scripting: Injetar scripts de conteúdo

• debugger: Recursos avançados de debugging

Segurança

• Política de Segurança de Conteúdo (CSP) compatível

• Prevenção de XSS

• Sanitização de entrada

• Comunicação segura entre componentes

• Sem execução de código remoto

• Sem coleta de dados do usuário

Performance

• Carregamento lazy de módulos

• Manipulação eficiente do DOM

• Event handlers com debounce

• Footprint mínimo de memória

• Otimizado para uso contínuo

================================================================================

SOLUÇÃO DE PROBLEMAS

Extensão Não Carrega

• Verifique se a pasta contém o arquivo manifest.json

• Certifique-se de que todos os arquivos foram extraídos corretamente

• Tente recarregar a extensão na página chrome://extensions/

Ícone Não Aparece

• Clique no ícone de quebra-cabeça 🧩 na barra de ferramentas

• Fixe a extensão clicando no alfinete

• Verifique se a extensão está ativada em chrome://extensions/

Widget Não Aparece

• Verifique se a extensão está habilitada

• Recarregue a página (F5)

• Tente clicar no ícone da extensão

• Verifique se as permissões "Em todos os sites" estão concedidas

Recursos Não Funcionam em Certos Sites

• Alguns sites (chrome://, about://, Chrome Web Store) bloqueiam extensões

por segurança

• Sites com Content Security Policy (CSP) restritivo podem limitar

funcionalidades

================================================================================

ATUALIZAÇÕES

Atualização Manual

1. Baixe a nova versão

2. Extraia para a mesma pasta (substitua os arquivos)

3. Vá em chrome://extensions/

4. Clique no botão "Atualizar" (ícone de seta circular no topo)

================================================================================

SUPORTE E DOCUMENTAÇÃO

Documentação Completa

A extensão inclui documentação completa em inglês na pasta docs/:

• README.md: Visão geral do projeto

• INSTALLATION.md: Guia de instalação detalhado

• FEATURES.md: Documentação completa de recursos

• USAGE.md: Guia de uso prático

• ARCHITECTURE.md: Arquitetura técnica

• API.md: Referência da API para desenvolvedores

• CONTRIBUTING.md: Guia de contribuição

• CHANGELOG.md: Histórico de versões

Wiki Integrado

A extensão possui um wiki integrado acessível via:

• Menu de contexto (clique direito no widget) → "Open Wiki"

• Atalho de teclado: Alt + Shift + W

================================================================================

LICENÇA

Este projeto é licenciado sob a Licença MIT - código aberto e gratuito para

uso pessoal e comercial.

================================================================================

DESENVOLVIDO PARA

✅ Desenvolvedores Web (Front-end e Full-stack)

✅ Designers que precisam inspecionar implementações

✅ QA Testers e profissionais de controle de qualidade

✅ Especialistas em SEO

✅ Especialistas em Acessibilidade

✅ Estudantes de desenvolvimento web

✅ Professores e instrutores de programação

================================================================================

Primes Debug Assistant - Ferramenta completa de debugging e análise web

para desenvolvedores profissionais.

Questions and answers

Secure purchase

We guarantee delivery or refund your money.

Ticket support

Team ready to help you whenever you need.

Questions and answers

Ask the seller

Your question is public. Do not share email, phone number or other personal information.

Description

Questions and answers

Questions and answers

Recently viewed

Similar products