0 Compartilhamentos 427 Views

Como ver os erros do meu site? (parte 1)

20 de maio de 2015

Existem diversas maneiras de verificarmos erros em sites. Erros em projetos que estamos desenvolvendo. De inspecionarmos o código fonte e realizarmos alterações e testes diversos. Uma delas é usar ferramentas inclusas justamente no software que usamos no dia a dia para acessar e interagir com as páginas web.

Navegadores. Browsers. Eles contam atualmente com poderosas e, é claro, gratuitas ferramentas para debug. Ferramentas inclusas no pacote, digamos assim, que facilitam bastante a vida do desenvolvedor.

O Firefox, da Mozilla, possui suas próprias ferramentas. Assim como o navegador Chrome, do Google. E é através dele que vamos iniciar esta série de artigos. O Google Chrome possui suas próprias ferramentas para desenvolvedores, as quais permitem que páginas e sites inteiros sejam inspecionados e testados, e que todos os problemas sejam detectados e resolvidos.

Desenvolvimento

Acessando as devtools no Google Chrome

Para acessar tais ferramentas, abra o Google Chrome e clique no botão de “configurações” (menu Chrome). Em seguida, vá em “Mais ferramentas” ==> “Ferramentas do desenvolvedor”. Outra maneira de acessar tais ferramentas de debug é simplesmente pressionando F12.

Google Chrome - Acesso Ferramentas Desenvolvedores

Observe que a janela das ferramentas para desenvolvedores do Chrome será aberta por padrão na parte inferior do navegador, mas você pode alterar seu posicionamento (trazendo-a para a lateral direita do navegador) simplesmente clicando no pequeno botão abaixo demonstrado, localizado imediatamente antes do botão “X” (o qual fecha a janela):

Google Chrome - Ferramentas Desenvolvedores

Também é possível destacar a janela totalmente, tornando-a independente. Para isto, mantenha o botão acima pressionado e clique, logo em seguida, no botão  Também é possível destacar a janela totalmente, mantendo o botão acima pressionado e clicando então no botão.

Google Chrome - Ferramentas Desenvolvedore

Temos 8 abas nas devtools do Chrome: “Elements”, “Network”, “Sources”, “Timeline”, “Profiles”, “Resources”, “Audits” e “Console”. Vamos agora dar uma olhada em “Elements”.

A aba “Elements” – visualizando e editando elementos

Esta aba permite que o desenvolvedor obtenha acesso ao DOM das páginas. Blocos de código podem ser expandidos ou “colapsados” (você quer /precisa visualizar/editar apenas determinada classe, por exemplo). Note que o código é renderizado em “tempo real”, incluindo alterações realizadas por javascript. Qualquer elemento do site pode ser alterado através da aba “Elements”; o desenvolvedor pode inspecionar o HTML e o CSS, por exemplo, além de testar vários layouts.

Google Chrome - Ferramentas Desenvolvedores

É possível navegar pela debug tool até o elemento desejado, no próprio projeto/página, ou então podemos simplesmente acessá-lo diretamente, no próprio site. Para isto, basta localizá-lo, clicar sobre o mesmo com o botão direito do mouse e então, no menu de contexto, utilizar a opção “Inspecionar elemento”:

Google Chrome - Ferramentas Desenvolvedores

O elemento selecionado será então destacado na janela das ferramentas para desenvolvedores do Chrome, e poderá inclusive ser alterado. Uma outra maneira de inspecionar os elementos é abrir diretamente as DevTools do Chrome no modo de inspeção. Para isto, antes de qualquer coisa, utilize as teclas de atalho “CTRL+SHIFT+C” (lembre-se de que este atalho pode ser usado a qualquer momento – com a ferramenta já aberta no navegador, ele alterna para o modo de inspeção).

Assim, você pode ir selecionando na própria página os diferentes elementos, sendo que eles vão sendo destacados conforme o posicionamento do cursor do mouse. Um clique normal, com o botão esquerdo, seleciona qualquer um deles.

