Documentation 9 min read

Smart Console System

Console

Published: April 21, 2025

Introdução

O Smart Console System é uma biblioteca JavaScript que substitui os métodos padrão do console do navegador, oferecendo uma interface modal personalizada para visualizar logs, executar comandos e interagir com o console de forma mais eficiente. Este sistema fornece funcionalidades avançadas, como histórico de comandos, aliases, snippets, autocompletar (Intellisense), exibição do código fonte de funções, persistência de logs e configurações, além de ferramentas integradas para monitoramento de performance e requisições de rede.

Ao utilizar o Smart Console System, desenvolvedores podem depurar e monitorar aplicações web diretamente no navegador, aproveitando recursos avançados de filtragem, histórico, intellisense, persistência, monitoramento de rede/performance e integração simplificada.

Características Principais

  • Substituição do Console Padrão: Redefine console.log, .error, .warn, .info, .debug, .trace para capturar e exibir logs no modal.
  • Interface Modal Customizável: Interface rica com temas (dark/light), abas para Console, Rede, Performance, Profiler e Configurações.
  • Histórico de Comandos: Mantém e permite navegar pelo histórico de comandos executados (setas cima/baixo).
  • Autocompletar (Intellisense): Sugestões dinâmicas para variáveis globais, propriedades de objetos, aliases e snippets.
  • Aliases e Snippets: Crie atalhos (aliases) para comandos longos e use snippets pré-definidos para estruturas de código comuns.
  • Persistência de Dados: Usa IndexedDB para armazenar logs (console e rede), histórico, aliases e configurações entre sessões.
  • Exportação e Importação: Exporte/importe dados do console (logs, histórico, aliases, config) e dados de rede separadamente via arquivos JSON.
  • Exibição de Código de Funções: Painel opcional que mostra a assinatura e o código fonte de funções referenciadas no input.
  • Monitoramento de Rede: Captura e exibe detalhes de requisições fetch e XMLHttpRequest, permitindo filtrar e inspecionar headers, body, status e duração. Inclui um formulário para executar requisições customizadas.
  • Monitoramento de Performance: Exibe métricas como uso de memória JS, FPS, latência do Event Loop, tempos de carregamento (Page Load, DOMContentLoaded, FCP) e timing de recursos.
  • Profiler de Comandos: Registra o tempo de execução e o delta de memória para cada comando executado no console.
  • Configurações via UI: Ajuste tema, nível de log, auto-limpeza e visibilidade do painel de funções diretamente na aba 'Settings'.

Instalação

Para instalar o Smart Console System, basta incluir o script JavaScript no seu HTML antes do fechamento da tag </body>:

<script src="https://cdn.alphasystem.dev/plugins/smart-console-system/latest/script.js"></script>

Ao incluir o script, o Smart Console System é inicializado automaticamente através de uma IIFE (Immediately Invoked Function Expression). A instância principal e os comandos globais ficam disponíveis através do objeto window.SmartConsole. Não tente instanciar a classe manualmente com new SmartConsoleSystem(), pois ela não é exposta globalmente como construtor.

Configuração

O Smart Console System oferece opções de configuração que podem ser ajustadas pela interface do modal ou programaticamente.

Configurações via Interface (Aba 'Settings'):
  • Theme (theme): Altera o tema visual. Opções: 'dark' (padrão), 'light'.
  • Log Level (logLevel): Nível mínimo de log a ser exibido. Opções: 'all' (padrão), 'trace', 'debug', 'info', 'log', 'warn', 'error'.
  • Auto-Clear (autoClear): Limpa logs automaticamente após 60s de inatividade. Padrão: false.
  • Function Display (showFunctionDisplay): Exibe/oculta o painel com detalhes de funções. Padrão: true.
Configurações/Propriedades Programáticas (via window.SmartConsole.instance):
  • logLimit (Number): Limite de entradas de log no UI (padrão: 250). (Ajuste interno, não recomendado alterar diretamente após init).
  • historyLimit (Number): Limite de comandos no histórico (padrão: 100). (Ajuste interno).
  • prefix (String): Prefixo para execução direta de funções globais (padrão: '@'). (Ajuste interno).
  • aliases (Object): Objeto contendo os aliases definidos. Pode ser modificado programaticamente (window.SmartConsole.instance.aliases['myAlias'] = 'command';) e salvo com saveAliases() (chamado internamente ao usar o comando alias).

Nota: Use a aba 'Settings' para as configurações mais comuns. Para acessar ou modificar outras propriedades programaticamente, utilize window.SmartConsole.instance. Lembre-se que alterar limites como logLimit diretamente pode não ter o efeito esperado sem recarregar ou limpar os logs.

Uso e Integração

