JavaScript: alert ou console.log?

Lembro me quando comecei a desenvolver sistemas para web. Um novo universo, uma nova realidade. Não precisa compilar? Era tudo novidade! Porém, com o passar do tempo e consequentemente com o aumento da complexidade dos scripts desenvolvidos, surgiu o questionamento: Como eu "debugo" o meu script (JavaScript)?

A primeira opção a mim apresentada foi o método nativo do JavaScript "alert" e em primeira instância, pensei ter descoberto "O Santo Graal" para depuração de scripts. 

No entanto, notei que o método "alert", não era o suficiente para exibir estruturas mais complexas como o exemplo abaixo:

var produto = { Nome: 'Computer',
                  PrecoUnidade: 1110.25,
                  QuantidadeEstoque: 2
              };

Caso eu passe como parâmetro o objeto "produto", o navegador me exibirá o seguinte resultado (pouco útil):

alert(produto);

Ou seja, para objetos, o método alert() não se demonstra tão útil. E neste momento há quem apele para o uso de "alerts" personalizados para inspecionar o objeto criado:

alert("Nome: '"+produto.Nome+"', Preço: $"+produto.PrecoUnidade);

Neste  ponto, podemos chegar a conclusão de que dependendo da complexidade do objeto criado no JavaScript, o uso de alerts para "depuração" é inviável. E é neste momento em que a tecla "F12" do teclado ganha sentido. 

Na maioria dos navegadores modernos como o Chrome ou Firefox e as mais recentes versões do IE (a partir do 9), ao pressionar a tecla F12, o navegador exibe uma janela chamada comumente de "Developer Tools (Ferramentas de Desenvolvimento)".

Note que que entre as ferramentas disponibilizadas, existe o "Console", em minha opinião, a ferramenta mais poderosa dos browsers modernos. 

A princípio esta ferramenta aparentemente simples não demonstra grande importância, porém ela permite a criação e manipulação de todos os objetos existentes em uma página web em tempo de execução.

Dois fatores fazem que o Console supere de longe o método alert:

1 - Ele é discreto: não ocorre, a menos que o método alert seja invocado, a exibição de janelas no navegador.

2 - Ele é eficiente: além de não haver a necessidade de haver um arquivo JavaScript, ele possui intelisense (dependendo do navegador).

Veja como ficaria nosso exemplo anterior utilizando o método console.log([texto]) no Console do navegador:

var produto = { Nome: 'Computer',
                  PrecoUnidade: 1110.25,
                  QuantidadeEstoque: 2
              };

console.log("Nome: '"+produto.Nome+"', Preço: $"+produto.PrecoUnidade);

produto

Resultado:

Ou seja, tudo ocorre dentro do console sem a necessidade de clicar em botões "OK" ou "Cancelar" como no caso do método "alert()"

Para consultar outros métodos de output, clique aqui.