Designers e desenvolvedores constantemente precisam debugar seus sistemas para encontrar erros ou relatar informações para outros desenvolvedores da equipe. Para otimizar o trabalho do profissional web, o Console do navegador de sua preferência permite adicionar diversas opções e comandos.
Se você digitar apenas console, no Console, você poderá ver a gama de Métodos que o Objeto tem disponível.
Neste tutorial, mostraremos alguns métodos e como utilizá-los de forma a permitir uma finalização que ajude o designer e desenvolvedor a obter respostas mais ideais para o problema. Você pode testar os comandos aqui mesmo, basta pressionar CTRL+SHIFT+I, ou simplesmente clicar com o botão direito e inspecionar elemento. Ao clicar na aba console, você poderá digitar os comandos e visualizar os resultados.
O método log é o mais básico e permite que você adicione uma
console.log("Oi Mundo");
Porém o simples log de texto não necessariamente pode ser o ideal. Você pode, se assim precisar, adicionar alguma informação visual para que o log seja lido de forma mais intuitiva. Para isso, basta usar uma string de formato %c e instruções CSS. O exemplo abaixo, colocará o texto branco, negrito e com sombra:
console.log('%c Oi mundo', 'color:white; font-weight:bold; text-shadow: 0 0 1em black;font-size: 72px');
Com isso é possível até mesmo adicionar imagens, através do background-image:
console.log('%c ', 'font-size: 100px; background: url(http://cdn.nyanit.com/nyan2.gif) no-repeat;');
Passando para um ponto mais sério, você também pode visualizar no console objetos diferentes de Strings. É possível, por exemplo, visualizar um objeto JSON, o que é algo muito funcional para visualizar o resultado de métodos AJAX.
console.log({teste: 'texto de teste', valor: 22})
No caso de você colocar um JSON ou um array, você poderá estender e visualizar os detalhes desse objeto.
Erros e Alertas
Além do log, o Console também tem objetos que servem como point-breaks para testes e validações. Os métodos error() e warn() permite que você adicione informações de forma mais relevante e alertiva. Esses dois métodos também permitem usar a string de formato %c .
console.error("Problema Sério");
console.warn("Problema Leve");
Você deve notar que, ao lado da linha onde é demonstrada o alerta/erro, há uma palavra anonymous, entre parênteses. Essa informação define qual o método relacionado com a origem do erro. Por exemplo, se o erro ou alerta ocorrer dentro de um método, será mostrado o método onde ocorreu o erro.
var teste = function(){console.error("Oi")};
teste();
Essa informação é extremamente útil para auxiliar o desenvolvedor a saber qual a origem do problema.
Identação
Outra opção muito útil para definir detalhes no log é a identação. Na verdade, é uma organização em grupo e subgrupos das informações. Dessa forma, o desenvolvedor pode apresentar dados mais organizados para o testador.
console.group("Frases");
console.group("Saudações");
console.log("Oi!");
console.log("Olá!");
console.groupEnd();
console.group("Despedidas");
console.log("Tchau!");
console.log("Até mais.");
console.groupEnd();
Tabelas
O método table() permite você mostrar informações de dados em uma tabela. Ele é um método muito útil para ler objetos, JSON e vetores. De forma automática, esse método irá reconhecer os dados e organizá-los nessa tabela. Se por acaso você passar um array, as chaves mostradas serão apenas os índices numéricos.
console.table({'Dia': '10:00', 'Noite': '22:00'});
Calcular Tempo
O cálculo de tempo é fundamental para medir performance. O método time() permite usar uma etiqueta para poder iniciar e finalizar uma contagem de tempo. Para isso, basta seguir o exemplo abaixo:
console.time("calcularTempo");
for(var i; i < 100; i++){
}
console.timeEnd("calcularTempo");
Esse tempo será calculado baseado no tempo que a máquina cliente demora para realizar determinada ação, por isso, esse valor pode variar de computador para computador.
Strings de Substituição
Além do %c, usado para CSS, você pode usar outras Strings com objetivos específicos.
| String | Descrição |
| %o or %O | Exibe o objeto e permite você visualizar o objeto ao clicar nele. |
| %d or %i | Exibe um inteiro. |
| %s | Apenas uma string. |
| %f | Exibe um ponto flutuante |
Dependendo do navegador (como o Firefox), você pode ter opções adicionais de máscara quanto aos valores. Para saber os detalhes, você precisa verificar na documentação do navegador, mas são muito similares as Strings usadas no console em C e no Java.
Por exemplo:
console.log("O valor da compra de %d %s é de %f, com os dados %o", 3,'carros',38500.30,{'carro':'fusca'});
Concluindo
O uso apropriado do console do navegador pode ajudar os desenvolvedores a fazerem testes e obterem resultados mais fiéis destes. Além disso, pode exibir mensagens importantes para alertar um usuário leigo a não mexer nessas opções (como faz o Facebook). De qualquer forma, o conhecimento das opções do console são fundamentais para qualquer profissional web que trabalha com front-end.
