Oct 23

Debugando javascript no Firefox

Category: JavaScript, debugging

No último post mostrei como debugar javascript no Internet Explorer. Continuando a série debugging, veremos as ferramentas disponíveis para o Firefox. Debugar JS no Firefox é uma tarefa bem simples. Basta instalar uma extensão que permita isso. Há duas extensões disponíveis: o Venkman debugger e o Firebug. Recomendo o uso do Firebug. Na tabela de funções abaixo você vê o porquê.

funcionalidade Firebug Venkman
Linha de comando sim sim
Documentos carregados sim sim
Breakpoints sim sim
Variáveis locais sim sim
Pilha de execução sim sim
Watch sim sim
Código HTML sim não
Edição do HTML sim não
Arquivos CSS sim não
Profiling sim sim
DOM e Objetos globais sim não
Tempo de download da página sim não
API (manipulação à partir do código) sim não
Requisição AJAX sim não

Além do que falei acima, o firebug ainda tem outras features que eu não poderia deixar de citar.

  • Edição de CSS com Auto-complete!
  • A API não serve só pra parar o debugger. Você pode enviar mensagens ao console através dela.
  • Profiling do seu javascript ridiculamente fácil. Basta apertar um botão
  • Em toda requisição (ajax ou normal) você vê os cabeçalhos de requisição e de resposta, o tempo da requisição e o conteúdo da resposta
  • Seleção de elementos para inspeção com um simples clique
  • Ao inspecionar um elemento você vê css (e pode alterá-lo), as dimensões do objeto e as propriedades DOM

Abaixo você vê screenshots que mostram algumas funcionalidades do firebug que fazem toda a diferença na hora de desenvolver uma interface web.

O Firebug, na minha opinião, é o melhor debugger de javascript no momento. Se você ficou interessado e quer testar o Firebug, faça o seguinte:

  2. Instale o Firefox
  3. Utilizando o Firefox, navegue até www.getfirebug.com e clique no grande botão laranja que diz: "Install firebug 1.0"

Technorati Tags: , ,



No comments

Sep 27

Debugando javascript no IE

Category: JavaScript, debugging

[Vamos direto ao assunto...]

     Programar em javascript sempre foi bastante tranqüilo, pelo menos em tempos de alert, confirm, páginas sem animação e sites onde se lia “funciona melhor no Internet Explorer”. Nem de perto se sentia o cheiro da moderna sopa de letrinhas que vemos hoje: AJAX, XMLHTTPRequest e por aí vai… Além disso, não dá mais pra fazer sites que só funcionam no IE. Hoje o Firefox já tem quase 35% dos internautas [w3schools] e a Apple acaba de lançar uma versão para windows do seu navegador Safari. É a velha guerra dos browsers mostrando que ainda não acabou.

     Enquanto os grandões brigam pelos internautas, quem é dono do seu próprio site ou responde pelo site de uma empresa tem sua própria guerra pra travar. Os sites dos concorrentes estão mais modernos, funcionam em qualquer browser, estão cheios de animação mas sem flash e sem os práticos refreshs que deixavam a gente fazer tudo no servidor também. Mesmo usando APIs javascript como YUI, prototype, dojo, etc, em sites mais complexos, é preciso um belo esforço para deixar tudo funcionando igualzinho em todos os browsers. Creio que com o amadurecimento desses projetos esse esforço deve diminuir um pouco. Trocando em miúdos, acabou a moleza. Site agora tem que ser cross-browser. Se é pra ir pra guerra, então é melhor ir bem armado.

[O Assunto]

     O melhor jeito de se debugar javascript no IE é usando outro software Microsoft. Pelo menos por enquanto, primeiro porque com o suporte a plugins do IE7 logo logo vai surgir um plugin para debugar javascript, além disso, o firebug tem uma versão lite  para o IE feita em html e javascript, que pode ser usada no IE6 e IE7. Mas fique tranqüilo você não vai ter correr atrás de crack nenhum, os softwares, por incrível que pareça, são gratuitos. A Microsoft oferece 3 opções para debugar javascript: o Microsoft Script Debugger (vou chamar de MSD), o Microsoft Script Editor (MSE) e o Visual Studio (VS). Aí você diz: mas o Visual Studio não é pago?! Nem todos, o VS Express Edition é gratuito! Qualquer versão completa do VS serve para debugar JS. Entre as versões “Express” só testei o VS Visual Web Developer (VWD), mas creio que as outras versões também têm essa funcionalidade.

     Pra não ficar falando muito, fiz a tabela abaixo que resume as principais características de cada debugger.

Funcionalidade MSD MSE VWD VS
Documentos carregados sim sim sim sim
Command Window não sim sim sim
Watch não

sim
(simples)

 sim sim
Atachar um processo em execução não sim não sim

     Escolha sua arma…

Download do Microsoft Script Debugger

Download do Microsoft Visual Web Developer 2005 Express Edition 

O Microsoft Script Editor acompanha o MS Office XP ou 2003 [clique aqui se precisar de uma dica]

 

     E vamos à guerra! Esse vídeo mostra como configurar o Internet Explorer e como usar o Visual Web Developer para debugar javascript.

     Espero ter ajudado a reduzir o tempo que você gasta pra implementar suas interfaces!

     Less time coding, more time to be creative.

Technorati Tags: , , ,

2 comments

Sep 20

Que #@×¥ é essa?

Category: Uncategorized
    Imagine um software que permite criar interfaces para aplicações desktop cross-platform ou web, utilizando peças de lego como componentes de interface! Isso, não é o LegoCode (mas seria muito bacana, né?). Mas então, se não é isso, o que é esse tal de LegoCode??? Em poucas palavras, LegoCode é apena um blog que tem o objetivo de trazer para os desenvolvedores de software e gerentes de projeto ferramentas para tornar o desenvolvimento mais produtivo. Tem muita coisa por aí que seria uma baita mão na roda, mas é tão difícil de se encontrar que a gente acaba achando que não existe (sem contar que às vezes não existe mesmo). Ao longo de 5 anos trabalhado com desenvolvimento de software encontrei algumas ferramentas e criei outras que podem ser bastante úteis no nosso dia-a-dia. Em cada post no LegoCode vou falar de uma dessas ferramentas, e como a cada dia que passa surgem mais ferramentas vou ter que me esforçar bastante pra conseguir acompanhar as novidades. Vou tentar, sempre que possível, ir direto ao ponto. Ou pelo menos deixar um link pra que você mesmo faça isso. Mas como gosto de escrever, acho que vai ser quase impossível não contextualizar o post.

    Mas isso ainda não explica o porquê do nome. O nome LegoCode vem de uma analogia que eu costumo usar para explicar pra alguém que nunca programou como é que funciona essa tal de programação. Pra mim, programar e brincar de Lego não são coisas tão diferentes assim. Tanto no Lego quanto na programação, o que você tem nas mãos no começo da brincadeira é um monte de pecinhas. Blocos, bases, rodas ou variáveis, loops e funções. A partir daí, o que a gente faz é combinar essas peças de maneira lógica pra construir algo mais complexo. Na programação, assim como no Lego, quanto mais peças você tem mais divertida fica a brincadeira. Em ambas, os tipos de peças são limitados. A diferença é que na programação o estoque é infinito. A cada post, vou trazer uma peça nova pra você acoplar (ou não) ao seu processo de desenvolvimento, que eu espero ajudar a enriquecer e otimizar ao longo do tempo. Sou fã de web 2.0, então vou sempre buscar a colaboratividade com os leitores, se quiser sugerir um post fique à vontade!

Blogged with Flock

Tags:

No comments