Muitos de nós temos curiosidade em entender o design de um site sem o risco de fazer alterações permanentes. A Ferramenta Inspecionar Elemento serve como uma ferramenta inestimável para esse propósito, permitindo que você faça alterações temporárias diretamente no seu navegador.
Muitos dos nossos usuários iniciantes nos disseram que acham a edição de HTML/CSS difícil. Sempre recomendamos que esses usuários experimentem a ferramenta Inspecionar.
É simples e fácil de usar, e você pode ver os resultados das suas modificações instantaneamente. Nós a usamos o tempo todo para pré-visualizar alterações que vão desde pequenas edições de texto até reformulações completas de layout.
Este guia irá guiá-lo pelos passos para usar a Ferramenta Inspecionar Elemento de forma eficaz no seu site WordPress, ajudando você a dar vida às suas ideias de design de forma segura e eficiente.
O que é a Ferramenta Inspecionar?
Nós confiamos nas ferramentas de desenvolvedor do navegador inúmeras vezes para solucionar problemas e experimentar alterações em sites. Navegadores modernos como Google Chrome, Firefox, Safari e Microsoft Edge vêm equipados com ferramentas integradas projetadas para ajudar desenvolvedores web a depurar erros sem esforço.
Essas ferramentas exibem o código HTML, CSS e JavaScript de uma página, mostrando como o navegador o processa. Para nós, é como tentar nossos códigos de trapaça sem afetar o site real.
Você pode acessar essas ferramentas de desenvolvedor em qualquer página clicando com o botão direito e selecionando 'Inspecionar' no menu. É uma das nossas ações preferidas ao testar ajustes de design ou depurar um problema.
Com a ferramenta Inspecionar, você pode editar temporariamente código HTML, CSS ou JavaScript e ver as alterações ao vivo na sua tela. Nós a usamos para pré-visualizar tudo, desde pequenos ajustes de estilo até ideias completas de layout. (Mostraremos como fazer isso mais adiante neste artigo.)
A melhor parte? Essas alterações não afetam a página da web real. Assim que você recarregar a página ou fechar o navegador, tudo voltará ao normal. Isso a torna uma ferramenta segura e confiável para testar ideias.
Achamos que é particularmente útil para proprietários de sites DIY e desenvolvedores que precisam de uma maneira rápida de testar ou depurar. Aqui estão apenas alguns casos de uso:
- Aplique novos estilos CSS e veja imediatamente como eles ficam no seu site.
- Redatores técnicos podem editar HTML para capturas de tela, ocultar informações confidenciais ou personalizar o texto visível.
- Desenvolvedores frequentemente a usam para identificar erros comuns do WordPress, depurar problemas de JavaScript ou resolver erros 404.
E isso é apenas a ponta do iceberg. Essas ferramentas são incrivelmente versáteis, tornando-as uma favorita para qualquer pessoa que trabalhe com sites.
Neste guia, focaremos na ferramenta Inspecionar do Google Chrome, pois é o navegador mais popular entre nossos leitores. No entanto, Firefox, Safari e Microsoft Edge têm ferramentas semelhantes que podem ser acessadas através de suas opções de Inspecionar.
Pronto para começar? Use os links abaixo para pular para qualquer seção do artigo e acompanhar:
- Lançando a Ferramenta Inspecionar e Localizando o Código
- Editando e Depurando Código no Elemento Inspecionar
- Encontre Facilmente Erros no Seu Site
- Como Usar a Ferramenta Inspecionar no Celular (iOS ou Android)?
- Como Aplicar Alterações do Elemento Inspecionar Permanentemente no WordPress
- Melhores Práticas ao Usar o Elemento Inspecionar
- Perguntas Frequentes Sobre o Elemento Inspecionar
- Tutorial em Vídeo
- Saiba Mais Sobre a Personalização do WordPress
Lançando a Ferramenta Inspecionar e Localizando o Código
Você pode lançar a ferramenta inspecionar pressionando CTRL + Shift + I (Command + Options + I para MacOS) no seu teclado.
Você também pode clicar em qualquer lugar de uma página da web e selecionar ‘Inspecionar’ no menu do navegador.
Você também pode acessar a ferramenta a partir do menu principal do navegador.
No Google Chrome, clique no menu de três pontos no canto superior direito e, em seguida, role para baixo até Mais ferramentas » Ferramentas do desenvolvedor.
Sua janela do navegador será dividida em duas.
De um lado, você verá a página que estava visualizando. Do outro lado, você verá o código HTML e as regras CSS.
A posição da janela do Inspetor varia, mas você pode alterá-la clicando no menu de três pontos e selecionando a posição ‘Dock side’. Você pode ver o ícone para clicar na imagem acima.
Mover o mouse sobre o código-fonte HTML destacará a área afetada na página da web.
Você também notará que as regras CSS mudam conforme você clica em um elemento dentro do código HTML.
Você também pode levar o ponteiro do mouse até um elemento na página da web, clicar com o botão direito e selecionar a ferramenta ‘Inspecionar’.
O elemento será destacado no código-fonte.
Editando e Depurando Código no Elemento Inspecionar
Tanto o HTML quanto o CSS na janela do inspetor de elementos são editáveis. Você pode dar um duplo clique em qualquer lugar no código-fonte HTML e editar o código como desejar.
Você também pode dar um duplo clique e editar quaisquer atributos e estilos no painel CSS.
Para adicionar uma regra de estilo personalizada, basta clicar no ícone + na parte superior do painel CSS.
À medida que você faz alterações no CSS ou HTML, essas alterações serão refletidas no navegador instantaneamente.
Essas alterações serão salvas na memória temporária do seu navegador e não afetarão seu site.
Nota Importante: Quaisquer alterações que você fizer aqui não são salvas em lugar nenhum. O inspetor de elementos é uma ferramenta de depuração e não grava suas alterações de volta nos arquivos do seu servidor. Se você atualizar a página, todas as suas alterações serão perdidas.
Para fazer as alterações, você terá que adicionar CSS personalizado ao seu tema ou editar o modelo relevante para adicionar as alterações que você deseja salvar.
Antes de começar a editar seu tema existente do WordPress usando a ferramenta Inspecionar Elemento, certifique-se de que você crie um backup do WordPress.
Encontre Facilmente Erros no Seu Site
A ferramenta Inspecionar tem uma área chamada Console, que mostra erros que ocorreram durante o carregamento da página.
Ao tentar depurar um erro ou solicitar suporte de autores de plugins, é sempre útil olhar aqui para ver se há algum erro ou aviso.
Usando a aba Console, você pode solucionar vários problemas comuns. Por exemplo, estas são apenas algumas coisas que você pode fazer com o console Inspecionar:
- Descobrir por que uma imagem que você adicionou não está sendo exibida
- Por que um plugin ou tema não está se comportando corretamente
- Qual plugin ou extensão de navegador pode estar causando o conflito
Mesmo usuários não técnicos podem olhar para isso para encontrar pistas sobre a origem de um problema.
Por exemplo, se você é um cliente OptinMonster se perguntando por que seu optin não está carregando, você pode facilmente encontrar o problema "Seu slug de página não corresponde."
Usar ferramentas como o Console Inspecionar Elemento pode ajudá-lo a coletar detalhes técnicos úteis quando algo não está funcionando corretamente em seu site. Compartilhar essas informações — como mensagens de erro ou recursos ausentes — pode facilitar para as equipes de suporte de plugins ou temas entenderem e resolverem o problema mais rapidamente.
Como Usar a Ferramenta Inspecionar no Celular (iOS ou Android)?
As opções de desenvolvedor não são ativadas por padrão em navegadores móveis, pois os fabricantes assumem que a maioria dos usuários móveis não as usaria.
A maneira mais fácil de solucionar problemas e usar a ferramenta de inspeção para problemas móveis é usar o recurso de emulação móvel em seu navegador de desktop.
Você pode então escolher um dispositivo no topo ou as dimensões da tela. O Chrome então emulará esse tamanho de tela para você.
Como Aplicar Alterações do Elemento Inspecionar Permanentemente no WordPress
Ao trabalhar com o Inspecionar Elemento, você pode se perguntar como tornar permanentes as alterações que testou. Nesta seção, explicaremos como fazer isso em seu site WordPress.
Primeiro, identifique as alterações que você deseja manter e copie-as para um arquivo de texto usando um aplicativo como o Bloco de Notas ou o TextEdit. Em seguida, você pode tentar um dos métodos abaixo.
1. Adicionar Alterações de CSS ao Seu Site WordPress Usando o Editor do Site
Após copiar, acesse seu painel do WordPress e vá para Aparência » Editor para abrir o editor do site.
Clique na janela de visualização para começar a editar seu site.
Dentro do editor, clique no botão Estilo na parte superior e, em seguida, clique no menu de três pontos e selecione ‘CSS Adicional’.
Isso abrirá o painel de CSS Adicional, onde você pode simplesmente colar o CSS que deseja salvar.
Você pode ver suas alterações aplicadas instantaneamente na janela de visualização. Não se esqueça de clicar em ‘Salvar’ para publicar suas alterações.
2. Adicionar CSS Personalizado ao Seu Site Usando WPCode
Se você precisa de uma maneira mais fácil de adicionar CSS personalizado ao seu site, este método é para você.
Para este método, usaremos o WPCode. É o melhor gerenciador de snippets de código para WordPress e permite adicionar código personalizado, HTML e CSS ao seu site sem editar seu tema.
Observação: Existe também uma versão gratuita do WPCode que você pode usar. No entanto, recomendamos a atualização para um plano pago para desbloquear todo o seu potencial.
Usamos o WPCode em nossos próprios sites porque ele facilita o gerenciamento de código. Mais importante ainda, ele tem um recurso de segurança integrado que desabilita seu código se ele retornar um erro. Para mais detalhes, veja nossa análise completa do WPCode.
Primeiro, você precisa instalar e ativar o plugin WPCode. Se precisar de ajuda, veja nosso tutorial sobre como instalar um plugin do WordPress para obter instruções.
Após a ativação, basta ir para Trechos de Código » + Adicionar Novo no painel de administração do WordPress.
Em seguida, você pode passar o mouse sobre a opção ‘Adicionar seu código personalizado (Novo trecho)’ na biblioteca de trechos de código e clicar em ‘+ Adicionar trecho personalizado’.
Depois disso, você precisa selecionar ‘Trecho de CSS’ como o tipo de código na lista de opções que aparecem na tela.
Em seguida, na parte superior da página, você pode adicionar um título para o seu trecho de CSS personalizado. Pode ser qualquer coisa que ajude você a identificar o código.
Depois de inserir um título, você pode escrever ou colar seu CSS personalizado na caixa ‘Pré-visualização do código’.
Após adicionar seu código CSS personalizado, clique no botão ‘Salvar trecho’ e clique no alternador de status para ‘Ativo’.
3. Adicionar trecho HTML ao seu site WordPress
Para adicionar alterações HTML ao seu site, você precisa colá-las no arquivo de modelo correto no seu tema.
Para descobrir qual arquivo de tema editar, consulte nosso guia sobre como encontrar quais arquivos editar no tema do WordPress.
Você precisará usar um cliente FTP ou o aplicativo gerenciador de arquivos sob sua conta de hospedagem para editar os arquivos do seu tema.
Alternativamente, você também pode usar o WPCode para adicionar trechos HTML personalizados. Basta adicionar um novo trecho de código e selecionar HTML como seu tipo de trecho.
Depois disso, forneça um título para o seu trecho HTML que ajude você a identificá-lo.
Abaixo disso, adicione seu código HTML personalizado na caixa de pré-visualização.
O WPCode permite que você escolha onde deseja inserir qualquer trecho de código.
Role para baixo até a área ‘Inserção’ e clique em ‘Localização’ para ver as opções disponíveis.
Após selecionar uma localização, não se esqueça de clicar em ‘Salvar’ e alternar o status do trecho para Ativo.
Agora você pode visitar seu site para vê-lo em ação.
Melhores Práticas ao Usar o Elemento Inspecionar
Usar a ferramenta Inspecionar pode parecer como abrir uma janela secreta para o design da web. Mas para aproveitar ao máximo, aqui estão algumas práticas recomendadas, especialmente úteis se você está apenas começando:
- Comece explorando com segurança: Quaisquer alterações que você fizer no Inspecionar Elemento são temporárias. Portanto, sinta-se à vontade para experimentar sem medo — nada quebra permanentemente.
- Experimente diferentes estilos e layouts: Teste cores, fontes, espaçamento ou posicionamento para ver o que fica bom antes de aplicar as alterações ao seu tema ou folha de estilo real.
- Faça anotações sobre o que funciona: Se gostar de uma alteração, copie o CSS e cole-o em um arquivo de texto ou aplicativo de anotações para não perdê-lo.
- Teste em diferentes navegadores: Um ajuste de design que fica ótimo no Chrome pode parecer estranho no Firefox ou Safari, portanto, sempre verifique novamente.
- Mantenha a organização: Mantenha um registro de todas as alterações que você fez e o motivo. Isso ajuda se você precisar reverter algo ou solucionar problemas mais tarde.
- Não edite sites ativos casualmente: Se você está aprendendo, é melhor praticar em um site de staging ou em um ambiente de teste para evitar problemas acidentais no seu site ativo.
Perguntas Frequentes Sobre o Elemento Inspecionar
As seguintes são algumas das perguntas mais frequentes feitas por nossos usuários sobre o uso da ferramenta Inspecionar.
1. Posso usar a ferramenta Inspecionar em qualquer site ou apenas no meu?
Sim, você pode usar a ferramenta inspecionar em qualquer site. Simplesmente clique com o botão direito e selecione a ferramenta Inspecionar no menu do navegador para ver o código por trás de qualquer site. Estudar o código em outros sites é uma maneira rápida de aprender e melhorar suas próprias habilidades de CSS/HTML.
2. Por que não consigo encontrar a ferramenta Inspecionar no meu navegador?
O Google Chrome pode ocultar a opção Inspecionar no menu de clique com o botão direito, especialmente quando várias extensões adicionam suas próprias opções ao menu de clique com o botão direito.
Além disso, a função de clique com o botão direito pode ser desativada usando JavaScript, o que pode ocultar a opção ‘Inspecionar’. Nesses casos, você ainda pode abrir as Ferramentas do Desenvolvedor usando o atalho de teclado Ctrl + Shift + I (ou Cmd + Option + I no Mac) ou navegando para Menu » Mais Ferramentas » Ferramentas do Desenvolvedor.
3. Posso ver as alterações em diferentes navegadores?
Sim, o Inspecionar Elemento está disponível nos principais navegadores, permitindo que você teste e observe as alterações no Chrome, Firefox, Safari e Edge.
4. Como o Inspecionar Elemento pode ajudar na depuração de JavaScript?
O Inspecionar Elemento inclui uma aba Console onde você pode ver erros e avisos de JavaScript. Essa ferramenta é incrivelmente útil quando você precisa entender o que está dando errado com os scripts em seu site. É como ter uma linha direta para o processo de pensamento do navegador, permitindo que você identifique problemas rapidamente.
5. O Inspecionar Elemento pode afetar a segurança do meu site?
Não, usar o Inspecionar Elemento não afetará a segurança do seu site. É uma ferramenta do navegador que altera temporariamente a forma como o site aparece ou se comporta em sua máquina local, sem alterar os dados de back-end ou sua integridade.
Tutorial em Vídeo
Saiba Mais Sobre a Personalização do WordPress
Se você quiser explorar mais como usar a ferramenta Inspecionar para fazer mais coisas em seu site WordPress, os seguintes recursos serão um bom ponto de partida:
- Como personalizar seu tema WordPress – Este guia para iniciantes mostra como personalizar seu tema WordPress passo a passo.
- Como adicionar CSS personalizado no WordPress corretamente – Este tutorial mostra várias maneiras de adicionar facilmente seu CSS personalizado no WordPress.
- Como otimizar a entrega de CSS no WordPress – Muitos arquivos CSS individuais podem degradar o desempenho. Este tutorial mostra como otimizar a entrega de CSS para aumentar a velocidade do WordPress.
- Planilha de referência de CSS gerado pelo WordPress para iniciantes – Este guia prático mostrará muitas classes CSS que o WordPress adiciona a diferentes elementos por padrão. Você pode então usar essas classes CSS em seu código CSS personalizado para alterar a aparência desses elementos.
Esperamos que este artigo tenha ajudado você a aprender o básico do Elemento de Inspeção e como usá-lo em seu site WordPress. Você também pode querer ver nossa planilha de referência de CSS gerado pelo WordPress para acelerar suas habilidades de desenvolvimento de temas ou nosso kit de ferramentas WordPress definitivo para profissionais.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Dennis Muthomi
O recurso de emulação de celular é a melhor ferramenta. Outro dia, eu estava tentando descobrir por que meu site não estava sendo exibido corretamente em iPhones. O recurso de emulação me permitiu diagnosticar rapidamente que um elemento não estava dimensionando corretamente.
Ser capaz de depurar visualmente problemas de responsividade em vários dispositivos sem precisar testar em dispositivos físicos economiza muito tempo.
Dayo Olobayo
Você tem a ideia certa. A emulação móvel é super útil para verificações básicas. É importante lembrar, no entanto, que emuladores não conseguem replicar perfeitamente todas as combinações de dispositivos e navegadores. Testar em alguns dispositivos físicos sempre que possível ainda é uma boa prática.
Mrteesurez
Sim, concordo totalmente, o recurso de emulação de celular muda o jogo. Tive uma experiência semelhante em que meu site parecia perfeito no desktop, mas tinha problemas em dispositivos móveis específicos. Usando a emulação, identifiquei rapidamente que meu menu de navegação estava quebrando em telas menores. Este recurso não só me poupou o incômodo de testar em vários dispositivos físicos, mas também me permitiu corrigir o problema em tempo real. É uma ferramenta essencial para qualquer pessoa séria sobre design responsivo, garantindo que seu site fique ótimo, não importa onde seja visualizado.
Obrigado por compartilhar sua experiência.
Mrteesurez
Isso é útil, eu não sabia que era possível editar o código e ver as alterações em tempo real.
Minha pergunta:
1) Posso usar a ferramenta de inspeção para ver o código PHP ou qualquer código de backend??
2) Existe alguma maneira de usar a ferramenta de inspeção no celular??
WPBeginner Support
Você não usaria a ferramenta de inspeção para ver PHP, ela é normalmente usada para verificar HTML, CSS e JavaScript. Para celular, não está disponível por padrão, mas existem aplicativos para adicionar essa capacidade ao celular.
Admin
Mrteesurez
Obrigado pelo suporte. Em resumo, a ferramenta de inspeção é apenas para verificar códigos de frontend, ok.
Qual aplicativo posso usar para adicionar a capacidade de inspecionar no celular?
Comentários WPBeginner
A melhor opção pode ser usar uma ferramenta de teste entre navegadores, como algumas das listadas neste guia: https://www.wpbeginner.com/wp-tutorials/how-to-test-a-wordpress-site-in-different-browsers-cross-browser-testing-made-easy/
Para inspeções simples, você pode até usar um navegador em um desktop e usar a visualização móvel: https://www.wpbeginner.com/beginners-guide/how-to-preview-the-mobile-layout-of-your-site/
Jiří Vaněk
Obrigado por este guia. Agora é muito mais fácil para mim encontrar a classe CSS no código para fazer quaisquer alterações. O código CSS pode ser feito por IA para mim, porque não sou bom em codificação, e o resto consigo encontrar nas ferramentas de inspeção. É tudo o que preciso.
hossam ismail
Olá!
Não consigo alterar o tamanho da fonte do meu título na versão mobile.
Por exemplo,
O tamanho da fonte do título no desktop é 24px
mas também é 24px no mobile??
Este problema ocorre especialmente com títulos, como posso resolver isso?
WPBeginner Support
Se você entrar em contato com o suporte do seu tema, eles deverão ser capazes de informar como configuraram o CSS móvel.
Admin
Esmeraldo Lleshi
Como posso fazer com que o HTML que editei permaneça permanentemente?
WPBeginner Support
Dependeria do que foi editado, se for CSS, você adicionaria o CSS em Aparência>Personalizar>CSS Adicional. Se for mais uma alteração de HTML, você deve verificar com o suporte do seu tema, pois os temas do WordPress são construídos com modelos, para saber um pouco mais sobre isso, você deve dar uma olhada em nossa página de glossário aqui: https://www.wpbeginner.com/glossary/template/
Admin
Milan
Depois de fazer as alterações, como posso salvar a página atualizada/editada? Sempre que a fecho, ela reverte para a versão anterior.
WPBeginner Support
Inspect element is for testing the changes, if you’re editing the CSS you would want to copy the CSS you added and paste it under Appearance>Custmize>Additional CSS
Admin
Kristina
Meu dilema é que, uma vez que inspeciono um elemento, gostaria de saber em qual PÁGINA do meu tema esse elemento aparece. Então, há um elemento que aparece como parte do meu tema, em todo o meu site, e quando inspeciono o elemento, consigo ver o código, mas não consigo determinar em qual parte do tema ele está, para que eu possa alterá-lo permanentemente no tema filho. Tentei editar uma página, diretamente do painel de inspeção de elementos, mas assim que saí e retornei, minha alteração desapareceu e voltou ao "normal".
Alguma maneira de inspecionar o elemento e determinar onde posso encontrá-lo nos arquivos do meu tema?
Obrigado.
WPBeginner Support
Oi Kristina,
Você pode tentar adivinhar o arquivo de template com base em onde o código aparece no layout da página. Por exemplo, se estiver na seção de cabeçalho, você pode procurá-lo no arquivo header.php. Você também pode baixar todos os seus arquivos de tema via FTP e, em seguida, usar uma ferramenta que permite pesquisar texto em vários arquivos de uma vez. Um desses aplicativos é o Notepad++ (para Windows), abra o aplicativo e vá em Pesquisar > Pesquisar em Arquivos.
Admin
stephanie
Este é um ótimo conteúdo, muito obrigado por compartilhar.
Pequeno problema para mim, nada acontece quando clico em ‘inspecionar elemento’ no meu navegador Chrome. Alguma ajuda ou sugestão?
WPBeginner Support
Oi Stephanie,
Se você estiver usando alguma extensão de navegador, desinstale todas elas. Se o problema persistir, tente reinstalar o Google Chrome.
Admin
avinash
Senhor,
Na verdade, sou novo no WordPress. Você pode me dizer de onde posso editar o elemento HTML e onde
posso encontrar o element.style no tema do WordPress.
Isaac Anim
Este é um post muito bom que você tem aqui. Mas preciso chamar sua atenção para algo.
Não sei se você notou, mas este artigo em particular foi roubado. Parece que o culpado apenas anda pela web roubando conteúdo. Enquanto escrevo este comentário, ele copiou cerca de 5 dos meus artigos.
O site nem está no Google Search. Eu estava apenas verificando como meu site aparece nos resultados de pesquisa do Yandex e me deparei com este ladrão.
Aqui está o link para o artigo roubado
WPBeginner Support
Obrigado por nos notificar, tomaremos as medidas apropriadas.
Admin
Ethan
Estou curioso, por que seu site não é amigável para dispositivos móveis?
Saviour Sanders
Eu estava me perguntando a mesma coisa.
Sila Mahamud
Personalizando o WordPress para Usuários DIY e você também destacou O que é o Elemento de Inspeção ou Ferramentas do Desenvolvedor? Você também nos deu o tutorial em vídeo sobre o básico dos elementos de inspeção. Para ser honesto, esse é um ótimo conteúdo onde quer que você o compartilhe conosco. Muito obrigado por compartilhar este conteúdo conosco.
WPBeginner Support
Fico feliz que tenha achado útil. Não se esqueça de nos seguir no Facebook para mais tutoriais do WordPress.
Admin