Após incluir o script, o Smart Console System está ativo. Interaja da seguinte forma:

  • Abrir/Fechar o Modal: Pressione F1 para alternar a visibilidade. Pressione Esc para fechar se estiver aberto.
  • Navegar pelas Abas: Clique nas abas (Console, Network, Performance, Profiler, Settings) na barra lateral.
  • Executar Comandos (Console): Digite JavaScript no input e pressione Enter. Use Shift+Enter para nova linha.
  • Histórico de Comandos: Use as setas Cima/Baixo no input para navegar pelo histórico.
  • Autocompletar (Intellisense): Sugestões aparecem ao digitar. Use Tab ou Enter (com item selecionado) para completar.
  • Aliases: Crie com alias nome=comando (ex: alias ll=console.log). Remova com alias nome=. Liste com aliases.
  • Snippets: Digite o prefixo de um snippet (ex: func, cl, trycatch) e selecione na intellisense para inserir o bloco de código.
  • Executar Funções Globais: Use o prefixo @ seguido do nome da função (ex: @myGlobalFunction).
  • Exibição de Código de Funções: O painel lateral (se ativo) mostra detalhes da função sendo digitada ou referenciada.
  • Filtrar Logs (Console/Network): Use a barra de busca e os menus dropdown em cada aba para filtrar por texto, tipo/método, status e data.
  • Monitorar Rede: A aba 'Network' exibe requisições. Clique para expandir detalhes. Use o formulário lateral para executar novas requisições.
  • Ver Performance/Profiler: Acesse as abas 'Performance' e 'Profiler' para visualizar as métricas coletadas.
  • Configurações: Ajuste as opções na aba 'Settings' e clique em 'Save Settings'.
  • Exportar/Importar: Use os botões 'Export'/'Import' nas abas 'Console' e 'Network' para salvar/carregar dados.

Acesso programático à instância (para configurações avançadas ou métodos não expostos em window.SmartConsole):

// Acessando a instância interna
const scInstance = window.SmartConsole.instance;

// Exemplo: Acessando a lista de aliases
console.log(scInstance.aliases);

// Exemplo: Modificando um alias programaticamente (requer salvar manualmente se necessário)
scInstance.aliases.tempLog = 'console.warn';
// scInstance.saveAliases(); // O comando 'alias' salva automaticamente

Importante: Lembre-se, a inicialização é automática. Não use new SmartConsoleSystem().

Referência da API

API Global (window.SmartConsole)

  • show(): Abre ou fecha o modal do console.
  • clear(): Limpa os logs da aba 'Console' (UI e opcionalmente DB).
  • clearNetwork(): Limpa os logs da aba 'Network' (UI e opcionalmente DB).
  • exportData(): Inicia o download de um arquivo JSON com dados do console (config, aliases, history, logs).
  • importData(): Abre um seletor de arquivos para importar dados do console de um JSON.
  • exportNetwork(): Inicia o download de um arquivo JSON com dados de rede (network logs).
  • importNetwork(): Abre um seletor de arquivos para importar dados de rede de um JSON.
  • setTheme(theme): Define o tema ('dark' ou 'light') e o aplica. Salva a configuração.
  • setLogLevel(level): Define o nível de log ('all', 'trace', etc.) e o aplica. Salva a configuração.
  • instance: Referência à instância interna da classe SmartConsoleSystem para acesso a métodos e propriedades adicionais.

Métodos Principais da Instância (window.SmartConsole.instance)

  • toggleModal(): (Equivalente a window.SmartConsole.show())
  • clearLogs(): (Equivalente a window.SmartConsole.clear())
  • clearNetworkLogs(): (Equivalente a window.SmartConsole.clearNetwork())
  • executeCommand(cmd): Executa um comando como se tivesse sido digitado no input.
  • log(messages, type): Adiciona uma entrada de log ao console.
  • logNetwork(logEntry): Adiciona uma entrada de log à aba Network.
  • saveSettings(): Salva as configurações atuais (theme, logLevel, etc.) no IndexedDB.
  • loadSettings(): Carrega configurações do IndexedDB.
  • applyTheme(): Aplica o tema atual (instance.theme) à UI.
  • toggleFunctionDisplay(): Aplica a configuração instance.showFunctionDisplay à UI.
  • saveAliases(): Salva o objeto instance.aliases no IndexedDB.
  • loadAliases(): Carrega aliases do IndexedDB para instance.aliases.
  • saveHistory(command): Salva um comando no histórico do DB.
  • loadHistory(): Carrega histórico do DB para instance.history.
  • saveLogEntry(logData): Salva uma entrada de log do console no DB.
  • loadLogs(): Carrega logs do console do DB para a UI.
  • saveNetworkLogEntry(logData): Salva uma entrada de log de rede no DB.
  • loadNetworkLogs(): Carrega logs de rede do DB para a UI.
  • restoreConsole(): Restaura os métodos originais do console do navegador.

