HTML

Como Inspecionar Elemento e Alterar Estilo da Página no Google Chrome

como inspecionar elementos e alterar estilo da página

Você tem ideia de como inspecionar elemento pode te ajudar no desenvolvimento do seu site? Imagine que você quer verificar se uma cor, fonte ou outra alteração em um site vai ficar agradável no navegador, mas não quer mudar e testar direto nos arquivos. É aqui que você entende a finalidade do “Inspecionar Elemento”.

Se você entender como usar o inspecionar elemento, terá acesso a um mundo de possibilidades para realizar testes rápidos sem que isso prejudique a navegação dos usuários (você não quer testar arquivos com o site em funcionamento, não é?). Este tutorial vai mostrar como inspecionar elemento Chrome.

O que você vai precisar

Antes de começar, esteja preparado com:

  • Um site ativo para testar.
  • O navegador Google Chrome instalado.
  • Conhecimento básico em HTML/CSS.

1º Passo — Abrir o site e o Inspecionar elemento

Abra o navegador Google Chrome e insira a URL do site que quer alterar. Vamos usar o www.facebook.com.br como exemplo. Posicione o mouse no lugar onde você quer alterar, clique com o botão direito e clique na opção Inspecionar.

inspecionar elementos do facebook

2º Passo — Selecionar o Elemento Necessário

Agora, um elemento necessário deve ser selecionado automaticamente no código HTML na parte inferior (às vezes, o painel Inspecionar é aberto no lado direito da página). Você deve prestar atenção na guia Estilos na parte inferior, onde todos os estilos do arquivo CSS são tomados para o objeto que é selecionado.

inspecionar elementos no facebook
3º Passo  — Alterar o atributo do estilo

Neste exemplo, o cabeçalho da cor do plano de fundo do site será alterado e, em vez da cor anterior (#1d2129), testaremos como um cabeçalho do Facebook ficará na cor VERMELHA. Nós simplesmente deletamos o valor#1d2129 e inserimos o valor vermelho naquele lugar.

inspecionar elementos no facebook

Atenção: se você não está conseguindo alterar é porque está selecionado os elementos errados.

4º Passo — Testar a versão final

Agora você pode testar como as alterações aparecem no site. As alterações se aplicam automaticamente e você não precisa atualizar a página. Se a página for atualizada, todas as alterações desaparecerão e os arquivos do servidor serão carregados novamente. O que achou do site facebook.com com cabeçalho vermelho?

alterar cor do facebook

Conclusão

Esse é um método rápido para testar as mudanças de estilo de teste no site. Isso também permite que um desenvolvedor verifique como as possíveis alterações aparecem no site sem afetar os arquivos e deixando a visão atual do site para os visitantes.

Você aprendeu como inspecionar elemento e fazer essas alterações no Google Chrome, no entanto, todos os navegadores modernos têm um recurso semelhante. Existem também plugins para navegadores que permitem mudanças como essa.

Ariane G.

Ariane é jornalista, analista de conteúdo & SEO na Hostinger Brasil e tem o papel de contar para todo mundo o poder transformador da internet. Com foco em otimização, produção para web e técnicas de SEO, divide os dias entre pesquisas de palavras-chave e passagens aéreas (ela ama viajar).

5 Comentários

Deixe seu comentário!

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

  • Eu gostei, mas gostaria de saber especificadamente como posso alterar o tamanho do texto em um chat, tipo o chat terra usando o inspecionar elementos..
    A caixa de texto no chat tem um limite de caractéres programados para textos …
    Mas no entanto eu percebi que algúns usuários conseguem enviar textos bem grandes alterando o valor dos caractéres pelo inspetor de elementos…
    Gostaria de saber como fazer isso se puder explicar de uma forma simples e objetiva…
    desde já agradeço!

    • Oi, Daniel

      Nesse caso é preciso achar o limite de caracteres da mensagem e alterá-lo para a quantidade necessária, isso depende muito da ferramenta/plugin usado no chat, mas você pode usar a opção de pesquisa para ficar mais fácil de achar a parte que precisa ser alterada: http://prntscr.com/mwbspb

      Espero que dê certo! 😉

  • Muito bom o conteudo de vcs, parabens, ajuda muito para mim que estou começando pelo basico do basico, HTML, começo de uma grande jornada, obrigado a todos, pelo material, amei de verdade, e vou recomendar, e compartilhar, por que vale a pena.

Comece a Economizar Agora!

Hospedagem com tudo incluso e nome de domínio
R$2
29
/mês*