Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Noções básicas sobre o elemento Inspect: Personalização do WordPress para usuários DIY

Alguma vez você já quis editar temporariamente uma página da Web para ver como ela ficaria com um estilo específico?

É possível editar texto, cores e muito mais com uma ferramenta de desenvolvedor já existente em seu navegador chamada Inspect ou Inspect Element.

Ele permite que você edite o estilo HTML e CSS de uma página com um mínimo de conhecimento de codificação. Ele não salva nenhuma alteração, portanto, sua página original não é afetada.

Neste artigo, mostraremos os conceitos básicos da ferramenta Inspect e como usá-la em seu site WordPress.

Using the inspect tool for DIY web developers

O que é a ferramenta Inspect?

Os navegadores modernos, como Google Chrome, Firefox, Safari e Microsoft Edge, têm ferramentas integradas que permitem que os desenvolvedores da Web depurem erros.

Essas ferramentas mostram o código HTML, CSS e JavaScript de uma página e como o navegador executa o código.

Você pode abrir essas ferramentas de desenvolvedor visitando qualquer página e selecionando “Inspecionar” no menu do botão direito do mouse.

Opening Inspect developer tools in Google Chrome

Usando a ferramenta Inspect, você pode editar o código HTML, CSS ou JavaSCript de qualquer página da Web e ver suas alterações aparecerem na tela (mostraremos como fazer isso mais adiante neste artigo).

Essas alterações não afetam a página da Web original e desaparecerão quando você fechar a janela ou recarregar a página.

Ele permite que os proprietários e desenvolvedores de sites DIY testem e depurem.

  • Você pode aplicar seus estilos em CSS e ver como eles ficarão.
  • Os redatores técnicos que precisam fazer capturas de tela podem editar o HTML para alterar o texto na tela e ocultar informações de identificação pessoal.
  • Os desenvolvedores podem usá-lo para procurar erros comuns do WordPress, erros 404, depurar problemas de JavaScript e muito mais.

Estamos apenas arranhando a superfície dos casos de uso. Essas ferramentas para desenvolvedores são incrivelmente avançadas e muito úteis para usuários avançados.

Neste artigo, vamos nos concentrar na ferramenta Inspect no Google Chrome, pois é o navegador mais comumente usado.

Outros navegadores, como Firefox, Safari e Microsoft Edge, têm suas próprias ferramentas de desenvolvedor, que também podem ser chamadas selecionando o elemento Inspect no menu do navegador.

Pronto? Vamos nos aprofundar. Você pode usar os links abaixo para ir para qualquer seção da postagem.

Tutorial em vídeo

Subscribe to WPBeginner

Se você não gostar do vídeo ou precisar de mais instruções, continue lendo.

Iniciando a ferramenta Inspect e localizando o código

Você pode iniciar a ferramenta de inspeção pressionando CTRL + Shift + I (Command + Options + I para MacOS) no teclado.

Você também pode clicar em qualquer lugar de uma página da Web e selecionar “Inspecionar” no menu do navegador.

Opening Inspect developer tools in Google Chrome

Você também pode acessar a ferramenta no menu principal do navegador.

No Google Chrome, clique no menu de três pontos no canto superior direito e role para baixo até Mais ferramentas ” Ferramentas de desenvolvedor.

Launch developer tools

A 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.

Choose dock position

A posição do Inspect dock 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 a fonte HTML destacará a área afetada na página da Web.

Você também notará que as regras de CSS mudam quando você clica em um elemento dentro do código HTML.

Selected HTML highlighted in preview

Você também pode levar o ponteiro do mouse até um elemento na página da Web, clicar com o botão direito do mouse e selecionar a ferramenta “Inspecionar”.

O elemento será destacado no código-fonte.

Edição e depuração de código no elemento Inspect

Tanto o HTML quanto o CSS na janela de inspeção de elementos são editáveis. Você pode clicar duas vezes em qualquer lugar do código-fonte HTML e editar o código como quiser.

Edit HTML using Inspect tool

