Sapo Session - 2010-10-06 Boas práticas, ferramentas de debug, minifiers e validadores de código javascript no browser

1. Debugging your
JavaScript
(Recuso-me a mudar este titulo para português)
Sapo Sessions
2010-10-06
Wednesday, October 6, 2010

2. JavaScript
Wednesday, October 6, 2010

3. Wednesday, October 6, 2010

4. JavaScript
• O porquê desta talk
Wednesday, October 6, 2010

5. JavaScript
Wednesday, October 6, 2010

6. JavaScript
• minimizar a frustação
Wednesday, October 6, 2010

7. JavaScript
• minimizar a frustação
• perceber o problema
Wednesday, October 6, 2010

8. JavaScript
• minimizar a frustação
• perceber o problema
• aumentar a autonomia na clarificação de
erros
Wednesday, October 6, 2010

9. JavaScript
• minimizar a frustação
• perceber o problema
• aumentar a autonomia na clarificação de
erros
• ... dado nem sempre termos as ferramentas
para dar a ajuda certa
Wednesday, October 6, 2010

10. No SAPO
Wednesday, October 6, 2010

11. No SAPO
• existe um documento de Guidelines de
Usabilidade e Qualidade
Wednesday, October 6, 2010

12. No SAPO
• existe um documento de Guidelines de
Usabilidade e Qualidade
• define, entre muitas outras, as
compatibilidades com os browsers que os
sites do SAPO devem ter
Wednesday, October 6, 2010

13. No SAPO
Wednesday, October 6, 2010

14. Onde testar?
Wednesday, October 6, 2010

15. Onde testar?
• no próprio browser
Wednesday, October 6, 2010

16. Onde testar?
• no próprio browser
• no correspondente sistema operativo
Wednesday, October 6, 2010

17. Onde testar?
• no próprio browser
• no correspondente sistema operativo
• num ambiente o mais aproximado possível
do utilizador final
Wednesday, October 6, 2010

18. Usar VM’s
Wednesday, October 6, 2010

19. Usar VM’s
• VirtualBox,VMWare, Windows Virtual PC,
Parallels, you name it.
Wednesday, October 6, 2010

20. Usar VM’s
• VirtualBox,VMWare, Windows Virtual PC,
Parallels, you name it.
• uma VM por “browser age”
Wednesday, October 6, 2010

21. Usar VM’s
• VirtualBox,VMWare, Windows Virtual PC,
Parallels, you name it.
• uma VM por “browser age”
• ex:VM IE6 + FF3 + Safari 4 + etc
Wednesday, October 6, 2010

22. Usar VM’s
• VirtualBox,VMWare, Windows Virtual PC,
Parallels, you name it.
• uma VM por “browser age”
• ex:VM IE6 + FF3 + Safari 4 + etc
• ex2:VM IE7 + FF3.5 + Safari 5 + etc
Wednesday, October 6, 2010

23. JavaScript Code
Wednesday, October 6, 2010

24. JavaScript Code
• não usar código minificado para
desenvolvimento
Wednesday, October 6, 2010

25. JavaScript Code
• não usar código minificado para
desenvolvimento
• uma instrução por linha
Wednesday, October 6, 2010

26. JavaScript Code
• não usar código minificado para
desenvolvimento
• uma instrução por linha
• seguir um coding standard
Wednesday, October 6, 2010

27. JavaScript Code
• não usar inline attributes, ex: onclick
Wednesday, October 6, 2010

28. JavaScript Code
• não usar inline attributes, ex: onclick
• se possível, manter o window limpo
Wednesday, October 6, 2010

29. JavaScript Code
• não usar inline attributes, ex: onclick
• se possível, manter o window limpo
• debug flags no código
Wednesday, October 6, 2010

30. JavaScript Code
• usar minifiers/compressors
Wednesday, October 6, 2010

31. JavaScript Code
• usar minifiers/compressors
• nomes de variáveis que façam sentido
Wednesday, October 6, 2010

32. JavaScript Code
• usar minifiers/compressors
• nomes de variáveis que façam sentido
• não compliquem
Wednesday, October 6, 2010

33. JavaScript Code
• Usar minifiers/compressors
• nomes de variáveis que façam sentido
• não compliquem
• não abusem do DOM que ele não gosta
Wednesday, October 6, 2010

34. Minifiers
Wednesday, October 6, 2010

35. Minifiers
• YUIC - http://refresh-sf.com/yui/
Wednesday, October 6, 2010

36. Minifiers
• YUIC
• Google Compiler - http://5ujb.sl.pt
Wednesday, October 6, 2010

37. Minifiers
• YUIC
• Google Compiler
• JSMin - http://5ujf.sl.pt
Wednesday, October 6, 2010

38. Minifiers
• YUIC
• Google Compiler
• JSMin
• Packer - http://jscompress.com/
Wednesday, October 6, 2010

39. Minifiers
• YUIC
• Google Compiler
• JSMin
• Packer
• e muito mais...
Wednesday, October 6, 2010

40. JSLint
http://www.jslint.com/
Wednesday, October 6, 2010

41. JSLint
• aviso: “JSLint will hurt your feelings”
Wednesday, October 6, 2010

