Elemento de Inspecção: Como Alterar Qualquer Página Web em Qualquer Navegador – Tutorial

Como Alterar Qualquer Página Web em Qualquer Navegador

Quando se vê uma página Web, há um monte de código que não se vê, a menos que se saiba onde procurar. Tudo é composto por código, desde a imagem de fundo até à tipografia; desde os vídeos até aos botões. Tudo funciona graças a instruções complexas. Mas, como se vê o back-end?

Como se descasca a camada exterior para ver o código?

A ferramenta Inspect Element!

p>Vejamos como usar a ferramenta Inspect Element.

O que é Inspect Element?

Inspect element é uma das ferramentas de desenvolvimento incorporadas nos navegadores web Google Chrome, Firefox, Safari, e Internet Explorer. Ao aceder a esta ferramenta, pode realmente visualizar – e até editar – o código fonte HTML e CSS por detrás do conteúdo web. Depois, ao fazer alterações ao código, estas alterações são exibidas em tempo real na janela do seu navegador. E não se preocupe em quebrar a página enquanto escava no código; as suas edições só terão efeito durante a duração da sua sessão, e só são visíveis no seu ecrã. Por outras palavras, Inspect Element pode dar-lhe uma espécie de experiência ‘e se’ sem afectar nenhum outro utilizador.

Para o visitante médio do site, Inspect Element é pouco mais do que uma curiosidade, talvez valha alguns minutos de diversão. Mas para os programadores de sítios, codificadores, e aqueles que estão interessados em aprender programação, esta ferramenta para programadores oferece uma série de vantagens.

Benefícios de Inspect Element

Se quiser realmente compreender alguma coisa, é bom poder experimentar com ela. Inspect Element dá-lhe a vantagem de ser capaz de mexer no código que alimenta um site e aprender como ele funciona.

Vamos dizer que está apenas a começar a codificar. Se visitar uma página web, verá que existe um elemento no site que realmente capta a sua atenção. Talvez seja algo que tenha estado interessado em incorporar numa página em que tenha estado a trabalhar; talvez seja algo de vanguarda que nunca tenha considerado antes. Seja como for, está curioso sobre o código. Por isso, usa o Inspect Element para ver exactamente o que se passa.

Or, digamos que está no processo de codificação da sua própria página. Inspect Element permite-lhe visualizar as alterações sem as implementar de facto. Torna possível identificar e reparar facilmente o código quebrado. Porque o elemento inspeccionar dá-lhe o poder de alterar qualquer texto na página, pode remover detalhes pessoais de ecrãs partilhados sem ter de ligar o antigo editor de fotografia.

E, se estiver interessado em optimizar a sua página para melhores classificações nos motores de busca (um factor chave no marketing digital), a utilização do elemento inspeccionar em páginas concorrentes pode dar-lhe uma ideia de quais as palavras-chave em que se concentram. Também pode usar a ferramenta para testar a velocidade de carregamento do seu sítio.

Estes são apenas alguns exemplos do que pode usar Inspect Element. Mas antes de poder fazer qualquer uma destas coisas, precisa primeiro de saber como aceder ao mesmo.

Acessando Inspect Element in Different Web Browsers

Inspect Element é suficientemente útil para ser incluído como uma ferramenta de desenvolvimento em todos os principais navegadores web de secretária. Eis como aceder ao Inspect Element no Google Chrome, Firefox, Safari, e Internet Explorer.

Google Chrome

Para usar o Inspect Element no Google Chrome, tem algumas opções diferentes:

  • Clique direito em qualquer área da página web (incluindo áreas em branco) e depois seleccione Inspect no menu.
  • Acesso ao menu de definições do Google Chrome (os três pontos verticais no canto superior direito do painel de controlo da janela do navegador). No menu pendente, seleccionar More Tools, depois Developer Tools.

Firefox

