Como inspecionar corretamente um site

Seja você um desenvolvedor testando novos recursos em um projeto ou um designer que deseja examinar mais de perto o código HTML e CSS, há muitos motivos para inspecionar um site e seus elementos. No entanto, saber por onde começar pode parecer confuso (a princípio).

Felizmente, você pode usar várias ferramentas, técnicas e truques simples para inspecionar os elementos da Web adequadamente. Além disso, existem opções para quase todos os navegadores e sistemas operacionais (SO).

Nesta postagem, discutiremos por que você pode querer inspecionar um site. Em seguida, mostraremos algumas das melhores ferramentas que você pode usar antes de explicar o que procurar. Vamos entrar!

Por que você deve inspecionar um site

Existem várias razões pelas quais você pode querer inspecionar um site. Por exemplo, você pode precisar solucionar um problema ou encontrar uma informação específica.

A inspeção de elementos da web em um navegador permite que desenvolvedores, designers e profissionais de marketing digital do WordPress manipulem a aparência de uma página da web e testem as alterações. Os desenvolvedores ou testadores são mais propensos a usar esse recurso para depurar um elemento específico, conduzir testes de layout ou realizar edição de CSS ao vivo.

A inspeção de elementos da web também é útil para web designers. Se você quiser testar rapidamente uma mudança de cor ou uma nova fonte, pode fazê-lo sem se aprofundar no código CSS.

Além disso, os profissionais de marketing digital podem usar uma ferramenta Inspect Element para ver como certas alterações afetariam a aparência geral de uma página da web. Por exemplo, você pode querer experimentar um novo botão Call To Action (CTA) ou um esquema de cores diferente. Você pode usar ferramentas para replicar as atualizações sem fazer alterações em seu site ao vivo.

Por fim, inspecionar um site pode ser uma excelente maneira de aprender como um site é construído e funciona. Se você estiver interessado em aprender mais sobre desenvolvimento web, inspecionar sites é uma excelente maneira de começar.

Melhores ferramentas e extensões para inspecionar um site

Existem várias ferramentas e extensões diferentes que você pode usar para inspecionar um site. Aqui estão algumas das opções mais populares!

Inspecionar elemento

A ferramenta Inspecionar elemento é a opção mais comum. Ele permite que você observe de perto o código HTML e CSS que compõe uma página da web. Você também pode usá-lo para editar o CSS ao vivo e ver como suas alterações ficariam sem fazer alterações permanentes.

Embora esteja disponível como uma extensão do Google Chrome, a ferramenta Inspect Element também vem com todos os principais navegadores. O recurso faz parte do Chrome Developer Tools, um conjunto de programas que permite inspecionar e editar o código HTML e CSS de uma página da web.

Para acessar as ferramentas do desenvolvedor do Google Chrome, basta pressionar Ctrl+Shift+I (ou Cmd+Opt+I em um Mac). Você também pode acessar as ferramentas abrindo o menu do Chrome e selecionando Mais ferramentas > Ferramentas do desenvolvedor :

Você pode acessar as mesmas ferramentas de desenvolvedor em outros navegadores. Por exemplo, o Firefox Developer Tools tem recursos semelhantes. Para acessar as ferramentas, basta pressionar Ctrl+Shift+I (ou Cmd+Opt+I em um Mac). Você também pode encontrar as ferramentas abrindo o menu do Firefox e selecionando Web Developer > Inspector.

Além disso, o Safari Developer Tools permite que você inspecione e edite o código HTML e CSS de uma página da web em dispositivos Mac. Basta pressionar Cmd+Opt+I . Você também pode abrir o menu Safari e selecionar Preferências > Avançado > Mostrar menu Desenvolvedor na barra de menus .

BrowserStack

Outra plataforma que você pode usar para testar sites é o BrowserStack:

Essa plataforma de teste baseada em nuvem funciona com todos os principais navegadores e dispositivos. Depois de se inscrever para uma avaliação gratuita, você pode navegar até o painel do Live e escolher seu sistema operacional.

Em seguida, você pode selecionar sua versão de navegador preferida para iniciar uma sessão ao vivo em seu navegador. Por fim, você pode navegar no site que deseja inspecionar como faria por meio do Inspecionar elemento.

Como inspecionar um site

Vamos dar uma olhada em como você pode inspecionar um site usando a ferramenta Inspecionar elemento. Comece simplesmente clicando com o botão direito do mouse em qualquer elemento da página da Web e selecionando Inspecionar no menu de contexto:

Isso abrirá a ferramenta Inspecionar elemento em seu navegador. Assim que a ferramenta estiver aberta, você pode começar a manipular o código HTML e CSS para ver como isso afetaria a aparência da página da web.

Por exemplo, você pode alterar a cor de um elemento, adicionar ou remover uma classe ou até mesmo alterar a posição de um elemento. Você também pode usar o campo de pesquisa na parte superior para pesquisar um texto ou uma imagem.

Obviamente, quaisquer alterações feitas usando Inspecionar elemento são apenas temporárias. Eles não serão salvos quando você atualizar a página ou fechar o navegador. No entanto, esta é uma ótima maneira de testar a aparência de alterações específicas sem alterar permanentemente seu site.

