Truques do Element Inspector: 8 dicas essenciais! 🛠️

O Inspetor de Elementos no seu navegador pode parecer uma ferramenta exclusiva para desenvolvedores, mas você pode fazer coisas bem legais com ele, mesmo que não saiba nada sobre programação! 🚀

1 . Baixar Imagens

Talvez seja necessário baixar uma imagem de um site. Você tenta clicar com o botão direito e clicar em “Salvar imagem”, mas descobre que a opção está esmaecida ou o botão “Salvar imagem” não aparece. Outras vezes, você só consegue baixar uma miniatura da imagem, não o arquivo inteiro. 🤔 E aí?

Os desenvolvedores geralmente desabilitam esse botão “Salvar imagem” intencionalmente ou usam uma estrutura da web que não permite que imagens sejam baixadas dessa forma. Mas há uma solução útil no Inspetor de Elementos. Você pode obter qualquer recurso de imagem de um site, em tamanho real, em três etapas simples. 📸

Passo 1

Faz clique com o botão direito em em qualquer lugar da página e selecione “Inspecionar Elemento” ou “Inspecionar”. Você também pode usar o atalho de teclado específico para o inspetor no seu navegador. F12 funciona na maioria dos navegadores e sistemas operacionais. Estou usando o Firefox para esta demonstração, mas os passos são idênticos. 🖱️

Passo 2

Na janela do Inspetor de Elementos, clique na aba “Rede”. A aba de rede deve ter “Imagens” como um de seus submenus. Clique em “Imagens”. 🖼️

Agora recarregue a página para que todos os recursos de imagem apareçam na aba “Imagens”. Use o Botão Atualizar ao lado da barra de endereço do seu navegador ou pressione Ctrl+R. 🔄

Passo 3

E aí está. A biblioteca de imagens inteira deve ser carregada na lista. A lista é atualizada dinamicamente, então, à medida que mais imagens são carregadas no site, elas também aparecerão aqui. 🖼️✨

Você pode passar o mouse sobre um arquivo para ver sua pré-visualização e dimensões. Clique duas vezes para abrir o arquivo em uma nova aba, onde você pode salvá-lo usando o menu do botão direito. 💾

2 . Baixar vídeos

Assim como os ativos de imagem, às vezes os sites não permitem descarga vídeos diretamente. Mas você pode baixá-los carregando-os no inspetor de elementos. Depois de carregados no inspetor, basta clicar duas vezes no nome do arquivo para abri-lo em uma nova guia. 🎥

Passo 1

Abra a janela Inspetor de Elementos pressionando o atalho de teclado F12 (deve funcionar na maioria dos sistemas). Como alternativa, você pode clicar com o botão direito em qualquer lugar da página da web e selecionar “Inspecionar”. A janela Inspetor de Elementos deve aparecer. 🖱️

Passo 2

Clique na aba “Rede” e depois em “Mídia” para filtrar tudo, exceto arquivos de vídeo. Recarregue a página. Clicando no botão de atualização do navegador ou pressionando Ctrl+R. 🔄

Passo 3

Os arquivos de vídeo devem ser carregados em uma lista. Você não pode fazer uma visualização instantânea, mas pode clicar duas vezes em um arquivo para abri-lo em uma nova guia. Lá, você pode clicar com o botão direito e fazer o download. 🎬

3 . Capturar telas de tela de página inteira

Se você quiser salvar uma página da web inteira, você pode baixá-la rapidamente como um arquivo PDF ou HTML. Mas e se você quiser fazer uma captura de tela normal da página inteira? Aqui Vou explicar como fazer isso. 📸

O Firefox tem uma ferramenta de captura de tela dedicada no menu de contexto, então vou mostrar como fazer isso em Google Chrome e outros navegadores. 🌐

Abra a ferramenta Inspetor clicando com o botão direito em qualquer lugar da página ou pressionando F12.

Pressione Ctrl+Shift+P para abrir a janela Executar. escrevi Capturar captura de tela grande nesta janela. Clique nele. 📄

Uma janela “Salvar como” deve aparecer instantaneamente, permitindo que você salve a captura de tela da página inteira no formato JPG. 💾

4 . Finja que você está no telefone

