Encontrei um bug! Mas será?

[TheChessMan 0]

Encontrei um bug! Será? - Depurando seu código CSS e (X)HTML

 

Pessoal, pelo excessivo número de dúvidas a respeito do nosso querido CSS resolvi criar um guia de depuração do mesmo, que (eu espero) vai ajudar desde o iniciante, até o desenvolvedor mais experiente.

 

Vamos lá.

 

Sabemos que os bugs dos navegadores (ou do IE) estão aí e causam muitas dores de cabeça, mas antes de arrancar os cabelos ou usar aquele hack esquisito, vale a pena gastar uns minutinhos depurando o nosso código e ver se está tudo certo.

 

Antes de qualquer linha de código adicional, é necessário ter certeza que o problema realmente é um bug, e não uma falha de estruturação ou o que geralmente ocorre: uma falha nossa sobre como o posicionamento funciona no CSS.

 

Para detectar bugs existem muitas formas, fóruns e listas de discussão ajudam, talvez uma busca pelo google ou melhor ainda, consultar os documentos oficiais do W3C.

 

No entanto esta pode ser uma tarefa muito árdua se não soubermos o que realmente estamos procurando, assim indicam-se os seguintes passos que você pode até adotar como um costume quando encontrar erros:

 

1. Validação

 

Geralmente este primeiro passo não é seguido, o que é uma vergonha, pois a maioria dos “Bugs misteriosos” são simplesmente erros básicos de codificação. Valide seu documento não para por um selinho legal na sua página, mas sim para garantir que não está fazendo nada errado que possa ocasionar problemas mais tarde.

 

2. Simplifique seu CSS

 

Se todo o CSS estiver contido no documento em questão, isto é, se você estiver usando todo o CSS incorporado (o que não é uma boa prática), ou se todo o seu CSS estiver em um único arquivo importado, passe para o próximo passo. Se isso não ocorrer é aconselhável colocar todo o CSS relevante incorporado ao seu documento (apenas momentaneamente, não se assuste, hehe.)

IMPORTANTE: Providencie cópias de segurança de seus arquivos, depois pode ser tarde demais.

Depois retire o link de importação (tag <link> ou @import) e visualize a página. Se o “bug” desaparecer é sinal de que algo está errado com o arquivo importado, (que foi retirado momentaneamente) e, na verdade você não tem um bug, mas sim erros no seu código.

Feito esse processo e seu “bug” não desapareceu? É hora do trabalho de verdade começar!

 

3. Recorte e cole

 

O objetivo aqui é recortar várias seções do seu código, salvar o arquivo e checar se o “bug” continua ou não, se ele sumir, cole a seção de volta e recorte a próxima, assim você descobre exatamente o que está acontecendo de errado. Este método deve ser aplicado tanto ao CSS quanto ao (X)HTML.

Outra forma de fazer este trabalho é comentando blocos de código, que pode ser mais seguro, mas não tão rápido quanto o método anterior.

Tome cuidado com os estilos “inline” no seu (X)HTML.

Lembre-se, o objetivo aqui é manter o bug presente removendo o máximo de código possível, as seções começarão a ficar menores e menores até que você descobrirá a linha exata onde o erro está ocorrendo.

 

4. Análise

 

Agora, depois de tudo isso, e descoberto (eu espero) ao menos o código que causa o “bug” é hora de analisá-lo, brinque com seu código, faça testes, [uPDATE]Uma ótima dica é colocar bordas coloridas grandes ou paddings que ajudam a visualizar o efeito do seu código na tela do navegador (by micox)[/uPDATE] afinal esta página é resultado da tremenda filtragem que você realizou no terceiro passo e será muito mais fácil detectar o problema. Agora também é hora (exatamente, eu disse apenas AGORA e não antes dos 3 passos acima) de consultar os documentos do W3C, de procurar no Google e de postar no seu fórum preferido (leia-se Imasters, hehe), como o seu código está bem sucinto e você tem certeza que o problema está exatamente aí, o pessoal do fórum vai gostar de ajudar e não vai pegar no seu pé por postar um monte de código que ninguém entende.

Se depois de tudo isso algum “bug” ainda conseguir sobreviver, você acaba de descobrir (ou de conhecer) um verdadeiro bug de navegador. Está quase na hora de arrancar os cabelos, hehehe.

 

Depois do google, fóruns, documentações do W3C, não se esqueça de procurar nas documentações da página do desenvolvedor do navegador (Microsoft, Mozilla.. por exemplo), se o desespero for grande mesmo tente escrever para algum especialista (mas esteja consciente de que você poderá ser xingado, afinal... consultoria custa dinheiro!)

 

