Este documento discute os erros mais comuns em JavaScript e estratégias para depuração. Ele lista sete tipos de erros como variáveis não definidas, sensibilidade a maiúsculas e minúsculas, falta de fechar chaves, falta de abrir/fechar parênteses, usar = em vez de ==, usar métodos como propriedades e vice-versa, e falta de sinais de concatenação de strings. Também discute como prevenir erros, usar try/catch, e ferramentas de depuração como breakpoints e watches.

1. JavaScript: Erros
Carlos Santos
LabMM 3 - NTC - DeCA - UA
Aula 16, 29-11-2013
(Capítulo 4 do livro Beginning JavaScript)

2. O meu código não funciona. O que fazer?
• Erros:
• um simples erro pode implicar que todo o código JavaScript não funcione!
• É necessário:
• aprender a detectar os erros para posteriormente os corrigir;
• para isso é importante:
• conhecer os erros mais típicos,
• dominar as ferramentas que nos podem auxiliar na tarefa de debug.

3. #1. Variáveis não definidas
• definição de variáveis
abc = 23;!
var abc = 23;!
• o que acontece se se utilizar a variável numa instrução sem que esta tenha
sido previamente definida? Exemplos:
alert (abc);!
!
function foo(parametrOne) {!
alert(parameterOne); }

4. #2. Sensibilidade ao case
• Um erro muito comum e muitas vezes difícil de detectar sem ajuda!
• Onde estão os erros?
var myName = “Jeremy”;!
If (myName == “jeremy”)!
alert(myName.toUppercase());

5. #3. Falta fechar uma chaveta! }
• onde está o erro?
function myFunction() {!
x = 1;!
y = 2;!
if (x <= y) {!
if (x == y) {!
alert(“x equals y”); }!
}!
myFunction();!

6. #3. Falta fechar uma chaveta! }
• mais fácil com indentação?
function myFunction()!
{!
x = 1;!
y = 2;!
if (x <= y)!
{!
if (x == y)!
{!
alert(“x equals y”);!
}!
}!
myFunction();

7. #4. Falta abrir/fechar os parêntesis! )
• onde está o erro?
if (myVariable + 12) / myOtherVariable < myString.length)

8. #5. Usar = em vez de ==
• onde está o erro?
var myNumber = 99;!
if (myNumber = 101)!
{!
alert(“myNumber is 101”);!
}!
else!
{!
alert(“myNumber is “ + myNumber);!
}!

9. #6. Usar um método como propriedade e viceversa
• onde estão os erros?
var nowDate = new Date();!
alert(nowDate.getMonth);!
!
var myString = “Hello, World!”;!
alert(myString.length());!
!

10. #6. Usar um método como propriedade e viceversa
• É muito importante saber distinguir métodos e propriedades
var nowDate = new Date();!
alert(nowDate.getMonth());!
!
var myString = “Hello, World!”;!
alert(myString.length);!
!

11. #6. Usar um método como propriedade e viceversa
• Um caso “estranho” e que pode parecer quebrar a regra.
function foo()!
{!
alert(“I’m in foo()!”).!
}!
!
function bar(fpToCall)!
{!
alert(“Calling passed function”).!
fpToCall();!
}!
!
bar(foo);

12. #7. Faltar sinal de “+” na concatenação de strings
• Onde está o erro?
var myName = “Jeremy”;
var myString = “Hello”;
var myOtherString = “World”;
myString = myName + “ said “ + myString + “ “ myOtherString;!
alert(myString);!

13. #7. Faltar sinal de “+” na concatenação de strings
• Onde está o erro?
var myName = “Jeremy”;
var myString = “Hello”;
var myOtherString = “World”;
myString = myName+“ said “+myString + “ “ + myOtherString;!
alert(myString);!

14. Prevenir erros
• Experimentar o código em todos os browsers que devem ser suportados
pela aplicação:
• IE 6???
• IE 7 != IE 8 != IE 9… (e mesmo os modos de para emular os browsers não
são exatamente iguais...)
• Safari... o novo IE? :(
• Validar toda a informação introduzida pelo utilizador
• Mesmo assim, podem acontecer situações imprevisíveis que, por exemplo,
podem depender das condições de rede de um determinado utilizador...

15. try...catch
• funcionam em conjunto e permite intersectar erros de execução e lidar
com eles de forma apropriada.
<script type=”text/javascript”>!
try
{!
alert(‘This is code inside the try clause’);!
alert(‘No Errors so catch code will not execute’);!
}!
catch(exception)!
{!
alert(“The error is “ + exception.message);!
}!
</script>

16. debugging
• sem uma ferramenta de debug apropriada, a melhor estratégia é utilizar
métodos para gerar mensagens a informar, por exemplo, do valor de
determinadas variáveis (alerts ou console.log).
• o alert() também pode ser utilizado para ter a certeza se um determinado
script ou condição está a ser executado.
• felizmente não faltam ferramentas adequadas nos browsers atuais:
• Firefox firebug
• Safari Web Inspector
• Chrome developer tools
• Opera Dragonfly
• IE developer tools

17. debugging: principais funcionalidades
• Breakpoints
• Watches
• Seguir o código passo-a-passo
• Consola
• Stack Window