O que é a ferramenta de inspecionar elemento do navegador + 7 truques

Podemos ter maneiras suficientes de manipular os vários elementos de nossos sites? Podemos fazer isso com temas, construtores de sites e adicionando CSS personalizado e código personalizado. Precisamos realmente de outra maneira de ver o código que cria nossas páginas da web e brincar com ele?

Sim, se com isso queremos dizer usar a ferramenta de inspeção de elementos do navegador no WordPress. Não é como nenhuma das formas usuais de manipular o site e oferece alguns recursos realmente divertidos e exclusivos.

Neste artigo, mostraremos a você:

  • O que é a ferramenta de Inspecionar elemento?
  • Como alterar o conteúdo e a aparência dos títulos
  • Como simular diferentes velocidades de rede
  • Como arrastar e soltar itens
  • Como usar o modo de design responsivo
  • O visualizador de imagens
  • O pote de biscoitos
  • Inspecione as configurações da ferramenta Item

O que é a ferramenta de Inspecionar elemento?

A ferramenta Inspecionar item é um recurso comumente encontrado em navegadores modernos como Firefox e Chrome. Também é conhecido pelo nome de Ferramentas de Desenvolvimento ou simplesmente DevTools. Eles são, como o nome indica, um grupo de ferramentas embutidas no navegador que permitem que você faça coisas muito boas, mas principalmente para ver e alterar o conteúdo e a aparência de uma página da web.

Abrir as ferramentas é tão fácil, basta pressionar a tecla F12 em um teclado se você tiver um PC; funciona em qualquer navegador. Você também pode clicar com o botão direito e escolher “Inspecionar Elemento”. Se você estiver usando um navegador Mac e Safari, deve primeiro habilitar o menu Desenvolvedor. Vai Safari> Preferências> Avançado e então clique no menu Mostrar Desenvolvimento na caixa da barra de menus. Depois disso, use Clique com o botão direito + Inspecionar item ou Opção + atalho cmd + i para abrir a ferramenta.

Inspecionar elemento clique com o botão direito
Inspecione a janela do elemento

Agora, você deve saber que navegadores diferentes podem ter opções diferentes em suas DevTools. Há uma discussão acalorada sobre se é o Firefox ou os navegadores baseados em Chromium que têm a vantagem, mas de qualquer forma, É importante lembrar que ocasionalmente você precisará de navegadores específicos para coisas específicas.. Por exemplo, se você precisa de um console onde pode alternar erros e avisos, mas também CSS e mensagens de log, você deve usar o Firefox. Nem o Chrome nem o Edge têm essa opção.

Outra coisa importante a lembrar é que as alterações feitas no DevTools não criam alterações permanentes no site. A beleza de usá-los é que você pode fazer alterações em tempo real em suas páginas da web sem se preocupar em quebrar algo acidentalmente. É uma caixa de areia gigante onde você pode experimentar coisas e ocasionalmente encontrar soluções para alguns problemas.. Agora, vamos dar uma olhada em algumas das coisas que você pode fazer com este conjunto de ferramentas.

Usaremos a ferramenta Inspecionar Itens do Firefox, mas isso não significa que você não possa fazer essas dicas e truques em outros navegadores também. Eles podem estar disponíveis com nomes diferentes ou em locais diferentes.

Alterar o conteúdo e a aparência dos títulos de uma página

Vamos começar com algo simples. Vá ao seu site, abra qualquer uma de suas páginas, destaque um dos títulos que possui e clique na opção da ferramenta Inspecionar item. DevTools deve abrir com o título em questão destacado na ferramenta de inspeção de HTML.

Inspecionar HTML do elemento

Role a janela Estilos de filtro até encontrar as opções de fonte e cor e divirta-se. Você pode até usar uma ferramenta de conta-gotas para colorir a legenda com outra cor do seu site, mas não tem certeza do que é.

Inspecionar seletor de cores do elemento

Simulação de velocidade de rede

Quer ver a velocidade de carregamento do seu site em diferentes velocidades de rede? A ferramenta Inspecionar itens permite que você faça isso. Se você está se perguntando a rapidez com que sua página da web carregaria em uma rede 2G, basta navegar do Inspetor para a Web e procurar o menu No Throttling.

Inspecione a rede do elemento
Inspecione a rede do elemento

Abra o menu e escolha 2G. Recarregue a página e você notará o rastreamento repentino. A opção também está presente no Chrome: Você pode até criar perfis de limitação personalizados a partir das configurações e abri-los na guia Rede.

Arraste e solte elementos

Não deixe todo o código confundir você. você pode arrastar e soltar itens no painel Itens para alterar seu lugar na página.

Inspecionar elemento arrastar e soltar

Modo de layout responsivo

Todo desenvolvedor de site precisa de uma maneira de ver como seu site aparece e se comporta em uma tela pequena. Mas como é ainda mais prático desenvolver e projetar em uma tela maior, temos que contar com emuladores de dispositivos para nos ajudar a ver como tudo ficaria em um smartphone, por exemplo.

Com as ferramentas de inspeção de itens, o modo de design responsivo está integrado. Você pode alterá-lo facilmente pressionando o botão próximo ao botão que fecha a ferramenta Inspecionar Elementos.

Inspecione o modo de resposta do elemento
Inspecione a visualização do modo responsivo do item

O visualizador de imagens

Um pequeno recurso interessante que você verá no DevTools do Firefox é o visualizador de imagens: passe o mouse sobre qualquer imagem no inspetor CSS e a imagem aparecerá.

Inspecione a imagem do item

O pote de Cookies

Quer saber quais cookies sua página cria ou os iframes dentro dela? A maneira mais fácil de descobrir seria ir para o Inspetor de Armazenamento, parte do DevTools, e ver uma lista completa.

Inspecionando o Elemento Cookie Jar

No Chrome, você pode ir para a janela do aplicativo e nas opções de armazenamento, procure por Cookies.

A ferramenta Inspecionar elemento tem configurações

Caso você tenha perdido, a ferramenta tem suas próprias configurações. Você pode acessá-los pressionando a tecla F1 e escolhendo as ferramentas padrão do desenvolvedor, botões da caixa de ferramentas, temas, opções do inspetor, preferências do editor e configurações avançadas.

Inspecione a configuração do elemento

Você deve dedicar algum tempo para se familiarizar com as opções disponíveis aqui. Eles variam desde a capacidade de alternar entre um tema escuro e claro, até adicionar um botão de captura de tela e desativar o JavaScript.

conclusão

O WordPress já oferece potência mais do que suficiente quando se trata de moldar um site e suas páginas. Mas, ocasionalmente, ou até com mais frequência, é bom ter uma maneira de testar todos os tipos de coisas ou encontrar soluções para problemas em um ambiente seguro.

A ferramenta Inspecionar elemento no navegador faz exatamente isso para os desenvolvedores. DevTools permite que você desfrute de um playground onde você pode mudar completamente a aparência de uma página ou o que ela contém, sem quaisquer consequências. Se você está fazendo isso para exercitar a criatividade ou para tornar seu site mais seguro, você deve aceitar que o recurso é mais do que útil.

Compartilhe este Link:

Compartilhar no facebook
Compartilhar no twitter
Compartilhar no linkedin
Compartilhar no pinterest
Compartilhar no email
Compartilhar no whatsapp
Compartilhar no telegram

Deixe um comentário

Receba nossos preços
e condções direto no seu email

Por favor, preencha os campos abaixo:

Preferência de contato: