debugging your javascript
DESCRIPTION
Sapo Session - 2010-10-06 Boas práticas, ferramentas de debug, minifiers e validadores de código javascript no browserTRANSCRIPT
![Page 1: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/1.jpg)
Debugging your JavaScript
(Recuso-me a mudar este titulo para português)
Sapo Sessions2010-10-06
Wednesday, October 6, 2010
![Page 2: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/2.jpg)
JavaScript
Wednesday, October 6, 2010
![Page 3: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/3.jpg)
Wednesday, October 6, 2010
![Page 4: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/4.jpg)
JavaScript
• O porquê desta talk
Wednesday, October 6, 2010
![Page 5: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/5.jpg)
JavaScript
Wednesday, October 6, 2010
![Page 6: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/6.jpg)
JavaScript
• minimizar a frustação
Wednesday, October 6, 2010
![Page 7: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/7.jpg)
JavaScript
• minimizar a frustação
• perceber o problema
Wednesday, October 6, 2010
![Page 8: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/8.jpg)
JavaScript
• minimizar a frustação
• perceber o problema
• aumentar a autonomia na clarificação de erros
Wednesday, October 6, 2010
![Page 9: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/9.jpg)
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
![Page 10: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/10.jpg)
No SAPO
Wednesday, October 6, 2010
![Page 11: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/11.jpg)
No SAPO
• existe um documento de Guidelines de Usabilidade e Qualidade
Wednesday, October 6, 2010
![Page 12: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/12.jpg)
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
![Page 13: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/13.jpg)
No SAPO
Wednesday, October 6, 2010
![Page 14: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/14.jpg)
Onde testar?
Wednesday, October 6, 2010
![Page 15: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/15.jpg)
Onde testar?
• no próprio browser
Wednesday, October 6, 2010
![Page 16: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/16.jpg)
Onde testar?
• no próprio browser
• no correspondente sistema operativo
Wednesday, October 6, 2010
![Page 17: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/17.jpg)
Onde testar?
• no próprio browser
• no correspondente sistema operativo
• num ambiente o mais aproximado possível do utilizador final
Wednesday, October 6, 2010
![Page 18: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/18.jpg)
Usar VM’s
Wednesday, October 6, 2010
![Page 19: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/19.jpg)
Usar VM’s
• VirtualBox, VMWare, Windows Virtual PC, Parallels, you name it.
Wednesday, October 6, 2010
![Page 20: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/20.jpg)
Usar VM’s
• VirtualBox, VMWare, Windows Virtual PC, Parallels, you name it.
• uma VM por “browser age”
Wednesday, October 6, 2010
![Page 21: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/21.jpg)
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
![Page 22: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/22.jpg)
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
![Page 23: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/23.jpg)
JavaScript Code
Wednesday, October 6, 2010
![Page 24: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/24.jpg)
JavaScript Code
• não usar código minificado para desenvolvimento
Wednesday, October 6, 2010
![Page 25: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/25.jpg)
JavaScript Code
• não usar código minificado para desenvolvimento
• uma instrução por linha
Wednesday, October 6, 2010
![Page 26: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/26.jpg)
JavaScript Code
• não usar código minificado para desenvolvimento
• uma instrução por linha
• seguir um coding standard
Wednesday, October 6, 2010
![Page 27: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/27.jpg)
JavaScript Code
• não usar inline attributes, ex: onclick
Wednesday, October 6, 2010
![Page 28: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/28.jpg)
JavaScript Code
• não usar inline attributes, ex: onclick
• se possível, manter o window limpo
Wednesday, October 6, 2010
![Page 29: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/29.jpg)
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
![Page 30: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/30.jpg)
JavaScript Code
• usar minifiers/compressors
Wednesday, October 6, 2010
![Page 31: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/31.jpg)
JavaScript Code
• usar minifiers/compressors
• nomes de variáveis que façam sentido
Wednesday, October 6, 2010
![Page 32: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/32.jpg)
JavaScript Code
• usar minifiers/compressors
• nomes de variáveis que façam sentido
• não compliquem
Wednesday, October 6, 2010
![Page 33: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/33.jpg)
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
![Page 34: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/34.jpg)
Minifiers
Wednesday, October 6, 2010
![Page 35: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/35.jpg)
Minifiers
• YUIC - http://refresh-sf.com/yui/
Wednesday, October 6, 2010
![Page 36: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/36.jpg)
Minifiers
• YUIC
• Google Compiler - http://5ujb.sl.pt
Wednesday, October 6, 2010
![Page 37: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/37.jpg)
Minifiers
• YUIC
• Google Compiler
• JSMin - http://5ujf.sl.pt
Wednesday, October 6, 2010
![Page 38: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/38.jpg)
Minifiers
• YUIC
• Google Compiler
• JSMin
• Packer - http://jscompress.com/
Wednesday, October 6, 2010
![Page 39: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/39.jpg)
Minifiers
• YUIC
• Google Compiler
• JSMin
• Packer
• e muito mais...
Wednesday, October 6, 2010
![Page 40: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/40.jpg)
JSLint
http://www.jslint.com/
Wednesday, October 6, 2010
![Page 41: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/41.jpg)
JSLint
• aviso: “JSLint will hurt your feelings”
Wednesday, October 6, 2010
![Page 42: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/42.jpg)
JSLint
• aviso: “JSLint will hurt your feelings”
• é um bom desafio criar código que seja warning free no JSLint
Wednesday, October 6, 2010
![Page 43: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/43.jpg)
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
![Page 44: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/44.jpg)
Hardcore Debugging
Wednesday, October 6, 2010
![Page 45: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/45.jpg)
Hardcore Debugging
• window.alert to the rescue!
Wednesday, October 6, 2010
![Page 46: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/46.jpg)
Hardcore Debugging
• window.alert to the rescue!
• comentar blocos de código para descobrir erros de sintaxe
Wednesday, October 6, 2010
![Page 47: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/47.jpg)
Demo Time!
Wednesday, October 6, 2010
![Page 48: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/48.jpg)
Firefox
• Firebug
Wednesday, October 6, 2010
![Page 49: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/49.jpg)
Firefox
• Firebug
• JavaScript console
Wednesday, October 6, 2010
![Page 50: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/50.jpg)
Firefox
• Firebug
• JavaScript Console
• HTML / CSS Inspector
Wednesday, October 6, 2010
![Page 51: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/51.jpg)
Firefox
• Firebug
• JavaScript Console
• HTML / CSS Inspector
• recursos carregados pela página
Wednesday, October 6, 2010
![Page 52: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/52.jpg)
Firefox
• Firebug
• JavaScript Console
• HTML / CSS Inspector
• recursos carregados pela página
• DOM & Script Tab
Wednesday, October 6, 2010
![Page 53: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/53.jpg)
Demo Time!
Wednesday, October 6, 2010
![Page 54: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/54.jpg)
Chrome / Safari
• Webkit Inspector
Wednesday, October 6, 2010
![Page 55: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/55.jpg)
Chrome / Safari
• Webkit Inspector
• Elements Tab
Wednesday, October 6, 2010
![Page 56: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/56.jpg)
Chrome / Safari
• Webkit Inspector
• Elements Tab
• Resources
Wednesday, October 6, 2010
![Page 57: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/57.jpg)
Chrome / Safari
• Webkit Inspector
• Elements Tab
• Resources
• Console
Wednesday, October 6, 2010
![Page 58: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/58.jpg)
Chrome / Safari
• Webkit Inspector
• Elements Tab
• Resources
• Console
• e mais!
Wednesday, October 6, 2010
![Page 59: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/59.jpg)
Demo Time!
Wednesday, October 6, 2010
![Page 60: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/60.jpg)
IE 6 / 7
• Developer Toolbar
Wednesday, October 6, 2010
![Page 61: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/61.jpg)
IE 6 / 7
• Developer Toolbar
• HTML Inspector
Wednesday, October 6, 2010
![Page 62: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/62.jpg)
IE 6 / 7
• Developer Toolbar
• HTML Inspector
• CSS Inspector
Wednesday, October 6, 2010
![Page 63: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/63.jpg)
IE 6 / 7
• Developer Toolbar
• HTML Inspector
• CSS Inspector
• e uns extras que dão jeito... no contexto :)
Wednesday, October 6, 2010
![Page 64: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/64.jpg)
Demo Time!
Wednesday, October 6, 2010
![Page 65: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/65.jpg)
IE 8 / 9*
• Developer Tools
Wednesday, October 6, 2010
![Page 66: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/66.jpg)
IE 8 / 9*
• Developer Tools
• HTML Inspector
Wednesday, October 6, 2010
![Page 67: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/67.jpg)
IE 8 / 9*
• Developer Tools
• HTML Inspector
• CSS Inspector
Wednesday, October 6, 2010
![Page 68: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/68.jpg)
IE 8 / 9*
• Developer Tools
• HTML Inspector
• CSS Inspector
• Script Inspector
Wednesday, October 6, 2010
![Page 69: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/69.jpg)
IE 8 / 9*
• Developer Tools
• HTML Inspector
• CSS Inspector
• Script Inspector
• Profiler
Wednesday, October 6, 2010
![Page 70: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/70.jpg)
Demo Time!
Wednesday, October 6, 2010
![Page 71: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/71.jpg)
Opera
• Opera Dragonfly
Wednesday, October 6, 2010
![Page 72: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/72.jpg)
Opera
• Opera Dragonfly
• DOM
Wednesday, October 6, 2010
![Page 73: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/73.jpg)
Opera
• Opera Dragonfly
• DOM
• Scripts
Wednesday, October 6, 2010
![Page 74: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/74.jpg)
Opera
• Opera Dragonfly
• DOM
• Scripts
• Network
Wednesday, October 6, 2010
![Page 75: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/75.jpg)
Opera
• Opera Dragonfly
• DOM
• Scripts
• Network
• e mais extras...
Wednesday, October 6, 2010
![Page 76: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/76.jpg)
Demo Time!
Wednesday, October 6, 2010
![Page 77: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/77.jpg)
Wrap Up
Perguntas?
Wednesday, October 6, 2010
![Page 78: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/78.jpg)
Diogo AntunesLibSAPO.js - http://js.sapo.pt
twitter: @dicodeim: [email protected]
mail: [email protected] blog: http://dicode.org
Wednesday, October 6, 2010
![Page 79: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/79.jpg)
Wednesday, October 6, 2010
![Page 80: Debugging your JavaScript](https://reader036.vdocument.in/reader036/viewer/2022081512/55561e01d8b42a5b528b4611/html5/thumbnails/80.jpg)
slide 3: @pedro_correiaslide 5: http://commons.wikimedia.org/wiki/File:Bug.pngslide 10: @saposlide 14: http://willscullypower.files.wordpress.com/2009/11/testing.jpgslide 18: http://dl.maximumpc.com/galleries/osretro/OSes.pngslide 23: http://hazel8500.files.wordpress.com/2010/02/ninja.jpgslide 44: http://llvm.org/releases/2.4/docs/img/Debugging.gifslide 79: http://icanhascheezburger.wordpress.com/files/2009/08/funny-pictures-cat-loves-coffee.jpg
CreditsThis work is licensed under a Creative
Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
Wednesday, October 6, 2010