De certa forma, o trabalho dos programadores e designers web é convencer os utilizadores de que um website é uma entidade singular, mais do que uma série de elementos HTML formatados para ficarem bonitos. Com as ferramentas certas, porém, mesmo os não-desenvolvedores podem descascar a cortina em qualquer website para ver o que está realmente a acontecer nos bastidores.
Vocês podem estar familiarizados com o clássico truque “view page source”, que mostra o HTML bruto de uma página na janela do navegador. Mas, há uma maneira melhor de fazer o seu trabalho de detective: A funcionalidade de inspeccionar elementos permite-nos ver e até modificar o front-end de qualquer website, o que pode ser bastante útil ao construir um website ou aprender como os websites funcionam.
Neste post, explicarei o que significa “inspeccionar” elementos da página, e como fazê-lo em três browsers comuns.
O que significa “inspeccionar elemento”?
Inspeccionar elemento é uma característica dos browsers web modernos que permite a qualquer pessoa visualizar e editar o código fonte de um website, incluindo os seus ficheiros HTML, CSS, JavaScript, e ficheiros multimédia. Quando o código fonte é modificado com a ferramenta de inspecção, as alterações são mostradas ao vivo dentro da janela do navegador.
Inspect é a arma secreta de um profissional da web. Desenvolvedores, designers e marketeiros usam-no frequentemente para espreitar dentro de qualquer website (incluindo o seu próprio) a fim de pré-visualizar alterações de conteúdo e estilo, corrigir bugs, ou para aprender como é construído um website em particular. Por exemplo, se encontrar uma interface intrigante num website concorrente, o elemento de inspecção permite-lhe ver o HTML e CSS que o compõem.
Também pode pensar na característica de inspecção do seu navegador como uma espécie de “caixa de areia”: Brinque com uma página web o quanto quiser – mude o conteúdo, cores, fontes, layouts, etc. Quando terminar, basta refrescar a página para voltar tudo ao normal. Inspeccionar não muda o sítio web em si – apenas como aparece no seu próprio navegador – por isso, sinta-se à vontade para experimentar!
Inspect é também uma ferramenta incrivelmente valiosa para aqueles que aprendem a desenvolver a web. Em vez de visualizar código fonte simples, use o elemento inspeccionar para interagir com a página e ver como cada linha de código mapeia para um elemento ou estilo. Ao compreender melhor o que constitui a página web típica, pode comunicar eficazmente com os programadores em caso de erro, ou se quiser fazer uma alteração.
Inspect pode ser uma “ferramenta de desenvolvimento”, mas não precisa de escrever qualquer código ou instalar qualquer software adicional para o utilizar. Pode fazer tudo o que descrevi dentro do seu navegador – vamos aprender como.
Como inspeccionar elementos
Todos os navegadores web modernos têm uma ferramenta nativa para inspeccionar elementos. Aqui, vou explicar como utilizar a ferramenta de inspecção em três navegadores web de secretária: Google Chrome, Apple’s Safari, e Mozilla Firefox.
Como inspeccionar elementos em Chrome
Para usar o inspector no Google Chrome, navegue primeiro para qualquer página web (nestes exemplos, vou usar HubSpot.com). Uma vez lá, tem várias maneiras de abrir a ferramenta:
- clique direito em qualquer parte da página e escolha Inspectar. Clicando com o botão direito do rato num elemento específico da página abrirá esse elemento na vista do inspector.
- Na barra de menu superior, seleccione View > Developer > Developer Tools.
- Open Customize and control Google Chrome clicando no ícone de três pontos no canto superior direito da janela do navegador. A partir daí, escolher Mais Ferramentas > Ferramentas de desenvolvimento.
li>Utilizar o controlo de atalho-shift-C no Windows ou comando-opção-C em macOS.
O painel de Ferramentas de Desenvolvimento de Cromo será aberto na parte inferior da janela do navegador. Se quiser alterar a localização do painel, clique no ícone de três pontos no canto superior direito do painel (ao lado do ícone X), depois escolha a sua posição de doca preferida. Escolherei Dock à direita – isto facilita a visualização da página renderizada e da sua fonte:
No topo do painel de inspecção, verá separadores para Elementos, Consola, Fontes, etc. Estas são todas as ferramentas que podemos utilizar para avaliar o conteúdo e o desempenho de uma página. Contudo, tudo o que precisamos para inspeccionar está sob o separador Elementos.
A próxima área abaixo é o HTML da fonte da página actual. Demore algum tempo a explorar esta região, e repare como ao passar o cursor sobre o pedaço de código realça o elemento correspondente na página. O azul indica o conteúdo de um elemento, o verde corresponde ao preenchimento, e as áreas em laranja são margens.
p>Podemos também fazer o contrário – localizar um pedaço de código a partir do elemento da página. Para o fazer, clique no ícone de selecção do elemento no canto superior esquerdo do painel:
Next, clique num elemento de página. Verá o código-fonte revelado no painel de inspecção.
Visualização de partes superiores, podemos utilizar a inspecção para alterar o conteúdo da página. Comecemos por trocar algum texto. Primeiro, encontre algum conteúdo de texto no código-fonte. Depois, clique com o botão direito do rato no elemento e escolha Edit Text – isto abre uma entrada de texto em linha na qual pode escrever o que quiser. Quando desmarcar a entrada de texto, verá as alterações terem efeito:
Or, e se não houver texto nenhum? Basta seleccionar o elemento no código fonte e apagá-lo. O H1 desaparecerá da página.
Não se preocupe, porém – reaparecerá quando actualizar a página. Também pode ocultar qualquer elemento sem o apagar, clicando com o botão direito do rato sobre o elemento no código fonte e escolhendo Ocultar elemento.
P>Pode até adicionar novos elementos à página – clique com o botão direito do rato sobre um elemento no código fonte e escolha Editar como HTML. Verá um campo de texto onde pode colar HTML. Por exemplo:
Movendo para baixo o painel de inspecção cromado, vemos o separador Estilos. Isto mostra-nos o estilo CSS que foi aplicado ao elemento seleccionado. Clique em linhas de código para as reescrever, ou active/desactivar determinadas declarações, verificando/desmarcando as caixas junto às mesmas. Vamos fazer isto para a nossa <h1> propriedade do elemento font-weight:
Finalmente, vamos cobrir mais uma característica da característica de inspecção do cromo, a vista móvel. Ao construir um site, os designers precisam de considerar a forma como as suas páginas aparecem nos ecrãs de secretária, móveis, e tablet. Felizmente, o Chrome permite-lhe visualizar a mesma página Web em múltiplas resoluções de ecrã. Comece por clicar no ícone do dispositivo de alternância no canto superior esquerdo do painel:
Daqui, defina a resolução do ecrã manualmente ou escolha um dispositivo predefinido no menu, depois veja como a disposição da página responde. Também se pode rodar o ecrã e até pré-visualizar o desempenho a velocidades “mid-tier mobile” e “low-tier mobile”.
Como inspeccionar elementos no Safari
Para utilizar a ferramenta de inspecção do Safari, Web Inspector, precisamos primeiro de activar as ferramentas de desenvolvimento do Safari. Seleccione Safari > Preferências. Na janela de preferências em Avançadas, marque a caixa ao lado de Mostrar menu de desenvolvimento na barra de menu. Verá uma opção Develop adicionada ao menu acima.
Next, vá para a página web desejada. Há três maneiras de abrir o Web Inspector:
- clique direito em qualquer parte da página e escolha Inspectar Elemento. Clicando com o botão direito do rato num elemento específico da página abrirá esse elemento na vista do inspector.
- Seleccionar Desenvolver > Mostrar Web Inspector na barra de menu superior.
- Utilizar o comando de atalho-opção-I.
O inspector da Safari abre na parte inferior da janela por defeito. Para alterar esta configuração, clicar no ícone para acoplar o visor do lado direito ou aparecer numa janela separada – ambos estão localizados ao lado do ícone X no canto superior esquerdo do visor.
o painel de inspecção do Safari é composto por duas colunas. A primeira mostra a fonte HTML, e a segunda mostra a página CSS. Use o seu cursor para explorar o HTML de origem e ver qual o código das linhas que correspondem a cada região de página (azul destaca o conteúdo, verde destaca o acolchoamento, e laranja destaca as margens):
Podemos também inspeccionar directamente a página. Clique no ícone de selecção de elementos no topo do painel:
Agora, ao clicar num elemento da página, o Inspector Web revela o código fonte correspondente.
Como o inspector do Chrome, o Safari permite-nos modificar, adicionar, e remover elementos da página. Para editar a página, clique com o botão direito do rato sobre um elemento HTML no painel de inspecção, depois escolha uma opção do menu Editar. O inspector Web solicitará a introdução de novo texto, depois exibirá as suas alterações em tempo real:
Or, adicione um novo elemento à página clicando com o botão direito do rato numa linha de código e escolhendo uma opção do menu Adicionar. Neste exemplo, adicionei um novo <h1> elemento criança a um <div>:
Se quiser apagar um elemento da página, basta seleccionar algum código e apagá-lo. Ou, clique com o botão direito do rato e escolha Toggle Visibility para ocultar um elemento sem o apagar.
À direita temos a coluna Estilos, onde podemos alterar ou activar/desactivar declarações CSS para qualquer elemento, como por exemplo:
Ao testar alterações de conteúdo e estilo, vai querer ver o efeito nos ecrãs móveis, bem como nos ecrãs de secretária. O Modo de Design Responsivo do Safari permite-lhe pré-visualizar um website através de dispositivos comuns.
Para o utilizar, escolha Develop > Enter Responsive Design Mode. Neste modo, pode usar as mesmas ferramentas de inspector em páginas formatadas para dispositivos Apple, ou definir as dimensões você mesmo:
Como inspeccionar elementos no Firefox
Para abrir o Inspector Firefox, pode:
- Clicar à direita em qualquer parte da página e escolher Inspect Element. Clicando com o botão direito do rato num elemento específico da página abrirá esse elemento na vista do inspector.
- Select Tools > Web Developer > Inspector a partir da barra de menu superior.
- Utiliza o controlo de atalho-desvio-C no Windows ou a opção de comando-C em macOS.
O inspector Firefox aparece por defeito ao longo da parte inferior da janela. Para alterar a sua posição, seleccione o ícone de três pontos no canto superior direito do inspector, depois escolha uma opção de exibição alternativa.
O painel de inspecção do Firefox é comparável em características ao do Chrome e Safari. O código fonte HTML indica o elemento de página correspondente com códigos de cor – o conteúdo é azul, o acolchoamento é roxo, e as margens são amarelas:
Plus, pode encontrar o código seleccionando elementos na página – para entrar no modo de selecção, clique no ícone do cursor no canto superior esquerdo:
Clique em qualquer elemento da página para revelar a sua fonte no painel de inspecção.
Para modificar ou apagar um elemento da página, seleccione o seu código no inspector. Depois, ou clique duas vezes para alterar o texto, ou clique com o botão direito do rato e escolha Editar como HTML ou Criar Novo Nó para adicionar código. Ou simplesmente eliminar o código e ver as alterações resultantes na página.
Para alternar o estilo de um elemento, utilize a região de Estilos de Filtro na parte inferior do painel de inspecção. Desmarque a caixa junto a uma declaração CSS para a desactivar (ou escreva você mesmo um novo código):
Finalmente, as ferramentas Firefox também vêm com uma opção de pré-visualização móvel. Para a utilizar, clique no ícone Modo de Design Responsivo no canto superior direito do painel:
Modo de Design Responsivo permite-lhe escolher entre várias resoluções de ecrã predefinidas ou definir a sua própria, e pode também alternar a velocidade de ligação e a relação de píxeis do dispositivo:
Ap>Até agora mais próximo da inspecção
A partir do momento em que aprender os princípios básicos da ferramenta de inspecção do seu browser, poderá aperceber-se da quantidade de informação sobre os seus sites favoritos que está disponível ao público. Com alguns cliques, pode explorar como são exactamente construídas as páginas web, que estilos utilizam, como optimizam para motores de busca, como formatam em ecrãs móveis, e muito mais.
Para alguns, inspeccionar é apenas uma curiosidade divertida. Para outros, é uma vantagem fundamental para aprender como funcionam outros sites concorrentes. Quem quer que seja, é uma grande habilidade para ter, e pode fornecer conhecimentos para além da visualização da própria página web.