Você também pode clicar duas vezes e editar quaisquer atributos e estilos no painel CSS.

Para adicionar uma regra de estilo personalizada, clique no ícone + na parte superior do painel CSS.

Editing CSS in the inspect tool

À medida que você fizer alterações no CSS ou no HTML, essas alterações serão refletidas no navegador instantaneamente.

Essas alterações serão salvas na memória temporária de seu navegador e não afetarão seu site.

Observação importante: as alterações feitas aqui não são salvas em lugar algum. O elemento Inspect é 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 desaparecerão.

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 deseja salvar.

Antes de começar a editar o tema existente do WordPress usando a ferramenta Inspect Element, certifique-se de criar um backup do WordPress.

Localize facilmente os erros em seu site

A ferramenta Inspect tem uma área chamada Console, que mostra os erros ocorridos durante o carregamento da página.

Ao tentar depurar um erro ou solicitar suporte dos autores do plug-in, é sempre útil dar uma olhada aqui para ver se há algum erro ou aviso.

Inspect errors in Console

Usando a guia Console, você pode solucionar vários problemas comuns. Por exemplo, estas são apenas algumas das coisas que você pode fazer com o console de inspeção:

  • Descubra por que uma imagem que você adicionou não está sendo exibida
  • Por que um plug-in ou tema não está se comportando adequadamente
  • Qual plug-in ou extensão de navegador pode estar causando o conflito

Até mesmo usuários não técnicos podem examiná-lo para encontrar pistas sobre a origem de um problema.

Por exemplo, se você for um cliente da OptinMonster e estiver se perguntando por que seu opt-in não está carregando, poderá encontrar facilmente o problema “O slug da sua página não corresponde”.

Ferramentas como o Inspect Element Console e o SupportAlly ajudam você a obter melhor suporte ao cliente. A equipe de suporte técnico adora clientes que tomam a iniciativa de fornecer feedback detalhado sobre os problemas.

Como usar a ferramenta Inspect no celular (iOS ou Android)?

Os navegadores móveis não têm opções de desenvolvedor ativadas por padrão. Os fabricantes presumem que a maioria dos usuários de dispositivos móveis não as utilizaria.

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.

Using inspect tool in mobile mode

Em seguida, você pode escolher um dispositivo na parte superior ou as dimensões da tela. O Chrome emulará esse tamanho de tela para você.

Perguntas frequentes

Veja a seguir algumas das perguntas mais comuns feitas por nossos usuários sobre o uso da ferramenta Inspect.

1. Posso usar a ferramenta Inspect em qualquer site ou apenas no meu?

Sim, você pode usar a ferramenta de inspeção em qualquer site. Basta clicar com o botão direito do mouse e selecionar 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 aprimorar suas próprias habilidades em CSS/HTML.

2. Por que não consigo encontrar a ferramenta Inspect em meu navegador?

O Google Chrome pode ocultar a opção Inspecionar no menu do botão direito do mouse, principalmente quando várias extensões adicionam suas próprias opções ao menu do botão direito do mouse. No entanto, você sempre pode abrir a ferramenta Inspecionar clicando no menu de três pontos no canto superior direito da tela do navegador e selecionando Mais ferramentas ” Ferramentas do desenvolvedor. Você também pode usar as teclas CTRL + Shift + I (Command + Options + I no Mac) do teclado para abri-la.

Recursos de bônus:

É empolgante poder fazer alterações em seu site como um iniciante em WordPress DIY.

Ao longo dos anos, vimos inúmeros iniciantes com nenhuma experiência em construção de sites se tornarem profissionais da área.

Se você quiser explorar mais a fundo como utilizar a ferramenta Inspect para fazer mais coisas em seu site WordPress, os recursos a seguir seriam um bom ponto de partida.

Esperamos que este artigo tenha ajudado você a aprender os conceitos básicos do elemento Inspect e como usá-lo em seu site WordPress. Talvez você também queira ver nossa folha de dicas de CSS padrão gerada pelo WordPress para acelerar suas habilidades de desenvolvimento de temas ou nosso kit de ferramentas definitivo do WordPress para profissionais.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