42. JSLint
• aviso: “JSLint will hurt your feelings”
• é um bom desafio criar código que seja
warning free no JSLint
Wednesday, October 6, 2010

43. JSLint
• aviso: “JSLint will hurt your feelings”
• é um bom desafio criar código que seja
warning free no JSLint
• a boa notícia é que há warnings que podem
“ignorar”
Wednesday, October 6, 2010

44. Hardcore Debugging
Wednesday, October 6, 2010

45. Hardcore Debugging
• window.alert to the rescue!
Wednesday, October 6, 2010

46. Hardcore Debugging
• window.alert to the rescue!
• comentar blocos de código para descobrir
erros de sintaxe
Wednesday, October 6, 2010

47. Demo Time!
Wednesday, October 6, 2010

48. Firefox
• Firebug
Wednesday, October 6, 2010

49. Firefox
• Firebug
• JavaScript console
Wednesday, October 6, 2010

50. Firefox
• Firebug
• JavaScript Console
• HTML / CSS Inspector
Wednesday, October 6, 2010

51. Firefox
• Firebug
• JavaScript Console
• HTML / CSS Inspector
• recursos carregados pela página
Wednesday, October 6, 2010

52. Firefox
• Firebug
• JavaScript Console
• HTML / CSS Inspector
• recursos carregados pela página
• DOM & Script Tab
Wednesday, October 6, 2010

53. Demo Time!
Wednesday, October 6, 2010

54. Chrome / Safari
• Webkit Inspector
Wednesday, October 6, 2010

55. Chrome / Safari
• Webkit Inspector
• Elements Tab
Wednesday, October 6, 2010

56. Chrome / Safari
• Webkit Inspector
• Elements Tab
• Resources
Wednesday, October 6, 2010

57. Chrome / Safari
• Webkit Inspector
• Elements Tab
• Resources
• Console
Wednesday, October 6, 2010

58. Chrome / Safari
• Webkit Inspector
• Elements Tab
• Resources
• Console
• e mais!
Wednesday, October 6, 2010

59. Demo Time!
Wednesday, October 6, 2010

60. IE 6 / 7
• Developer Toolbar
Wednesday, October 6, 2010

61. IE 6 / 7
• Developer Toolbar
• HTML Inspector
Wednesday, October 6, 2010

62. IE 6 / 7
• Developer Toolbar
• HTML Inspector
• CSS Inspector
Wednesday, October 6, 2010

63. IE 6 / 7
• Developer Toolbar
• HTML Inspector
• CSS Inspector
• e uns extras que dão jeito... no
contexto :)
Wednesday, October 6, 2010

64. Demo Time!
Wednesday, October 6, 2010

65. IE 8 / 9*
• Developer Tools
Wednesday, October 6, 2010

66. IE 8 / 9*
• Developer Tools
• HTML Inspector
Wednesday, October 6, 2010

67. IE 8 / 9*
• Developer Tools
• HTML Inspector
• CSS Inspector
Wednesday, October 6, 2010

68. IE 8 / 9*
• Developer Tools
• HTML Inspector
• CSS Inspector
• Script Inspector
Wednesday, October 6, 2010

69. IE 8 / 9*
• Developer Tools
• HTML Inspector
• CSS Inspector
• Script Inspector
• Profiler
Wednesday, October 6, 2010

70. Demo Time!
Wednesday, October 6, 2010

71. Opera
• Opera Dragonfly
Wednesday, October 6, 2010

72. Opera
• Opera Dragonfly
• DOM
Wednesday, October 6, 2010

73. Opera
• Opera Dragonfly
• DOM
• Scripts
Wednesday, October 6, 2010

74. Opera
• Opera Dragonfly
• DOM
• Scripts
• Network
Wednesday, October 6, 2010

75. Opera
• Opera Dragonfly
• DOM
• Scripts
• Network
• e mais extras...
Wednesday, October 6, 2010

76. Demo Time!
Wednesday, October 6, 2010

77. Wrap Up
Perguntas?
Wednesday, October 6, 2010

78. Diogo Antunes
LibSAPO.js - http://js.sapo.pt
twitter: @dicode
im: diogoantunes@sapo.pt
mail: diogo.j.antunes@co.sapo.pt
zombie blog: http://dicode.org
Wednesday, October 6, 2010

79. Wednesday, October 6, 2010

80. Credits This work is licensed under a Creative
Commons Attribution-NonCommercial-
ShareAlike 3.0 Unported License.
slide 3: @pedro_correia
slide 5: http://commons.wikimedia.org/wiki/File:Bug.png
slide 10: @sapo
slide 14: http://willscullypower.files.wordpress.com/2009/11/testing.jpg
slide 18: http://dl.maximumpc.com/galleries/osretro/OSes.png
slide 23: http://hazel8500.files.wordpress.com/2010/02/ninja.jpg
slide 44: http://llvm.org/releases/2.4/docs/img/Debugging.gif
slide 79: http://icanhascheezburger.wordpress.com/files/2009/08/funny-pictures-cat-loves-coffee.jpg
Wednesday, October 6, 2010