192207784316955
Loading...

Como usar o “Inspecionar elemento” do Google Chrome

Google ChromeHá diversas vantagens em utilizar o Google Chrome como navegador de internet. Ele é leve, rápido e tem ótimos recursos. Para quem tem um blog, há vantagens adicionais. Uma delas é o recurso de “Inspecionar elemento”, muito útil para encontrar trechos para customizar em seu blog e fazer simulações de como ele ficará após as mudanças. Entenda neste artigo como utilizá-lo.

Por que usar o Google Chrome?

Atualmente, mais de 70% dos visitantes do Gerenciando Blog já utilizam o Google Chrome. Trata-se de uma ótima escolha: é um navegador capaz de mostrar corretamente os sites, com ótima velocidade e sem deixar lentas outras aplicações.

Além disso, ele possui ótimos recursos adicionais. Um deles são as extensões, que permitem adicionar mais funcionalidades ao navegador. Mostrei algumas delas no artigo Extensões do Google Chrome Úteis para seu Blog.

Outra funcionalidade fantástica – e que apresentarei neste artigo – é a opção “Inspecionar elemento”. Ela facilita muito o trabalho de customização, pois permite localizar exatamente o trecho de código a ser alterado. Permite inclusive fazer a alteração no próprio Chrome, para você ver como ficará o resultado final.

Por tudo isso, se você ainda não usa o Google Chrome, dê uma chance a ele. Faça o download e instale-o a partir do link http://www.google.com/intl/pt-BR/chrome.


Como utilizar o “Inspecionar elemento”?

Usar o recurso é muito simples. Faça um teste aqui neste artigo que você está lendo mesmo. Clique no título deste tópico, por exemplo, com o botão direito do mouse e escolha a opção “Inspecionar elemento”.
Inspecionar elemento no Google Chrome

Você verá uma janela parecida com a abaixo. À primeira vista, pode não fazer muito sentido para você. Mas, os próximos itens explicarão melhor cada parte da tela.
Inspecionar elemento no Google Chrome

A área à esquerda mostra o código-fonte de sua página, de forma estruturada. Você pode ver quais áreas estão dentro de quais. No exemplo, pode-se ver uma tag H2 (com o subtítulo da postagem), dentro de uma DIV de anúncio, dentro de uma DIV post-body e assim por diante. Note que, se você simplesmente passar o mouse sobre essas tags, a área correspondente a elas será destacada em azul na postagem original.
Inspecionar elemento no Google Chrome

A área à direita mostra o CSS correspondente à tag que está selecionada à esquerda. Se você não sabe do que estou falando, trata-se do código que determina as características visuais do código, como cor, fonte, tamanho etc. No artigo CSS no Blogger: o que é e como usar há mais detalhes sobre o assunto. Neste caso específico, veja que é aí que diz que a fonte é vermelha, com 120% de tamanho e em negrito (bold).
Inspecionar elemento no Google Chrome

Como fazer simulações de alteração?

Aqui começa a parte realmente interessante da funcionalidade. Imagine que eu não queira mais a cor vermelha para os subtítulos, e queira deixá-los agora na cor azul.

É possível fazer isso para ver como ficará. Basta clicar no código ff0000, que está à frente de “color”. Você verá que será possível editar o valor:
Inspecionar elemento no Google Chrome

Preencherei a caixa com o valor #0000FF, correspondente ao azul. Depois, é só pressionar “ENTER” para aceitar.
Inspecionar elemento no Google Chrome

Veja que agora todos os subtítulos do artigo que você está lendo ficaram na cor azul. Fácil né? Mas, note que isso é apenas uma simulação. Essa alteração só está visível na janela atual e não será aplicada ao blog.

Para fazer a alteração em definitivo, é necessário editar o HTML do template (veja detalhes em Como editar o HTML de seu template no Blogger), fazer a alteração nesse mesmo ponto e salvá-lo. Para localizar o ponto certo a alterar, basta localizar a tag pelo nome que ela apareceu no inspecionar elemento. Neste exemplo, a tag foi .post-body h2.

Conclusão

Aqui, fiz apenas uma rápida demonstração do potencial que a funcionalidade “Inspecionar elemento” oferece.

