T17_LM3: Erros/Debug (2013-2014)

470 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
470
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
13
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

T17_LM3: Erros/Debug (2013-2014)

  1. 1. JavaScript: Erros Carlos Santos LabMM 3 - NTC - DeCA - UA Aula 16, 29-11-2013 (Capítulo 4 do livro Beginning JavaScript)
  2. 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. 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. 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. 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. 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. 7. #4. Falta abrir/fechar os parêntesis! ) • onde está o erro? if (myVariable + 12) / myOtherVariable < myString.length)
  8. 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. 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. 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. 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. 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. 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. 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. 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. 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. 17. debugging: principais funcionalidades • Breakpoints • Watches • Seguir o código passo-a-passo • Consola • Stack Window

×