Se depois de tudo isso não estiver resolvido, amigo... meu sincero conselho:

 

Ctrl+A > Delete > Ctrl+N e boa sorte!

[Luiz Henrique 1]

Boa brother!!!

[micox 2]

Boa não...

Ótima chess.

 

Mas voce esqueceu de falar algo muito importantes e aconselhável:

O teste usando borders e backgrounds

Este passo seria junto com a análise, antes de perguntar pros coleguinhas aqui do imasters.

 

As vezes, ajuda muito voce colocar bordas coloridas ou backgrounds coloridos (melhor) nos elementos que tão com problema. Daí voce acaba percebendo que esqueceu algum margin ou padding... ;)

 

Ótimo, rola até de pendurar...

[micox 2]

Ah, voce esqueceu também de falar que o Firefox AVISA os possíveis erros no seu CSS e informa as linhas que foram ignoradas no "Console de erros".

[TheChessMan 0]

Ah, mas aí já tá fora do escopo do artigo mico, mas fica a dica aí no tópico.Se quiser pendurar, fica à vontade =)

[micox 2]

Queisso... fora do escopo nada. heheEu por exemplo só uso essas duas técnicas pra depurar, nem faço as outras que voce falou. Confio apenas nas minhas bordas e no meu Firefox e vai indo tudo bem até hoje. heheQuanto a pendurar, vamos esperar a opinião do pa_bruno, é que já temos tópicos pendurados demais... VAmos esperar a opinião dele.

[TheChessMan 0]

auehuahe.. beleza.. mas pro iniciante fica mais complicado depurar só assim..

[pa_bruno 0]

Queisso... fora do escopo nada. heheEu por exemplo só uso essas duas técnicas pra depurar, nem faço as outras que voce falou. Confio apenas nas minhas bordas e no meu Firefox e vai indo tudo bem até hoje. heheQuanto a pendurar, vamos esperar a opinião do pa_bruno, é que já temos tópicos pendurados demais... VAmos esperar a opinião dele.

exatamente como eu faço mico... soh uso bordas mesmo... bem dificil fazer tudo akilo lah em cima... mas pra inciante eh legal seguir TAMBEM... eh bom citar essa das bordas tb... ;)pendurado... eh melhor sim http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Dr. André 0]

gostei mesmo, boa iniciativa

[wagnerdp 0]

Gostei da matéria, só não concordei c/ uma coisa: "se você estiver usando todo o CSS incorporado (o que não é uma boa prática),"

o css fica bem mais leve qdo você coloca-o em apenas um arquivo.css, ainda mais de você deixa-lo todo em uma linha antes de subir.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[TheChessMan 0]

Olá wagnerdp, acho que você não entendeu bem, CSS incorporado não é aquele em que há um arquivo separado, mas sim aquele que está no mesmo arquivo que o HTML, isso não é uma boa prática.

[Paulo de Tarso F. M. 24]

Olá wagnerdp, acho que você não entendeu bem, CSS incorporado não é aquele em que há um arquivo separado, mas sim aquele que está no mesmo arquivo que o HTML, isso não é uma boa prática.

Meu caro TheChessMan, eu ainda acho que o wagnerdp não interpretou a frase entre parênteses corretamente... Ele até entendeu que um CSS incorporado é aquele no próprio arquivo HTML, tanto é que ele até sugeriu a melhor opção, do arquivo externo... Foi uma questão de interpretação, eu acho... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

Então, wagnerdp, veja bem os parênteses: "o que não é uma boa prática", caso esteja usando CSS incorporado...

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Gs3llmann 0]

Ctrl+A > Delete > Ctrl+N

hueuhaeuhaeuhaeuheuheuh boa...

 

Agora uma pequena pergunta, como que eu posso validar meu site ou como que eu acho esses bugs?

Qual programa tenho que usar?

 

:unsure:

[JibrilJoker 0]

Ctrl+A > Delete > Ctrl+N

hueuhaeuhaeuhaeuheuheuh boa...Agora uma pequena pergunta, como que eu posso validar meu site ou como que eu acho esses bugs?Qual programa tenho que usar? :unsure:

para validar... basta ires a: http://www.w3.org/QA/Tools/la vais encontrar os validators para CSS, XHTML, HTML, links, etc...outra maneira de achar bugs no codigo html e usando o HTML TIDY... um programa muito bom para encontrar erros no teu codigo html...podes encontra-lo aqui: http://sourceforge.net/projects/tidyou aqui: http://www.htmlkit.com/a boas ferramentas por ai... para limpar codigo...