Você também pode acessar a ferramenta pressionando Ctrl+Shift+I (ou Cmd+Opt+I em um Mac) para abrir as ferramentas do desenvolvedor . Em seguida, clique na guia Elementos na parte superior da janela:

Por fim, você também pode acessar o Inspect Element abrindo o menu Chrome e selecionando More tools > Developer tools , que discutimos anteriormente.

Como alterar um elemento

Se você deseja alterar um elemento em uma página da Web, clique com o botão direito do mouse e selecione Inspecionar . No painel Elementos que se abre, encontre a parte que deseja alterar e clique duas vezes nela.

Ao abrir a caixa Elementos , você pode usar o ícone do cursor Inspecionar no canto superior esquerdo do painel para realçar o código-fonte do elemento que deseja modificar. Ao clicar com o botão direito do mouse no código realçado, selecione Editar como HTML :

A caixa se expandirá e você poderá alterar o texto. Para visualizar as alterações, você pode desmarcar o elemento. Você também pode clicar duas vezes no texto para editá-lo.

Você também pode usar essa técnica para alterar o código CSS de um elemento. Para fazer isso, clique com o botão direito do mouse e selecione Inspecionar . No painel de elementos, localize o elemento que deseja alterar e escolha a propriedade element.style . Em seguida, você pode adicionar seu código ou declarações entre chaves.

Como ocultar ou excluir um elemento

Você também pode ocultar ou excluir um elemento em uma página da web. Depois de encontrar o elemento que deseja ocultar ou excluir, clique com o botão direito nele e selecione Inspecionar para iniciar a ferramenta Inspecionar elemento.

A partir daqui, clique com o botão direito do mouse no elemento e selecione a opção Excluir elemento ou Ocultar elemento :

O botão Excluir remove o elemento Document Object Model (DOM). O botão Ocultar simplesmente ocultará o elemento, mas ainda estará no DOM.

Como inspecionar classes CSS

Existem várias maneiras de inspecionar classes CSS. No entanto, o método mais fácil é clicar com o botão direito do mouse no elemento que deseja revisar e selecionar Inspecionar . Em seguida, abra a guia Estilos para ver seus estilos CSS:

Observe que esta guia mostra apenas os estilos embutidos que são aplicados e não aqueles que vêm de uma folha de estilo.

Se quiser ver todos os estilos CSS aplicados a um elemento, você pode usar a guia Computed . Ele mostra todos os estilos CSS aplicados a um elemento, incluindo os de uma folha de estilo:

Ao terminar de inspecionar uma página da Web, basta fechar a ferramenta Inspecionar elemento. Suas alterações não serão salvas, então você não precisa se preocupar em quebrar algo acidentalmente.

O que procurar ao inspecionar um site

Qualquer que seja o método usado para acessar Inspecionar elemento, você verá a mesma interface. Ele consiste em dois painéis: o painel HTML e o painel CSS.

O painel HTML mostra a estrutura da página da web. Você pode ver como os vários elementos estão aninhados e relacionados.

O painel CSS mostra os estilos aplicados ao elemento selecionado. Você também pode editar as regras CSS para ver como suas alterações afetariam a aparência do elemento.

Se você está procurando algo específico em um site, seja um determinado texto ou uma imagem, pode usar o Inspect Element para ajudá-lo a encontrá-lo. Possui um campo de pesquisa onde você pode procurar um determinado elemento.

Ao inspecionar um site, há algumas coisas a serem lembradas:

• HTML: O código que define a estrutura da página web. Preste atenção na forma como os elementos estão organizados e como eles interagem entre si.
• CSS: O código que define o estilo da página web.
• JavaScript : O código que define o comportamento da página da web. Ele influencia como os elementos interagem e como a página responde à entrada do usuário.
• Design : A aparência geral do site. Ele influencia a facilidade de uso do layout e o quão bem ele se ajusta ao objetivo do site.
• Conteúdo: Texto, imagens e outras mídias do site.

O que você deve procurar ao inspecionar um site dependerá principalmente se você é um designer, desenvolvedor ou profissional de marketing digital. Conforme discutimos anteriormente, a ferramenta Inspecionar elemento pode ajudá-lo em tudo, desde testes de design até problemas de solução de problemas.

Conclusão

Inspecionar elemento é um recurso valioso para designers e desenvolvedores. Você pode usá-lo para visualizar e editar o HTML e CSS de uma página da web. Essa ferramenta pode ser útil quando você deseja fazer alterações em uma página da Web em que está trabalhando ou ver como ela está codificada.

Inspecionar elemento está disponível na maioria dos navegadores da web. Você pode acessá-lo clicando com o botão direito do mouse em uma página da Web e selecionando Inspecionar no menu. Depois de abrir a janela Inspecionar , você verá o código HTML e CSS da página da Web e poderá fazer várias alterações.

Precisa de ajuda com o gerenciamento ou otimização do seu site? Saiba como o WP Engine pode ajudar em tudo, desde hospedagem WordPress até gerenciamento de sites e clientes!