• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Debugging your JavaScript
 

Debugging your JavaScript

on

  • 1,147 views

Sapo Session - 2010-10-06

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

Statistics

Views

Total Views
1,147
Views on SlideShare
1,147
Embed Views
0

Actions

Likes
3
Downloads
13
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Debugging your JavaScript Debugging your JavaScript Presentation Transcript

    • Debugging your JavaScript (Recuso-me a mudar este titulo para português) Sapo Sessions 2010-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 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
    • Wednesday, October 6, 2010
    • 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