O documento discute as ferramentas de debugging no Devtools do navegador, especificamente as abas Console e Sources. A aba Console serve para exibir erros, alertas, chamadas Ajax, executar comandos e consultar objetos. A aba Sources permite ver o conteúdo de variáveis e configurar breakpoints para depurar o código.

1. Debugging no
Devtools
Yuri Jacques Seixas - JT Front-End

2. O que é debugging?
Processo de localização e correção de erros
em um script.

3. Como fazer?

4. Aba Console

5. Aba Console: Para que serve?

6. Aba Console: Para que serve?
ERROS

7. Aba Console: Para que serve?
ERROS
ALERTAS DE
JAVASCRIPT

8. Aba Console: Para que serve?
ERROS ALERTAS DE JAVASCRIPT CHAMADAS AJAX

9. Aba Console: Para que serve?
EXECUTAR COMANDOS

10. Aba Console: Para que serve?
Meramente ilustrativo
EXECUTAR SCRIPTS

11. Aba Console: Para que serve?
CONSULTAR OBJETOS

12. DICA DE FUNÇÕES
➔ console.dir()
Exibe uma representação Javascript do
objeto. Se ela for um elemento HTML,
então suas propriedades do DOM são
exibidas.
➔ console.time(“label”)
Inicia um cronômetro, associado a um
nome, que é encerrado com a função
.timeEnd() e exibe o tempo decorrido
entre o início e o fim, em milisegundos.

13. Aba Sources

14. Aba Sources: Para que serve?

15. Aba Sources: Para que serve?
CONTEÚDO DE
VARIÁVEIS

16. Aba Sources: Para que serve?
CONFIGURAÇÃO DE
BREAKPOINTS
CONTEÚDO DE
VARIÁVEIS

17. Aba Sources: Breakpoints

18. Aba Sources: Breakpoints

19. Aba Sources: Breakpoints

20. Aba Sources: Breakpoints

21. Aba Sources: Breakpoints

22. Aba Sources: Breakpoints

23. Aba Sources: Breakpoints

24. DÚVIDAS?