DataLayer Inspector

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).