O código está sujeito a erros. Muito provavelmente você cometerá erros… Ah, do que estou falando? Você com certeza cometerá erros, pelo menos se for um humano, não um robô.
Mas no navegador, os usuários não veem erros por padrão. Então, se algo der errado no script, não veremos o que está quebrado e não poderemos consertar.
Para ver erros e obter muitas outras informações úteis sobre scripts, “ferramentas de desenvolvedor” foram incorporadas aos navegadores.
A maioria dos desenvolvedores prefere o Chrome ou Firefox para desenvolvimento porque esses navegadores têm as melhores ferramentas para desenvolvedores. Outros navegadores também fornecem ferramentas para desenvolvedores, às vezes com recursos especiais, mas geralmente estão tentando “atualizar” o Chrome ou o Firefox. Portanto, a maioria dos desenvolvedores tem um navegador “favorito” e muda para outros se o problema for específico do navegador.
As ferramentas do desenvolvedor são potentes; eles têm muitos recursos. Para começar, aprenderemos como abri-los, observar erros e executar comandos JavaScript.
Abra a página bug.html.
Há um erro no código JavaScript. Ele está oculto aos olhos de visitantes regulares, então vamos abrir as ferramentas do desenvolvedor para vê-lo.
Pressione F12 ou, se estiver no Mac, Cmd + Opt + J .
As ferramentas do desenvolvedor serão abertas na guia Console por padrão.
Parece mais ou menos assim:
A aparência exata das ferramentas do desenvolvedor depende da sua versão do Chrome. Ele muda de tempos em tempos, mas deve ser semelhante.
Aqui podemos ver a mensagem de erro em vermelho. Neste caso, o script contém um comando “lalala” desconhecido.
À direita, há um link clicável para a fonte bug.html:12 com o número da linha onde ocorreu o erro.
Abaixo da mensagem de erro, há um símbolo > azul. Marca uma “linha de comando” onde podemos digitar comandos JavaScript. Pressione Enter para executá-los.
Agora podemos ver erros, e isso é o suficiente para começar. Voltaremos às ferramentas do desenvolvedor mais tarde e abordaremos a depuração com mais detalhes no capítulo Depuração no navegador.
Entrada multilinha
Normalmente, quando colocamos uma linha de código no console e pressionamos Enter , ela é executada.
Para inserir várias linhas, pressione Shift + Enter . Desta forma é possível inserir longos fragmentos de código JavaScript.
A maioria dos outros navegadores usa F12 para abrir ferramentas de desenvolvedor.
A aparência deles é bastante semelhante. Depois de saber como usar uma dessas ferramentas (você pode começar com o Chrome), você poderá facilmente mudar para outra.
Safari (navegador Mac, não compatível com Windows/Linux) é um pouco especial aqui. Precisamos ativar o “menu Desenvolver” primeiro.
Abra Preferências e vá para o painel “Avançado”. Há uma caixa de seleção na parte inferior:
Agora Cmd + Opt + C pode alternar o console. Além disso, observe que o novo item do menu superior chamado “Desenvolver” apareceu. Possui muitos comandos e opções.
As ferramentas do desenvolvedor nos permitem ver erros, executar comandos, examinar variáveis e muito mais.
Eles podem ser abertos com F12 para a maioria dos navegadores Windows. O Chrome para Mac precisa de Cmd + Opt + J , Safari: Cmd + Opt + C (é necessário ativar primeiro).
Agora temos o ambiente pronto. Na próxima seção, chegaremos ao JavaScript.