A maioria dos sites carrega de forma diferente dependendo do tipo de dispositivo e do tamanho da tela. Se você quiser enganar o site e fazê-lo pensar que você está usando um dispositivo diferente (por qualquer motivo), você pode fazer isso facilmente com a ferramenta de inspeção. 📱

No Chrome, abra a janela Inspetor de Elementos no menu do botão direito ou com F12. Em seguida, clique no pequeno ícone de laptop e telefone no canto superior esquerdo. O Firefox tem um botão semelhante, chamado Modo de Design Responsivo (Ctrl+Shift+M). 🖥️

Você terá uma lista de dispositivos que pode emular e também poderá ajustar manualmente o tamanho dos tela. Depois de escolher um dispositivo móvel, você notará que seu navegador também simula gestos de toque. 📱✨

5 . Identificar fontes

Esta dica é para criativos, mas qualquer pessoa curiosa sobre fontes em um site pode usar esse truque. Você pode usar o ferramenta de inspeção para identificar e às vezes até baixar fontes. 🖋️

Primeiro, abra a ferramenta Inspetor de Elementos. Em seguida, clique na aba “Rede” (ela pode estar oculta no menu de estouro) e selecione “Fonte”.

Em seguida, pressione Ctrl+R. As fontes renderizadas serão carregadas na lista, provavelmente no formato WOFF. Você pode baixá-los diretamente clicando duas vezes no nome da fonte. Por exemplo, o How-To Geek usa Roboto como fonte padrão. 🔤

Se precisar de informações mais detalhadas sobre a fonte, vá até a aba “Elementos” e selecione “Estilos”. Role para baixo até a propriedade da família de fontes e clique nela. O texto correspondente será iluminado no site. Dessa forma, você pode identificar uma fonte com precisão. 🎨

6 . Editar texto em uma página (temporariamente)

Você sabia que pode editar temporariamente quase tudo em uma página da web usando o inspetor? Esta ferramenta permite que você edite o código que compõe o site, então se você souber algum código, você pode fazer a página ter a aparência que quiser (somente na sua máquina, até você recarregar a página). 🛠️

Mesmo que você não saiba nada de codificação, você pode editar texto básico em qualquer página da web. Pode ser uma brincadeira engraçada para pregar nos seus amigos. 😉

Destaque o texto na página que você deseja editar e clique com o botão direito nele. Em seguida, selecione “Inspecionar” ou “Inspecionar elemento”.

O trecho de texto relevante deve aparecer na aba Elementos. Basta clicar duas vezes e substituir o texto pelo que quiser. ✏️

Feche o Inspetor de Elementos e pronto! Observe que se você recarregar a página, suas alterações serão desfeitas. 🔄

7 . Excluir itens

Assim como na edição de texto, você também pode excluir elementos específicos de uma página da web. Novamente, as alterações durarão apenas até você recarregar a página. ❌

Clique com o botão direito do mouse no item que deseja excluir e selecione “Inspecionar” ou “Inspecionar elemento”.

Passe o mouse sobre os rótulos “

” até que todo o elemento seja destacado. Então basta pressionar a tecla Delete. 🔚

E assim, de repente, ele se foi! 🕵️‍♂️

8 . Identificar valores de cores

Outra dica para criativos: você pode obter valores RGB e HEX de qualquer cor em uma página da web com a ferramenta conta-gotas que você encontrará no inspetor de elementos. 🎨

Clique com o botão direito em qualquer lugar da página e abra o Inspetor. Por padrão, a janela Regras é aberta na guia Inspetor. Role para baixo para encontrar quaisquer propriedades rotuladas como cor.

A propriedade de cor deve ter um círculo ou quadrado colorido ao lado dela. Clique nele para abrir o seletor de cores e pressione o ícone do conta-gotas ao lado dele. 🖌️

Você pode arrastar este conta-gotas para qualquer lugar na página para encontrar valores de cor. Clicar no conta-gotas preencherá automaticamente a propriedade com o valor de cor que você acabou de selecionar. Você pode copiá-lo facilmente daqui. 📋

---

Esses dicas mal arranham a superfície do que é realmente possível usando o Inspetor de Elementos. Se você quiser se aprofundar no desenvolvimento web, aqui está um guia para você começar. 💻