debugging your javascript
DESCRIPTION
Sapo Session - 2010-10-06 Boas práticas, ferramentas de debug, minifiers e validadores de código javascript no browserTRANSCRIPT
Debugging your JavaScript
(Recuso-me a mudar este titulo para português)
Sapo Sessions2010-10-06
Wednesday, October 6, 2010
JavaScript
Wednesday, October 6, 2010
Wednesday, October 6, 2010
JavaScript
• O porquê desta talk
Wednesday, October 6, 2010
JavaScript
Wednesday, October 6, 2010
JavaScript
• minimizar a frustação
Wednesday, October 6, 2010
JavaScript
• minimizar a frustação
• perceber o problema
Wednesday, October 6, 2010
JavaScript
• minimizar a frustação
• perceber o problema
• aumentar a autonomia na clarificação de erros
Wednesday, October 6, 2010
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
No SAPO
Wednesday, October 6, 2010
No SAPO
• existe um documento de Guidelines de Usabilidade e Qualidade
Wednesday, October 6, 2010
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
No SAPO
Wednesday, October 6, 2010
Onde testar?
Wednesday, October 6, 2010
Onde testar?
• no próprio browser
Wednesday, October 6, 2010
Onde testar?
• no próprio browser
• no correspondente sistema operativo
Wednesday, October 6, 2010
Onde testar?
• no próprio browser
• no correspondente sistema operativo
• num ambiente o mais aproximado possível do utilizador final
Wednesday, October 6, 2010
Usar VM’s
Wednesday, October 6, 2010
Usar VM’s
• VirtualBox, VMWare, Windows Virtual PC, Parallels, you name it.
Wednesday, October 6, 2010
Usar VM’s
• VirtualBox, VMWare, Windows Virtual PC, Parallels, you name it.
• uma VM por “browser age”
Wednesday, October 6, 2010
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
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
JavaScript Code
Wednesday, October 6, 2010
JavaScript Code
• não usar código minificado para desenvolvimento
Wednesday, October 6, 2010
JavaScript Code
• não usar código minificado para desenvolvimento
• uma instrução por linha
Wednesday, October 6, 2010
JavaScript Code
• não usar código minificado para desenvolvimento
• uma instrução por linha
• seguir um coding standard
Wednesday, October 6, 2010
JavaScript Code
• não usar inline attributes, ex: onclick
Wednesday, October 6, 2010
JavaScript Code
• não usar inline attributes, ex: onclick
• se possível, manter o window limpo
Wednesday, October 6, 2010
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
JavaScript Code
• usar minifiers/compressors
Wednesday, October 6, 2010
JavaScript Code
• usar minifiers/compressors
• nomes de variáveis que façam sentido
Wednesday, October 6, 2010
JavaScript Code
• usar minifiers/compressors
• nomes de variáveis que façam sentido
• não compliquem
Wednesday, October 6, 2010
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
Minifiers
Wednesday, October 6, 2010
Minifiers
• YUIC - http://refresh-sf.com/yui/
Wednesday, October 6, 2010
Minifiers
• YUIC
• Google Compiler - http://5ujb.sl.pt
Wednesday, October 6, 2010
Minifiers
• YUIC
• Google Compiler
• JSMin - http://5ujf.sl.pt
Wednesday, October 6, 2010
Minifiers
• YUIC
• Google Compiler
• JSMin
• Packer - http://jscompress.com/
Wednesday, October 6, 2010
Minifiers
• YUIC
• Google Compiler
• JSMin
• Packer
• e muito mais...
Wednesday, October 6, 2010
JSLint
http://www.jslint.com/
Wednesday, October 6, 2010
JSLint
• aviso: “JSLint will hurt your feelings”
Wednesday, October 6, 2010
JSLint
• aviso: “JSLint will hurt your feelings”
• é um bom desafio criar código que seja warning free no JSLint
Wednesday, October 6, 2010
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
Hardcore Debugging
Wednesday, October 6, 2010
Hardcore Debugging
• window.alert to the rescue!
Wednesday, October 6, 2010
Hardcore Debugging
• window.alert to the rescue!
• comentar blocos de código para descobrir erros de sintaxe
Wednesday, October 6, 2010
Demo Time!
Wednesday, October 6, 2010
Firefox
• Firebug
Wednesday, October 6, 2010
Firefox
• Firebug
• JavaScript console
Wednesday, October 6, 2010
Firefox
• Firebug
• JavaScript Console
• HTML / CSS Inspector
Wednesday, October 6, 2010
Firefox
• Firebug
• JavaScript Console
• HTML / CSS Inspector
• recursos carregados pela página
Wednesday, October 6, 2010
Firefox
• Firebug
• JavaScript Console
• HTML / CSS Inspector
• recursos carregados pela página
• DOM & Script Tab
Wednesday, October 6, 2010
Demo Time!
Wednesday, October 6, 2010
Chrome / Safari
• Webkit Inspector
Wednesday, October 6, 2010
Chrome / Safari
• Webkit Inspector
• Elements Tab
Wednesday, October 6, 2010
Chrome / Safari
• Webkit Inspector
• Elements Tab
• Resources
Wednesday, October 6, 2010
Chrome / Safari
• Webkit Inspector
• Elements Tab
• Resources
• Console
Wednesday, October 6, 2010
Chrome / Safari
• Webkit Inspector
• Elements Tab
• Resources
• Console
• e mais!
Wednesday, October 6, 2010
Demo Time!
Wednesday, October 6, 2010
IE 6 / 7
• Developer Toolbar
Wednesday, October 6, 2010
IE 6 / 7
• Developer Toolbar
• HTML Inspector
Wednesday, October 6, 2010
IE 6 / 7
• Developer Toolbar
• HTML Inspector
• CSS Inspector
Wednesday, October 6, 2010
IE 6 / 7
• Developer Toolbar
• HTML Inspector
• CSS Inspector
• e uns extras que dão jeito... no contexto :)
Wednesday, October 6, 2010
Demo Time!
Wednesday, October 6, 2010
IE 8 / 9*
• Developer Tools
Wednesday, October 6, 2010
IE 8 / 9*
• Developer Tools
• HTML Inspector
Wednesday, October 6, 2010
IE 8 / 9*
• Developer Tools
• HTML Inspector
• CSS Inspector
Wednesday, October 6, 2010
IE 8 / 9*
• Developer Tools
• HTML Inspector
• CSS Inspector
• Script Inspector
Wednesday, October 6, 2010
IE 8 / 9*
• Developer Tools
• HTML Inspector
• CSS Inspector
• Script Inspector
• Profiler
Wednesday, October 6, 2010
Demo Time!
Wednesday, October 6, 2010
Opera
• Opera Dragonfly
Wednesday, October 6, 2010
Opera
• Opera Dragonfly
• DOM
Wednesday, October 6, 2010
Opera
• Opera Dragonfly
• DOM
• Scripts
Wednesday, October 6, 2010
Opera
• Opera Dragonfly
• DOM
• Scripts
• Network
Wednesday, October 6, 2010
Opera
• Opera Dragonfly
• DOM
• Scripts
• Network
• e mais extras...
Wednesday, October 6, 2010
Demo Time!
Wednesday, October 6, 2010
Wrap Up
Perguntas?
Wednesday, October 6, 2010
Diogo AntunesLibSAPO.js - http://js.sapo.pt
twitter: @dicodeim: [email protected]
mail: [email protected] blog: http://dicode.org
Wednesday, October 6, 2010
Wednesday, October 6, 2010
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