Debugging your JavaScript

1,276 views
1,194 views

Published on

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,276
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
15
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Debugging your JavaScript

  1. 1. Debugging your JavaScript (Recuso-me a mudar este titulo para português) Sapo Sessions 2010-10-06 Wednesday, October 6, 2010
  2. 2. JavaScript Wednesday, October 6, 2010
  3. 3. Wednesday, October 6, 2010
  4. 4. JavaScript • O porquê desta talk Wednesday, October 6, 2010
  5. 5. JavaScript Wednesday, October 6, 2010
  6. 6. JavaScript • minimizar a frustação Wednesday, October 6, 2010
  7. 7. JavaScript • minimizar a frustação • perceber o problema Wednesday, October 6, 2010
  8. 8. JavaScript • minimizar a frustação • perceber o problema • aumentar a autonomia na clarificação de erros Wednesday, October 6, 2010
  9. 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. 10. No SAPO Wednesday, October 6, 2010
  11. 11. No SAPO • existe um documento de Guidelines de Usabilidade e Qualidade Wednesday, October 6, 2010
  12. 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. 13. No SAPO Wednesday, October 6, 2010
  14. 14. Onde testar? Wednesday, October 6, 2010
  15. 15. Onde testar? • no próprio browser Wednesday, October 6, 2010
  16. 16. Onde testar? • no próprio browser • no correspondente sistema operativo Wednesday, October 6, 2010
  17. 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. 18. Usar VM’s Wednesday, October 6, 2010
  19. 19. Usar VM’s • VirtualBox,VMWare, Windows Virtual PC, Parallels, you name it. Wednesday, October 6, 2010
  20. 20. Usar VM’s • VirtualBox,VMWare, Windows Virtual PC, Parallels, you name it. • uma VM por “browser age” Wednesday, October 6, 2010
  21. 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. 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. 23. JavaScript Code Wednesday, October 6, 2010
  24. 24. JavaScript Code • não usar código minificado para desenvolvimento Wednesday, October 6, 2010
  25. 25. JavaScript Code • não usar código minificado para desenvolvimento • uma instrução por linha Wednesday, October 6, 2010
  26. 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. 27. JavaScript Code • não usar inline attributes, ex: onclick Wednesday, October 6, 2010
  28. 28. JavaScript Code • não usar inline attributes, ex: onclick • se possível, manter o window limpo Wednesday, October 6, 2010
  29. 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. 30. JavaScript Code • usar minifiers/compressors Wednesday, October 6, 2010
  31. 31. JavaScript Code • usar minifiers/compressors • nomes de variáveis que façam sentido Wednesday, October 6, 2010
  32. 32. JavaScript Code • usar minifiers/compressors • nomes de variáveis que façam sentido • não compliquem Wednesday, October 6, 2010
  33. 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. 34. Minifiers Wednesday, October 6, 2010
  35. 35. Minifiers • YUIC - http://refresh-sf.com/yui/ Wednesday, October 6, 2010
  36. 36. Minifiers • YUIC • Google Compiler - http://5ujb.sl.pt Wednesday, October 6, 2010
  37. 37. Minifiers • YUIC • Google Compiler • JSMin - http://5ujf.sl.pt Wednesday, October 6, 2010
  38. 38. Minifiers • YUIC • Google Compiler • JSMin • Packer - http://jscompress.com/ Wednesday, October 6, 2010
  39. 39. Minifiers • YUIC • Google Compiler • JSMin • Packer • e muito mais... Wednesday, October 6, 2010
  40. 40. JSLint http://www.jslint.com/ Wednesday, October 6, 2010
  41. 41. JSLint • aviso: “JSLint will hurt your feelings” Wednesday, October 6, 2010
  42. 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. 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. 44. Hardcore Debugging Wednesday, October 6, 2010
  45. 45. Hardcore Debugging • window.alert to the rescue! Wednesday, October 6, 2010
  46. 46. Hardcore Debugging • window.alert to the rescue! • comentar blocos de código para descobrir erros de sintaxe Wednesday, October 6, 2010
  47. 47. Demo Time! Wednesday, October 6, 2010
  48. 48. Firefox • Firebug Wednesday, October 6, 2010
  49. 49. Firefox • Firebug • JavaScript console Wednesday, October 6, 2010
  50. 50. Firefox • Firebug • JavaScript Console • HTML / CSS Inspector Wednesday, October 6, 2010
  51. 51. Firefox • Firebug • JavaScript Console • HTML / CSS Inspector • recursos carregados pela página Wednesday, October 6, 2010
  52. 52. Firefox • Firebug • JavaScript Console • HTML / CSS Inspector • recursos carregados pela página • DOM & Script Tab Wednesday, October 6, 2010
  53. 53. Demo Time! Wednesday, October 6, 2010
  54. 54. Chrome / Safari • Webkit Inspector Wednesday, October 6, 2010
  55. 55. Chrome / Safari • Webkit Inspector • Elements Tab Wednesday, October 6, 2010
  56. 56. Chrome / Safari • Webkit Inspector • Elements Tab • Resources Wednesday, October 6, 2010
  57. 57. Chrome / Safari • Webkit Inspector • Elements Tab • Resources • Console Wednesday, October 6, 2010
  58. 58. Chrome / Safari • Webkit Inspector • Elements Tab • Resources • Console • e mais! Wednesday, October 6, 2010
  59. 59. Demo Time! Wednesday, October 6, 2010
  60. 60. IE 6 / 7 • Developer Toolbar Wednesday, October 6, 2010
  61. 61. IE 6 / 7 • Developer Toolbar • HTML Inspector Wednesday, October 6, 2010
  62. 62. IE 6 / 7 • Developer Toolbar • HTML Inspector • CSS Inspector Wednesday, October 6, 2010
  63. 63. IE 6 / 7 • Developer Toolbar • HTML Inspector • CSS Inspector • e uns extras que dão jeito... no contexto :) Wednesday, October 6, 2010
  64. 64. Demo Time! Wednesday, October 6, 2010
  65. 65. IE 8 / 9* • Developer Tools Wednesday, October 6, 2010
  66. 66. IE 8 / 9* • Developer Tools • HTML Inspector Wednesday, October 6, 2010
  67. 67. IE 8 / 9* • Developer Tools • HTML Inspector • CSS Inspector Wednesday, October 6, 2010
  68. 68. IE 8 / 9* • Developer Tools • HTML Inspector • CSS Inspector • Script Inspector Wednesday, October 6, 2010
  69. 69. IE 8 / 9* • Developer Tools • HTML Inspector • CSS Inspector • Script Inspector • Profiler Wednesday, October 6, 2010
  70. 70. Demo Time! Wednesday, October 6, 2010
  71. 71. Opera • Opera Dragonfly Wednesday, October 6, 2010
  72. 72. Opera • Opera Dragonfly • DOM Wednesday, October 6, 2010
  73. 73. Opera • Opera Dragonfly • DOM • Scripts Wednesday, October 6, 2010
  74. 74. Opera • Opera Dragonfly • DOM • Scripts • Network Wednesday, October 6, 2010
  75. 75. Opera • Opera Dragonfly • DOM • Scripts • Network • e mais extras... Wednesday, October 6, 2010
  76. 76. Demo Time! Wednesday, October 6, 2010
  77. 77. Wrap Up Perguntas? Wednesday, October 6, 2010
  78. 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. 79. Wednesday, October 6, 2010
  80. 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

×