01 de setembro de 2021
Se você for um desenvolvedor da web , pode ser necessário testar as coisas dinamicamente enquanto se comunica com seus clientes. Como alternativa, você pode precisar compartilhar uma captura de tela, mas a página da web que você está tentando capturar contém suas informações pessoais.
A ferramenta Inspecionar elemento é útil em ambos os cenários. Ele permite que os usuários acessem o código-fonte de uma página da web e manipulem seus elementos. Por ser um recurso integrado em todos os principais navegadores, tanto os visitantes quanto os desenvolvedores da web podem usar essa ferramenta para depuração, teste e pesquisa de palavras-chave.
Este artigo mostrará como acessar o Inspect Element em Google Chrome. Você aprenderá seus vários usos, incluindo como alterar ou ocultar um elemento de página e inspecionar classes CSS.
Conhecendo o painel de elementos no Chrome
Inspecionar elemento é um recurso do Chrome Ferramentas de desenvolvedor que permitem inspecionar e modificar os elementos da web de front-end de uma página. Com esta ferramenta, é possível alterar a aparência e o conteúdo de uma página da web editando seu CSS e arquivos HTML .
Existem várias maneiras de abrir as Ferramentas do desenvolvedor no Google Chrome. O primeiro método é através do Menu . Clique nos três pontos verticais no canto superior direito do navegador. Em seguida, passe o cursor sobre Mais ferramentas e clique em Ferramentas do desenvolvedor .
Para obter acesso mais rápido, clique com o botão direito em um elemento da página e selecione
O painel Ferramentas do desenvolvedor compreende três partes principais:
Painel Elementos/DOM -contém o modelo de objeto do documento da página ( DOM ) e fornece acesso total ao código-fonte HTML . Geralmente está localizado na parte superior das Ferramentas do desenvolvedor. Painel CSS -permite modificar as regras de estilo de uma página da web alterando, adicionando ou removendo propriedades CSS. Este painel está localizado na parte do meio, logo abaixo de Estilos . Console -mostra o que há de novo nas ferramentas do desenvolvedor. Também é usado para executar JavaScript. Ele aparece na seção inferior das Ferramentas do desenvolvedor.
As Ferramentas do desenvolvedor do Chrome também incluem outros recursos, como Fonte , Rede , Aplicativo , Segurança e mais. Este artigo mostrará como alterar os atributos da página usando os Elementos e os painéis CSS .
O que você pode fazer com as ferramentas de desenvolvedor do Chrome?
O recurso Inspecionar elemento oferece muitos benefícios para desenvolvedores da web. Aqui estão algumas coisas que você pode fazer com elementos e painéis CSS:
CSS live-edition -permite que você veja as alterações em tempo real conforme você faz edições no painel CSS. Layout teste -permite que você teste diferentes layouts de um site antes de fazer alterações permanentes no código. Diagnóstico de depuração -ajuda a verificar se o seu site contém código corrompido. Edição temporária -permite ajustar os elementos da página da web para visualização em seu navegador.
Por que você precisa inspecionar elementos da web?
Se você é um desenvolvedor da web, pode usar o elemento Inspecionar para modificar o design de um site e ver as mudanças ativas antes de implementá-las permanentemente. Isso economiza tempo e torna a comunicação com os clientes mais eficiente.
Enquanto isso, os redatores de conteúdo podem usar a ferramenta Inspecionar elemento para omitir informações confidenciais de uma página da web antes de fazer uma captura de tela. Isso é mais rápido do que usar um software de edição de fotos.
Ter a capacidade de inspecionar elementos também ajuda os profissionais de marketing digital com seus esforços de otimização de mecanismos de pesquisa (SEO). Ele pode ser usado para obter informações sobre as palavras-chave ocultas da concorrência.
Hoje em dia, a maioria dos navegadores tem o recurso Inspecionar elemento . No entanto, este artigo irá ensiná-lo a usá-lo no Google Chrome.
Consulte nosso página de suporte para tutoriais sobre como inspecionar elementos em outros navegadores, como Mozilla Firefox, Opera e Internet Explorer.
Veja como usar o Inspecionar elemento no Google Chrome:
Abra um site no Chrome. Estaremos usando a página inicial da Hostinger para este tutorial. Clique nos três pontos verticais na barra de menu superior do Chrome para abrir o menu suspenso e selecione Mais ferramentas -> Ferramentas do desenvolvedor . 
Alternativamente, use o atalhos de teclado mencionados acima ou clique com o botão direito na página da web e escolha Inspecionar para acessar as ferramentas do desenvolvedor rapidamente. 
Uma vez que os Elementos painel aparece na janela do seu navegador, você pode fazer alterações no código-fonte da página. Redimensione a caixa de inspeção arrastando seus cantos para melhor legibilidade. 
Por padrão, as ferramentas do desenvolvedor aparecerão no lado direito da janela do navegador. Se desejar alterar sua localização ou movê-lo para uma janela separada, clique nos três pontos verticais no canto superior direito do painel e escolha a configuração de Lado Dock preferida. 
Para ver como a página da web aparece em dispositivos móveis, clique em Alternar barra de ferramentas do dispositivo no canto superior esquerdo do painel. Acima da visualização, você pode alterar as variáveis para testar o desempenho da página em uma resolução de tela ou nível de limitação de largura de banda diferente. 
Inspecione O elemento também permite que os usuários alterem e excluam ou ocultem elementos da web, bem como inspecionar classes CSS. As seções a seguir fornecerão informações detalhadas sobre como executar essas ações.
Para inspecionar um elemento específico, clique com o botão direito nele e escolha Inspecionar forte. A caixa do inspetor da web será aberta e destacará automaticamente o código-fonte do elemento selecionado.
Alterar um elemento
Para alterar um elemento da página, você precisa alterar o código-fonte CSS ou HTML da página código. Dessa forma, você pode editar o texto da página e seus elementos de estilo, como espessura, tamanho e cor da fonte.
O painel DOM permite a modificação simples do texto. Depois de abrir a caixa Elementos , use o recurso Inspecionar -o ícone do cursor no canto superior esquerdo do painel-para destacar o elemento cujo código-fonte você deseja alterar. Em seguida, clique com o botão direito do mouse no código destacado na árvore DOM e selecione Editar como HTML .
A caixa do editor será expandida, permitindo que você modifique o texto. Desmarque o elemento para visualizar as alterações.
Um método mais rápido envolve clicar duas vezes no texto que você deseja alterar no painel DOM e substituí-lo. Os elementos de texto geralmente são colocados entre aspas.
A modificação do estilo dos elementos é semelhante, mas você precisará usar o painel CSS.
Use o Inspecionar para destacar um elemento. Em seguida, clique na propriedade element.style na parte superior do painel CSS e adicione as declarações de estilo desejadas dentro das chaves.
No exemplo a seguir, adicionamos um cor de fundo para um bloco de texto:
Se você deseja adicionar outra declaração de estilo, selecione a propriedade element.style novamente. O inspetor da web adicionará outra linha vazia para você preencher.
Aqui, adicionamos uma segunda propriedade que exibe o texto em itálico:
Passar o mouse sobre as propriedades CSS no painel CSS revelará uma caixa de seleção ao lado de cada uma delas. Desmarque para omitir qualquer estilo que você não deseja exibir. Como alternativa, você pode clicar em uma propriedade ou valor para substituí-lo.
Para usar outros tipos de formatação, familiarize-se com Valores e propriedades CSS .
Ocultar ou excluir um elemento
As ferramentas do desenvolvedor também permitem ocultar elementos de uma página da web. Usando o recurso Ocultar elemento , o painel CSS criará uma propriedade de visibilidade para ocultar um elemento sem excluí-lo.
Para fazer isso, comece abrindo as Ferramentas do desenvolvedor e clique no botão elemento que você deseja ocultar usando a ferramenta Inspecionar . Em seguida, clique com o botão direito do mouse no código destacado na árvore DOM e selecione Ocultar elemento .
Uma nova propriedade de visibilidade aparecerá no painel CSS. Desmarque para desfazer a alteração.
Se você deseja remover um elemento HTML, clique com o botão direito no código destacado e selecione Excluir elemento . Atualizar a página restaurará o código excluído.
Dica profissional: todas as alterações feitas com a ferramenta Inspecionar elemento podem ser desfeitas pressionando Ctrl + Z no Windows e Linux ou Command + Z no macOS.
Inspecionar classes CSS
Inspecionar elementos de uma página da web também é uma excelente maneira de verificar o código do site elementos que você gosta. Você pode copiar o código para estilizar os elementos do seu site usando classes CSS .
Para fazer isso, abra as Ferramentas do desenvolvedor e ative a ferramenta Inspecionar . Em seguida, passe o cursor sobre o elemento de seu interesse. Suas informações básicas, como cor, fonte e margem, aparecerão em uma caixa e seu código-fonte será destacado no painel DOM.
Você pode encontrar um específico Estilo CSS pressionando Ctrl + Shift + F no Windows e Linux ou Command + Option + F para usuários do macOS.
Uma caixa de pesquisa aparecerá no a parte inferior do painel. Insira sua consulta e o inspetor produzirá os resultados.
Conclusão
O Inspect Element é um recurso dos navegadores da web que permite aos usuários acessar as Ferramentas do desenvolvedor. Eles são úteis para testar o design da página da web, depurar, omitir informações confidenciais de capturas de tela, pesquisar palavras-chave ocultas e muito mais.
Vamos revisar as etapas para usar a ferramenta Inspecionar elemento no Chrome:
Abrir qualquer página da web e localize o elemento que deseja inspecionar. Clique com o botão direito do mouse no elemento e escolha Inspecionar . Redimensione a janela Ferramentas do desenvolvedor arrastando seus cantos para melhor legibilidade. Configure outras preferências, como a posição de encaixe e o tipo de dispositivo, conforme necessário. Use o painel Elementos para aplicar as edições de layout HTML e o painel CSS para modificar o estilo dos elementos.
Esperamos que este artigo tenha ajudado você a aprender como usar o recurso Inspecionar elemento do Chrome e alguns de seus aplicativos. Se você tiver dúvidas ou comentários, deixe-nos saber na seção de comentários abaixo.
O autor
Linas L.
Linas começou como um agente de sucesso do cliente e agora é um desenvolvedor PHP full-stack na Hostinger. Ele é apaixonado por causar um impacto positivo nas pessoas, utilizando técnicas de desenvolvimento orientadas pelo usuário. Por mais que goste de programar e mudar o mundo, ele sonha secretamente em se tornar uma estrela do rock.
