O vConsole é um painel de depuração leve e extensível, projetado para aplicações web em dispositivos móveis.
Funcionalidades Principais
- Visualização de logs do console
- Monitoramento de requisições de rede
- Execução manual de comandos JavaScript
- Suporte a plugins personalizados
Instalação
Instale via npm ou inclua o scriptt diretamente:
npm install vconsole
Ou adicione o script ao seu HTML:
<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
Exemplo de Uso Básico
Após incluir a biblioteca, instanice o vConsole:
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de Depuração com vConsole</title>
</head>
<body>
<button id="btnRegistrar">Registrar Evento</button>
<button id="btnExibir">Exibir Objeto</button>
<button id="btnErro">Simular Erro</button>
<button id="btnRequisicao">Fazer Requisição</button>
<div id="mensagemFeedback" style="display: none; position: fixed; top: 10px; left: 10px; background: #333; color: #fff; padding: 10px;"></div>
<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
<script>
// Inicializa o vConsole
new VConsole();
// Elementos da interface
const botoes = {
registrar: document.getElementById('btnRegistrar'),
exibir: document.getElementById('btnExibir'),
erro: document.getElementById('btnErro'),
requisicao: document.getElementById('btnRequisicao')
};
const painelMensagem = document.getElementById('mensagemFeedback');
let temporizadorFeedback;
function mostrarMensagem(texto, duracao = 1500) {
clearTimeout(temporizadorFeedback);
painelMensagem.textContent = texto;
painelMensagem.style.display = 'block';
temporizadorFeedback = setTimeout(() => {
painelMensagem.style.display = 'none';
}, duracao);
}
// Manipulador de eventos para registrar diferentes tipos de log
botoes.registrar.addEventListener('click', () => {
const tiposLog = ['log', 'info', 'warn', 'error'];
const tipoAleatorio = tiposLog[Math.floor(Math.random() * tiposLog.length)];
console[tipoAleatorio](`Evento registrado com nível: ${tipoAleatorio}`);
mostrarMensagem(`Log do tipo "${tipoAleatorio}" foi registrado.`);
});
// Exibir um objeto complexo no console
botoes.exibir.addEventListener('click', () => {
const dadosTeste = {
descricao: 'Exemplo de objeto',
valores: [10, 20, 30],
metadados: {
criadoEm: new Date().toISOString(),
versao: '1.0.0'
}
};
console.log('Objeto de demonstração:', dadosTeste);
mostrarMensagem('Objeto complexo foi registrado no console.');
});
// Disparar um erro propositalmente
botoes.erro.addEventListener('click', () => {
try {
const funcaoInexistente = null;
funcaoInexistente();
} catch (excecao) {
console.error('Erro capturado:', excecao.message);
mostrarMensagem('Erro simulado foi registrado.');
}
});
// Realizar uma requisição HTTP simples
botoes.requisicao.addEventListener('click', async () => {
try {
const resposta = await fetch('https://jsonplaceholder.typicode.com/posts/1');
const dados = await resposta.json();
console.log('Dados da requisição:', dados);
mostrarMensagem('Requisição AJAX concluída com sucesso.');
} catch (erro) {
console.error('Falha na requisição:', erro);
mostrarMensagem('Ocorreu um erro na requisição.');
}
});
</script>
</body>
</html>
Ao executar o exemplo, utilize o botão do vConsole (geralmente no canto inferior direito da tela) para visualizar os logs, erros e detalhes de rede capturados.