DataLayer Inspector

About

DataLayer Inspector é uma ferramenta para desenvolvedores e analistas que trabalham com Google Tag Manager (GTM) ou Google Analytics 4 (GA4). Ela lê o array window.dataLayer da aba ativa e exibe todos os eventos em um painel limpo e pesquisável — sem precisar abrir o console.

──────────────────────────────────
 DUAS FORMAS DE INSPECIONAR
──────────────────────────────────

▸ Painel lateral — clique no ícone da extensão ou pressione Ctrl+Shift+L (⌘+Shift+L no Mac) para abrir um painel persistente ao lado de qualquer página. Os eventos são atualizados automaticamente a cada ~1,5 segundos.

▸ Aba DevTools — abra o DevTools (F12) e vá até a aba "DataLayer". Pressione Ctrl+Shift+Y (⌘+Shift+Y no Mac) para ir direto de qualquer página.

──────────────────────────────────
 FUNCIONALIDADES PRINCIPAIS
──────────────────────────────────

• Lista de eventos ao vivo — todos os pushes do dataLayer exibidos em ordem, com atualização automática.
• Busca e filtros — encontre eventos por nome, chave ou valor. O autocomplete sugere nomes de eventos e chaves conforme você digita.
• Aba "Todas as Tags" — visualize todas as chaves únicas presentes em todos os eventos de uma vez, ótimo para auditar schemas de tags.
• Cards de eventos — expanda qualquer evento para ver o payload JSON completo. Objetos aninhados são recolhíveis.
• Copiar para a área de transferência — copie um único evento ou um conjunto de eventos marcados como JSON formatado.
• Atalhos de teclado — abra/feche o painel lateral e vá para o DevTools sem usar o mouse.
• Funciona em qualquer site HTTP ou HTTPS — sem configuração, sem scripts persistentes após fechar o painel.

──────────────────────────────────
 PRIVACIDADE E SEGURANÇA
──────────────────────────────────

DataLayer Inspector é estritamente somente leitura. Ele nunca modifica nenhuma página. Todos os dados ficam no seu navegador — nada é enviado para nenhum servidor, serviço de analytics ou terceiros.

Permissões utilizadas:
• sidePanel — para renderizar a UI do painel lateral.
• scripting — para ler o window.dataLayer da aba ativa.
• tabs — para identificar qual aba está ativa.
• Permissões de host (http://*/*, https://*/*) — exigidas pelo Chrome para que o scripting.executeScript funcione em qualquer página.

──────────────────────────────────
 ATALHOS DE TECLADO
──────────────────────────────────

Ctrl+Shift+L (⌘+Shift+L)  →  Alternar painel lateral (abrir/fechar)
Ctrl+Shift+Y (⌘+Shift+Y)  →  Abrir DevTools e focar a aba DataLayer

Personalize os atalhos em chrome://extensions/shortcuts.

Observação: O Chrome pode não aplicar os atalhos sugeridos caso haja conflito com outra extensão. Se um atalho não funcionar, abra chrome://extensions/shortcuts e defina-o manualmente.

──────────────────────────────────
 REQUISITOS
──────────────────────────────────

Chrome 114 ou superior (Manifest V3).