Simplesmente ao Google Chrome, o Firefox também fornece múltiplas opções de acesso Inspect-Element:

  • Li>Clique com o botão direito em qualquer área da página web (incluindo áreas em branco) e depois seleccione Inspeccionar no menu.
  • Aceder ao menu de definições do Firefox. Escolha Tools, depois seleccione Web Developer, e finalmente seleccione Inspector.

Safari

Safari segue o exemplo, mas antes de poder usar Inspect Element, terá de aceder ao menu de definições do Safari. No canto superior esquerdo do seu ecrã, seleccione Preferências, e depois marque a caixa que diz Mostrar menu de desenvolvimento na barra de menus. Uma vez feito isso, depois use as seguintes opções:

  • Clique direito em qualquer área da página web (incluindo áreas em branco) e depois seleccione Inspect no menu.
  • Acesso à barra de menu e clique em Develop, depois seleccione Show Web Inspector no menu dropdown.

Internet Explorer

Internet Explorer também oferece ferramentas de desenvolvimento que permitem a funcionalidade Inspect-Element:

  • Li>Clique com o botão direito do rato na página, e seleccione Inspect Element no menu popup.
  • Acesso ao painel de controlo clicando no ícone da engrenagem no canto superior direito da janela do navegador, ou premindo Alt+X. Seleccione F12 Developer Tools no menu pendente.

Keyboard Shortcuts

P>Pode também saltar os diferentes menus e, em vez disso, aceder directamente ao Inspect Element usando atalhos de teclado. Em qualquer página web, introduza os seguintes comandos de teclado:

  • Mac: ⌘ + Shift + C
  • Windows/Linux: F12 ou Ctrl + Shift + C

Tutorial: Como Alterar Texto num Website

Você sabe o que é Inspect Element, que vantagens oferece, e como aceder a ele em cada um dos principais navegadores. Então, o que resta?

Que tal uma experiência fácil que pode realizar neste momento? Usando esta mesma página web, vamos usar Inspect Element para brincar com o texto que pode ver no seu ecrã. Para este exemplo, vamos utilizar o Google Chrome.

Inicie realçando algum do texto. Para o bem deste tutorial, vamos usar a seguinte frase:

Código é uma explosão!

Clique com o botão direito do rato na área realçada. Seleccione Inspect no menu pendente.

Tutorial - Como Usar o Elemento de Inspecção

Vai aparecer uma nova janela dentro do navegador, sobreposta na página web. Esta janela mostra-lhe o código a ser utilizado na página.

Tutorial - Como Usar o Elemento de Inspecção
Tutorial - Como Usar o Elemento de Inspecção

Digite algo novo. Pode digitar o que quiser, mas vamos mantê-lo simples:

Código é uma explosão absoluta!

Tutorial - Como Usar o Elemento de Inspecção

Imprimir enter.

Tutorial - Como Usar o Elemento de Inspecção

As alterações devem ser actualizadas na página.

Congratulações, apenas se utilizou elemento de inspecção para alterar o texto.

Dig Deeper

A alteração de frases e parágrafos com elemento de inspecção é apenas o início; com um conhecimento mais profundo das linguagens de programação, pode-se transformar qualquer página web em praticamente tudo o que se quiser. Afinal, cada página corre em código, e quando controla esse código, controla a página.

Quando acede a uma página web através do seu navegador, o que está a ver é o culminar de muito código, mas isso não é motivo para se sentir intimidado. Ao utilizar ferramentas de desenvolvimento da Inspect Element, pode colocar cada linha desse código sob um microscópio, melhorando a sua compreensão no processo. Inspect Element é uma ferramenta vital para programadores e estudantes, e também pode ser muito divertido brincar com ela.

Recommended Reading

How Long Does It Take to Learn Coding?

How to Become a Software Engineer: Sete Passos

Uma Lista de Linguagens de Programação que Todo o Programador Deve Saber (Ou pelo menos Saber Sobre)