Propriedades Principais da Instância (window.SmartConsole.instance)

  • history (Array): Array (em memória) do histórico de comandos recentes.
  • networkLogs (Array): Array (em memória) dos logs de rede recentes.
  • commandProfiles (Array): Array (em memória) dos dados de profiling de comandos.
  • theme (String): Tema atual ('dark' ou 'light'). Modificável.
  • logLevel (String): Nível de log atual. Modificável.
  • autoClear (Boolean): Status da auto-limpeza. Modificável.
  • showFunctionDisplay (Boolean): Status da exibição de detalhes de função. Modificável.
  • aliases (Object): Objeto com os aliases definidos. Modificável.
  • logLimit (Number): Limite de logs na UI (padrão 250).
  • historyLimit (Number): Limite do histórico (padrão 100).
  • prefix (String): Prefixo para executar funções (padrão '@').

Resolução de Problemas

Soluções para problemas comuns:

  • Modal não abre com F1: Verifique se o script foi incluído corretamente no final do <body> e se não há erros de JS na página impedindo a inicialização. Verifique se outro script está capturando a tecla F1.
  • Logs não aparecem: Confirme se o logLevel está em 'all' ou compatível com o tipo de log. Verifique se outro script está sobrescrevendo console.log etc. depois do Smart Console.
  • Aliases não funcionam: Use alias nome=comando. Verifique se o nome do alias não conflita com comandos internos (clear, help, etc.). Use aliases para listar os definidos.
  • Snippets não funcionam: Certifique-se de que a intellisense está aparecendo e que você está selecionando o snippet corretamente (Tab ou Enter).
  • Função com @ não executa: A função deve existir no escopo global (window).
  • Painel de Função não aparece: Verifique se showFunctionDisplay está true (na UI ou via instance.showFunctionDisplay).
  • Intellisense não funciona: Verifique conflitos com outros scripts que manipulam eventos de input.
  • Persistência não funciona: Navegador deve suportar IndexedDB. Verifique se o modo de navegação anônima/privada está desativado, pois ele pode bloquear IndexedDB.
  • Exportar/Importar falha: Verifique erros no console do navegador. Ao importar, use apenas arquivos JSON gerados pela função 'Export'.
  • Configurações (Tema, Nível Log) não salvam: Certifique-se de clicar em 'Save Settings' na aba de configurações. Verifique se IndexedDB está funcional.
  • Aba Network vazia: Verifique se as requisições (fetch/XHR) estão ocorrendo após a inicialização do Smart Console. Algumas extensões de navegador podem interferir.
  • Aba Performance/Profiler vazia: Alguns navegadores podem não suportar todas as APIs de performance (ex: performance.memory). O profiler só mostra dados após comandos serem executados.
  • Erro SmartConsoleSystem is not a constructor: Você tentou usar new SmartConsoleSystem(). A biblioteca inicializa automaticamente. Use window.SmartConsole para interagir.

Exemplos de Código

Exemplos práticos de uso:

Inclusão Básica

<html>
<head>...</head>
<body>
  ...
  <!-- Incluir no final do body -->
  <script src="https://cdn.alphasystem.dev/plugins/smart-console-system/latest/script.js"></script>
</body>
</html>

Interagindo via API Global

// Abrir o modal
window.SmartConsole.show();

// Definir tema claro
window.SmartConsole.setTheme('light');

// Definir nível de log para warnings e erros
window.SmartConsole.setLogLevel('warn');

// Limpar logs do console
window.SmartConsole.clear();

// Limpar logs de rede
window.SmartConsole.clearNetwork();

Executando Comandos Programaticamente (via Instância)

const scInstance = window.SmartConsole.instance;
scInstance.executeCommand('console.log("Comando executado via JS!")');
scInstance.executeCommand('alias mylog=console.info'); // Cria um alias
scInstance.executeCommand('mylog("Logando com alias!")');

Usando Comandos no Modal

Digite diretamente no input do modal (após pressionar F1):

// Criar alias
alias reload=location.reload

// Usar alias
reload

// Listar aliases
aliases

// Usar snippet (digite 'trycatch' e selecione na intellisense)
trycatch

// Executar função global (se existir window.myApp.init)
@myApp.init

// Obter ajuda
help
help alias

Exportando e Importando Dados

// Inicia exportação dos dados do console (abre diálogo de salvar)
window.SmartConsole.exportData();

// Inicia exportação dos logs de rede (abre diálogo de salvar)
window.SmartConsole.exportNetwork();

// Abre diálogo para selecionar arquivo JSON para importar dados do console
window.SmartConsole.importData();

// Abre diálogo para selecionar arquivo JSON para importar logs de rede
window.SmartConsole.importNetwork();

Ajustando Configurações via Instância

const scInstance = window.SmartConsole.instance;

// Desabilitar exibição de código de funções
scInstance.showFunctionDisplay = false;
scInstance.toggleFunctionDisplay(); // Aplica a mudança na UI
scInstance.saveSettings(); // Salva no IndexedDB

// Adicionar um alias programaticamente
scInstance.aliases.showUser = 'console.table(window.currentUser)';
scInstance.saveAliases(); // Salva aliases no IndexedDB

Restaurando o Console Padrão

// Isso removerá a interceptação do Smart Console
window.SmartConsole.instance.restoreConsole();