Page 25 - Locaweb - Edição 30

locaweb
25
na hora, dá para analisar o impacto
das modificações feitas.
Ao clicar em cima de uma tag
HTML, na lateral do Firebug, serão
carregadas todas as partes do CSS
que afetam a tag selecionada. Esse
recurso é muito útil, pois com ele é
muito fácil identificar os erros no CSS
que estragam o layout da página, além
de permitir que a folha de estilo seja
modificada e que os efeitos sejam
testados imediatamente. Ao lado dos
atributos, há informações sobre o
arquivo e a linha. Com elas, fica fácil
de localizar onde as modificações
devem ser aplicadas no código-fonte.
Como debugar e
otimizar JavaScript
Debugar e otimizar JavaScript
com Firebug é quase tão simples
quanto testar propriedades CSS.
Note que nas abas da ferramenta,
há as opções “Scripts” e “DOM”.
Em “DOM”, é possível acessar e
modificar todas as propriedades
e objetos do documento editado.
Depois disso, todas as alterações são
aplicadas instantaneamente, inclusive o
conteúdo gerado dinamicamente.
Usar o debug de JavaScript é
tão simples como qualquer outro
debugger. Em “Scripts”, basta
selecionar o script que será debugado
e marcar os pontos em que o código
deve parar e recarregar a página.
Quando a execução chega ao ponto
marcado, o Firebug para o fluxo
e permite que as variáveis sejam
inspecionadas, usando a mesma região
em que, anteriormente, aparecia
o código CSS. Além de debugar,
é possível medir o tempo que as
funções demoram para rodar. Para
isso, basta ir ao menu “Console” e
clicar em “Profile”. O Firebug então
vai listar todas as funções que foram
chamadas e o tempo que cada uma
delas demorou para dar a resposta.
Limitações do Firebug
Apesar de o recurso mais
interessante do Firebug ser o fato
de ele acessar os dados internos do
Firefox enquanto a página é executada
e permitir que o efeito seja visto
on the fly, o código-fonte não pode
ser acessado pelo programa. Isso é
uma grande limitação, pois força o
desenvolvedor a modificar o mesmo
código duas vezes.
Claro que, muitas vezes, o
código é acessado direto pela web
e, por causa disso, o código-fonte
não pode ser modificado, mas seria
mais interessante se fosse possível
relacionar a página acessada pelo
Firebug com o código-fonte da página.
Dessa maneira, as modificações
poderiam ser aplicadas sem que fosse
necessário duplicar o trabalho.
Outro problema é que, como
o Firebug roda em background o
tempo todo, se alguma página tiver,
por exemplo, um erro no JavaScript,
pode acontecer de ela nunca terminar
de carregar ou mesmo de o Firefox
fechar inesperadamente. Isso porque
o Firebug tenta determinar onde
ocorreu o erro no JavaScript e
colocar um breakpoint no local. Outro
motivo é que a página usa recursos
de web 2.0 e confunde a ferramenta.
Uma solução para evitar esses
problemas é tentar manter o Firebug
atualizado e desabilitar os sites que
causam mais erros. No caso de a
página com bugs ser justamente a que
está sendo desenvolvida, desabilitar a
opção “Disable Network Monitoring”
pode ser uma boa opção.
Opte por recorrer
à ferramenta em
algum site com
CSS e que, se
possível, apresente
algum problema
de formatação
A ferramenta
Recurso torna mais simples a
experimentação de HTML e CSS,
facilitando muito a elaboração de
layouts mais complexos. Além
disso, você pode explorar o CSS de
páginas bonitas e entender como
determinados efeitos foram criados