20 ComentáriosDeixe uma resposta

  1. Mrteesurez

    This is helpful, I don’t know one can actually edit the code and see changes in real time.
    My question:
    1) Can I use the inspection tool to see the PHP or anynbackend code ??
    2) Is there anyway I can use the inspection tool on mobile ??

    • WPBeginner Support

      You would not use the inspection tool to see PHP it is normally used to check HTML, CSS, and JavaScript. For mobile it is not available by default but there are apps to add the ability to mobile.

      Administrador

  2. Jiří Vaněk

    Thanks for this guide. Now is much more easier for me to find CSS class in code for making any changes. The CSS code can make AI for me, becouse Im not good at coding, and rest Im able to find in isnpect tools. That is all what I need.

  3. hossam ismail

    hey!
    I can’t change my heading font size in mobile version.
    For example,
    Heading font size in desktop is 24px
    but it is also 24px in mobile ??
    this issue especially with heading, how can i fix this?

    • WPBeginner Support

      If you reach out to your theme’s support they should be able to let you know how they have set up the mobile CSS

      Administrador

  4. Esmeraldo Lleshi

    How can I make the html that i edited to stay permanently?

    • WPBeginner Support

      It would depend on what was edited, if is CSS then you would add the CSS under Appeaance>Customize>Additional CSS. If it is more of an HTML change then you would want to check with your theme’s support as WordPress themes are built with templates, for a bit more on that you would want to take a look at our glossary page here: https://www.wpbeginner.com/glossary/template/

      Administrador

  5. Milan

    Once I make changes, how I can save update/edited page? Whenever I close it it revert to previous version.

    • 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 :)

      Administrador

  6. Kristina

    My dilemma is that once I inspect an element, I’d like to know what PAGE in my theme this element appears on. So there’s an e lement that appears as part of my theme, throughout my site, and when I inspect element, i can see the code, but can’t determine what portion of the theme has it, so that I can change it in the child theme, permanently. I tried editing one page, directly from the inspect element pane, but as soon as I exited and returned, my change was gone and it was “back to normal.”

    Anyway to inspect to element and determine where I can find it in my theme files?

    Thank you.

    • WPBeginner Support

      Hi Kristina,

      You can try to guessing the template file based on where the code appears in the page layout. For example, if it is in header section then you may look for it in the header.php file. You can also download all your theme files via FTP and then use a tool that allows you to search for text in multiple files at once. One such app is Notepad++ (for Windows), open the app and the go to Search > Search in Files.

      Administrador

  7. stephanie

    This is such great content, thanks a lot for sharing.

    Little problem for me, nothing happens when i click ‘inspect element’ in my chrome browser. Any help or suggestions?

    • WPBeginner Support

      Hi Stephanie,

      If you are using any browser extensions, then uninstall all of them. If the problem persists, then try reinstalling Google Chrome.

      Administrador

  8. avinash

    Sir,
    Actually i am new in wordpress can you tell where from i can edit the Html elememt and where i
    can found the element.style in wordpress theme.

  9. Isaac Anim

    This is a very great post you have here. But I need to draw your attention to something.

    I don’t know if you have noticed but this particular article has being stolen. It looks like the culprit only goes around the web stealing content. As I write this comment, he has copied about 5 of my articles.

    The website is even not in Google Search. I was just checking how my website looks in Yandex search results and I happen to find this thief.

    Here is the link to the stolen article

  10. Ethan

    I am curious, why isn’t your website mobile friendly?

    • Saviour Sanders

      I’ve been wondering about the same thing.

  11. Sila Mahamud

    Customizing WordPress for DIY Users and you have also highlighted What is Inspect Element or Developer Tools? You also given us the video tutorial the basic of inspect elements. To be honest that is great content wherever you share with us. Thanks a lot for sharing this content with us.

Deixe uma resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.