Como inspecionar elementos do site em seu navegador
Se você já ficou curioso para ver como sua página ficaria com estilos diferentes, mas sem precisar aplicar nenhuma alteração, ficará feliz em saber que existe uma maneira de fazer isso. Na verdade, seu navegador vem com uma ferramenta útil que permitirá que você inspecione os elementos do site. Assim, você poderá ver as diferentes formas que seu conteúdo pode ter.
No texto abaixo, forneceremos todos os fundamentos de como inspecionar os elementos do site enquanto trabalha no WordPress.
O que exatamente é o elemento de inspeção?
Todos os navegadores mais recentes vêm com um conjunto de ferramentas integradas que mostram o código CSS, JavaScript e HTML de uma página específica. A ferramenta Inspecionar permite que os desenvolvedores da Web editem o código em seu navegador da Web, se necessário. Isso lhes dá a possibilidade de pré-visualizar quaisquer alterações sem realmente adulterar qualquer parte do código. Em outras palavras, eles são os únicos que podem ver essas alterações em seu navegador.
Essa opção pode ser especialmente benéfica para quem deseja implementar alterações em seu site WordPress, mas gostaria de visualizá-las primeiro antes de permitir que elas entrem em vigor. Por exemplo, se você é proprietário de um blog e deseja ver como o trecho do WordPress de qualquer uma de suas postagens seria exibido em seu navegador, você pode fazer isso facilmente com a ajuda desta ferramenta.
Isso não é útil apenas para proprietários de sites, mas também para qualquer escritor, profissional de marketing, agente de suporte e qualquer outra pessoa que tenha interesse em ver como o conteúdo em que trabalham pode ser.
Como inspecionar o elemento no Google Chrome
Existem duas maneiras de acessar esta ferramenta. Você pode clicar com o botão direito do mouse em qualquer área da sua página da Web e selecionar inspecionar ou clicar em CTRL + Shift + I no teclado.
Após realizar esta primeira etapa, seu navegador será automaticamente dividido em dois e o código-fonte de sua página aparecerá na janela menor. Nesta janela, você verá HTML à esquerda e CSS à direita.
Diferentes áreas da página da web serão destacadas conforme você arrasta o mouse sobre a fonte HTML. Se você clicar com o botão direito do mouse em um elemento específico da sua página da web, esse elemento será destacado.
Como editar e depurar o código
Com a ferramenta Inspecionar Elemento, você pode editar HTML e CSS. Para editar o HTML, basta clicar duas vezes em qualquer área do código-fonte HTML e depois editar o código.
Fazer o mesmo também é possível na área de CSS. Para adicionar uma nova regra de estilo, basta clicar no ícone + na parte superior.
Todas as alterações que você fizer serão exibidas imediatamente em seu navegador.
Mais uma vez, temos que enfatizar que nenhuma dessas alterações será salva. Você pode inspecionar qualquer elemento do site que desejar pelo tempo que desejar, mas esta é apenas uma ferramenta de depuração que não permite que você aplique alterações reais ao código. Em outras palavras, todas as suas alterações desaparecerão assim que você recarregar sua página.
É por isso que, se você realmente quiser fazer as alterações, terá que acessar a folha de estilo do seu tema WordPress e editar o código lá. No entanto, devemos observar que você deve criar um tema filho para esses fins.
Área do console para encontrar erros
Outra função importante da ferramenta Inspecionar Elemento é uma área do Console. Esta área específica exibe todos os erros existentes em seu site. Portanto, se você deseja depurar um erro em sua página, verificar esta área para inspecionar os erros pode ser útil para você.
Aprender a inspecionar os elementos do site não é apenas útil para o seu trabalho, mas também pode economizar tempo da sua equipe de suporte técnico se você já souber qual é o seu problema. Como há vários benefícios nessa poderosa ferramenta, recomendamos que você tente usá-la seguindo nosso guia.