Obs: é importante ressaltar que a janela também exibe um breadcrumb extremamente útil no rodapé, o qual lista todo o “caminho”, ou seja, você sempre sabe exatamente onde está, no código. Você sempre conta com este elemento facilitador que inclusive permite o acesso rápido a elementos anteriores ou posteriores.

Google Chrome - Ferramentas Desenvolvedores

Vale lembrar também que tanto os nomes quanto os valores de quaisquer atributos podem ser editados dentro da aba “Elements”. Para tanto, basta clicar sobre os mesmos duas vezes com o botão esquerdo do mouse.

Google Chrome - Ferramentas Desenvolvedores

Após o devido foco em um elemento, basta um clique com o botão direito do mouse sobre o mesmo, dentro aba “Elements”, para que uma série de opções extremamente úteis sejam exibidas, incluindo “Edit as HTML” (Editar como HTML).

Editar qualquer bloco em HTML é bastante simples, e as alterações são carregadas rapidamente (é possível, por exemplo, alterar ou então adicionar novas classes e ids, alterar o href de imagens, etc). Utilize a opção citada acima, ou então, com o elemento selecionado, simplesmente pressione F2.

Note que dentro da aba “Elements” existe, à direita, uma série de outras abas, ou guias. A aba “Styles” permite a visualização das propriedades CSS de todos os elementos da página. Não só a visualização, diga-se de passagem: ela também permite que estas propriedades sejam alteradas (e também permite a criação de novas).

Abaixo você pode conferir um trecho da página principal do Código Fonte com alterações no CSS realizadas através das devtools do Chrome (fontes, cores, links, imagens, etc). As alterações abaixo foram realizadas (sem nenhuma preocupação estética, vale lembrar) em poucos segundos, através da guia “Styles”:

Google Chrome - Ferramentas Desenvolvedores

Com as ferramentas para desenvolvedores inclusas no Google Chrome você pode até mesmo criar páginas inteiras no navegador, incluindo novas páginas para um projeto. A inspeção de elementos e a detecção de possíveis erros/problemas em projetos em desenvolvimentos (bem como a resolução destes) também pode ser bastante beneficiada pelo uso das ferramentas.

Fique de olho no Código Fonte e aguarde pelo próximo artigo a respeito das ferramentas para desenvolvedores do Google Chrome.

Carregando...

Você pode se interessar

Promoções de Jogos do Final de Semana (04/12)
Notícias
5 visualizações
Notícias
5 visualizações

Promoções de Jogos do Final de Semana (04/12)

Carlos L. A. da Silva - 4 de dezembro de 2020

Confira as melhores ofertas de jogos de PC para o final de semana.

E o que dizer do 6G? E o 7G?
Artigos
7 visualizações
Artigos
7 visualizações

E o que dizer do 6G? E o 7G?

Carlos L. A. da Silva - 3 de dezembro de 2020

China sai na frente com desenvolvimento da tecnologia da rede 6G, mas analistas estão divididos sobre um "7G".

Perguntas e respostas sobre o 5G
Artigos
11 visualizações
Artigos
11 visualizações

Perguntas e respostas sobre o 5G

Carlos L. A. da Silva - 30 de novembro de 2020

Tecnologia já está batendo na nossa porta, mas muitas pessoas não entendem completamente como ela funciona e o que vai mudar no dia a dia.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Como usar a internet de forma segura com os novos DNS da Cloudflare
Dicas
13 visualizações
13 visualizações

Como usar a internet de forma segura com os novos DNS da Cloudflare

Carlos L. A. da Silva - 28 de novembro de 2020
Como a Nvidia está usando rede neural no lugar de codecs de vídeo
Artigos
19 visualizações
19 visualizações

Como a Nvidia está usando rede neural no lugar de codecs de vídeo

Carlos L. A. da Silva - 25 de novembro de 2020
Promoções de Jogos do Final de Semana (20/11)
Notícias
24 visualizações
24 visualizações

Promoções de Jogos do Final de Semana (20/11)

Carlos L. A. da Silva - 20 de novembro de 2020