Quando você entende o mecanismo, há muitas outras coisas que você pode fazer. É possível inserir propriedades novas no CSS, eliminar propriedades e muito mais. Na área esquerda da tela, você também pode mover os elementos de lugar, remover áreas inteiras etc. São ótimas formas para você fazer avaliações rápidas de como ficará o seu template após alterações.

O melhor de tudo: você pode mexer sem medo com ela! Como nada fica gravado, não há risco nenhum de você prejudicar o seu blog. Se você fez algo e não ficou satisfeito com o resultado, basta recarregar a página e tudo voltará ao normal.


E você, já conhecia o “Inspecionar elemento”? Consegue ver outros usos para ela? compartilhe sua experiência em um comentário.
layout 7587546095073527980

Postar um comentário Comentários no Blogger

  1. Respostas
    1. Olá, Vânia!

      Fico feliz que tenha gostado!

      Um abraço!

      Excluir
    2. Parabéns Adelson, gostei do artigo.
      Tudo está evoluindo sempre.
      Um forte abraço,
      Jorge Purgly

      Excluir
    3. Olá, Jorge!

      Que ótimo saber que você também gostou!

      Um abraço!

      Excluir
  2. Olá Adelson, tudo bem?

    Excelente dica!!! Este recurso é uma verdadeira "mão na roda" na hora de localizar os códigos e facilita muito mesmo!! Antes de instalar extensões como Colorpick, Wahtfont, Css viewer etc, era o Inspecionar elemento que me atendia nestas situações para detectar qual a fonte, cores, etc e, hoje, continuo usando para localizar certos elementos, verificar como ficam as alterações de uma forma mais rápida, entre outras coisas. Super recomendo!! Não vivo sem esta ferramenta rsrsrs

    Obrigado por compartilhar conosco estas informações e dicas, sem dúvidas vai ser de grande ajuda para todos nós! Grande abraço e boa semana!! :D

    ResponderExcluir
    Respostas
    1. Olá, Sam!

      Eu estou bem! E você, como está?

      Para nós, que trabalhamos com customização de template, é mesmo uma ótimo recurso, não? Gosto muito da possibilidade de fazer as simulações de mudança nele antes de aplicar a alteração ao blog. E também da possibilidade que ele nos dá de entender a estrutura e os elementos do template. Hoje, eu o vejo mesmo como indispensável.

      As extensões que você citou são outro ótimo motivo para utilizar o Google Chrome!

      Um abraço e obrigado pela colaboração!

      Excluir
  3. Demais ! Eu até sabia que era possível ver os dados, mas não sabia que dava pra alterar os dados e ver na hora a alteração ! Estou me divertindo bagunçando sua página :D Abraços !

    ResponderExcluir
    Respostas
    1. Olá, Adriano!

      Dá mesmo para bagunçar e deixar qualquer site da forma como queremos. :-) Isso podia ser até uma ideia para o Google: permitir fixarmos alterações no CSS, para que sempre vejamos os sites da forma como os alteramos.

      Um abraço!

      Excluir
  4. Eu só uso o Google Chrome. ele é ótimo para tudo ex: para pesquisar é bem mais rapido..

    ResponderExcluir
    Respostas
    1. Olá, Carlinha!

      Eu também não troco mais o Google Chrome por outro navegador. Já o uso desde seu lançamento, e continuo achando-o indispensável.

      Um abraço!

      Excluir
  5. A Google é uma empresa que disponibiliza serviços ótimos como o Google Chome, citado no artigo, o Blogger, responsável por "manter" seu excelente blog, assim como diversos outros que nem imaginávamos (Google Glass, por exemplo).

    Sobre a ferramente Inspecionar Elemento, tem sido muito útil para mim depois que aprendi seu potencial e como utiliza-lo.. Espero que outras pessoas também passem a utilizar após o artigo, muito bem explicado!

    :D

    Grande abraço, sucesso sempre, estou ansioso pelo próximo aniversário do GB,
    João Vítor Dias

    ResponderExcluir
    Respostas
    1. Olá, João!

      Realmente, a Google sempre consegue nos surpreender com seus produtos. Antes do Chrome existir, a Microsoft dominava o mercado com o Internet Explorer, e os outros navegadores ofereciam pouco risco. Em pouco tempo, o Chrome inverteu toda essa situação e se tornou o navegador mais utilizado no mundo.

      Bom saber que você também faz bom uso do recurso!

      Um abraço!

      Excluir
  6. Adelson,

    Outra forma de acessar o "inspecionar elemento" é utilizar F12 - atalho interessante! Ao abrir a janela, basta clicar na lupa e escolher a parte que deseja realizar o teste. Um abraço

    ResponderExcluir
    Respostas
    1. Olá, Epifanio!

      Boa dica a sua! A tecla de atalho facilita mesmo a abertura da janela.

      Um abraço e obrigado por compartilhar!

      Excluir
  7. Venho tendo sérios problemas com o Chrome, isso me fez voltar a usar o Firefox do qual gosto muito! Chrome foi bom, hoje em dia não gosto nenhum pouco.

    ResponderExcluir
    Respostas
    1. Olá, Gutierri!

      Que estanho você ter problemas com o Chrome! Sempre o utilizei e nunca tive problemas.

      O lado bom é que o FireFox também apresenta o recurso de Inspecionar Elemento, bem similar ao do Chrome.

      Um abraço!

      Excluir
  8. Olá caro amigo,eu estou sempre aprendendo com o Gerenciando blog, embora eu tenha um blog de filmes online entre outros a algum tempo. Eu sempre tiro bons proveitos das dicas que vocês disponibilizam para todos nós web designers e que sejam bem vindas as dicas, sempre.
    Abraços!

    ResponderExcluir
    Respostas
    1. Olá!

      Que ótimo saber que você tem encontrado aqui dicas úteis para utilizar em seu blog!

      Um abraço!

      Excluir
  9. Olá Adelson
    Cheguei a esse blog pesquisando sobre Inspecionar Elementos
    Estou com um problema com o Chrome há muito tempo e não consigo resolver
    Quando abro uma nova página no Chrome e volto pra anterior que está aberta ela trava.
    E assim sucessivamente; se abrir várias páginas pra leitura, apenas a última aberta funciona normalmente. Se sair dela e voltar, tb trava. Aí eu clico em Inspecionar Elementos abre esta janela de códigos, e eu apenas clico no x pra fechar então a página volta a funcionar novamente. Doidera... já pensou, to fazendo isso desde o ano passado pra poder atualizar as páginas rs... Se tiver alguma dica, please!!!
    Obrigado

    ResponderExcluir
    Respostas
    1. Olá, Vhiggo!

      Que comportamento mais estranho!

      Parece-me haver algum problema com a instalação do Google Chrome em sua máquina. Eu tentaria fazer uma limpeza de cache, cookies e arquivos temporários. Se não resolvesse, desinstalaria o Chrome e reinstalaria para avaliar.

      Espero que algo ajude!

      Um abraço!

      Excluir
    2. Obrigado Adelson, já fiz isso antes e não deu certo...valeu pela atenção!

      Excluir
  10. ME AJUDA ALGUEM? EU FAÇO INSPECIONAL ELEMENTO E ABRE O GOOGLE CHROME (UM NOVO) COM O INSPECIONAR ELEMENTO!

    TIPO NÃO APARECE MAIS NA MESMA GUIA ELE CRIA UMA PÁGINA EM TELA CHEIA

    ResponderExcluir
    Respostas
    1. Olá, Bryan!

      Para resolver isso, basta clicar no botão que fica no canto superior direito dessa janela, com a imagem de um retângulo com a borda inferior mais grossa.

      Um abraço!

      Excluir
  11. Ola estou com problemas no site que estou.
    Aparece um spam nos códigos de inspecionar elemento e afeta no comando da pagina do site, tentei excluir o spam mais ainda assim continua o que devo fazer?

    ResponderExcluir

Os comentários são muito bem vindos e importantes, pois enriquecem o conteúdo dos artigos. Há algumas regras na Política de Comentários que devem ser seguidas para que seu comentário seja publicado. As mais importantes:
- Não serão publicados comentários que não tenham relação com o artigo.
- Não respondo comentários por e-mail. Por isso, não deixe seu e-mail no comentário.
- Pedidos de visitas ao seu blog não serão publicados.
- Não serão publicados comentários que tenham link ou endereço do blog no corpo do texto. Para isso, assine com seu Nome/URL ou OpenID.

emo-but-icon

Início item

Contrate nossos serviços

Top Blogger 2013

Acompanhe as novidades

Divulgue o Gerenciando Blog

Gerenciando Blog - Dicas para blogs

Publicidade


Anuncie aqui