Como Inspecionar Elementos no Safari, Chrome e Firefox no Mac

Inspecionar elementos é uma habilidade essencial que permite a qualquer um entender como um site é construído e fazer os ajustes necessários. Você não precisa ser um desenvolvedor web para se beneficiar da inspeção de elementos em um Mac com qualquer navegador moderno com apenas alguns cliques simples. Felizmente, inspecionar elementos é uma ferramenta integrada em todos os navegadores modernos, e você não precisa de nenhum software especial para fazê-lo. Este tutorial fornece instruções passo a passo sobre como inspecionar elementos no Safari, Chrome e Firefox no Mac.

Dica: está pensando em mudar do Chrome para o Firefox como seu navegador padrão? Nós fornecemos tudo que você precisa para garantir uma transição suave.

Índice

• O que é Inspecionar Elementos?
• Como Inspecionar Elementos no Google Chrome no Mac
• Como Inspecionar Elementos no Safari no Mac
• Como Inspecionar Elementos no Firefox no Mac
• Perguntas Frequentes

O que é Inspecionar Elementos?

Inspecionar Elementos é um recurso poderoso disponível em todos os navegadores web modernos que permite que você aprenda mais sobre uma página da web, como sua estrutura, layout e estilo. Desenvolvedores e designers de conteúdo online costumam usar essas ferramentas para depurar, experimentar e solucionar problemas de um projeto web. Você pode facilmente selecionar um elemento de um site, e a ferramenta de inspeção fornecerá todas as informações abaixo de um elemento específico, como a cor, fonte, tamanho e outros elementos.

A ferramenta de inspeção também permite que você modifique o código temporariamente e veja as mudanças sendo aplicadas à página da web em tempo real. No entanto, as mudanças só serão visíveis para você. É uma ferramenta poderosa para você, seja um desenvolvedor experiente ou apenas curioso para aprender como um determinado site é construído.

Você encontrou o pop-up do Firefox Relay? Nós mostramos como remover o menu suspenso do Firefox Relay dos campos de e-mail.

Como Inspecionar Elementos no Google Chrome no Mac

Vamos começar com como inspecionar elementos no Chrome, pois é o navegador mais popular. Os passos são bastante simples, permitindo que você comece em pouco tempo.

Como Abrir o Painel de Inspeção no Google Chrome

1. Abra o navegador Chrome e visite qualquer site que você gostaria de inspecionar.

1. Clique com o botão direito em qualquer espaço em branco e selecione “Inspecionar.”

1. Você verá o painel de inspeção na sua tela.

Bom saber: não está usando o Chrome para Mac? Descubra como usar a ferramenta “Inspecionar” do Google Chrome para diagnósticos de sites em um PC Windows.

Como Inspecionar um Elemento Particular de uma Página da Web no Google Chrome

Agora que você abriu com sucesso o painel de inspeção, vamos aprender como interagir com um elemento.

1. No canto esquerdo do painel de inspeção, clique em “Selecionar um elemento para inspecioná-lo.”

1. Selecione qualquer elemento. Para este exemplo, estamos inspecionando uma imagem na página da web. Você pode fazer isso com qualquer elemento que desejar. Você verá uma caixa branca com algumas informações básicas, como o tipo de elemento, nome do arquivo, etc. No lado direito, você verá o código associado ao elemento específico.

Como Ver a Versão Móvel de um Site no Google Chrome

1. No lado esquerdo do painel de inspeção, clique na opção “Alternar Barra de Ferramentas de Dispositivo.”

1. Você verá o site reagir em um dispositivo móvel. Você ainda pode realizar sua inspeção clicando no elemento, e as informações serão baseadas em smartphones.

1. Se você clicar no menu suspenso “Responsivo” acima, poderá selecionar um dispositivo de sua escolha na lista. Quando você fizer isso, verá como a página da web reage a um modelo específico de smartphone.

Como Mudar a Localização do Painel de Inspeção no Google Chrome

1. Clique nos três pontos verticais no canto direito do painel de inspeção.

1. Selecione a localização para o dock de inspeção: à esquerda, abaixo ou em uma janela pop-up.

Como Inspecionar Elementos no Safari no Mac

O recurso de inspecionar elementos está desativado por padrão no Safari, pois faz parte da opção de desenvolvedor. Portanto, primeiro, precisamos habilitar o “Menu Desenvolver.”

Dica: fazendo a transição do Chrome para o Safari como seu navegador padrão no seu Mac? Temos todos os passos para ajudá-lo a fazer a transição sem perder seus favoritos, extensões e mais.

Como Abrir o Painel de Inspeção no Safari

1. Assim que você abrir o Safari e já estiver no site que deseja inspecionar, clique no ícone “Safari” na barra de menu superior e selecione “Configurações.”

1. Isso o levará à aba “Geral”. Selecione a aba “Avançado” no extremo direito.

1. Clique na caixa de seleção ao lado de “Mostrar menu Desenvolver na barra de menu” para ter acesso a todos os recursos avançados do Safari.

1. Clique com o botão direito em qualquer lugar do site e selecione “Inspecionar Elemento.” Isso abrirá o painel de inspecionar elementos no Safari.

1. Para mais opções avançadas, clique na aba “Desenvolver” na barra de menu.

Como Inspecionar um Elemento Particular de uma Página da Web no Safari

1. Clique no ícone “inspecionar” que se parece com um alvo no canto esquerdo do painel de inspeção.

1. Use seu cursor e selecione o elemento que você gostaria de inspecionar. Estamos inspecionando a tag de título para este exemplo, mas você pode inspecionar qualquer elemento que desejar.

Como Ver a Versão Móvel de um Site no Safari

1. Na barra de menu superior, clique na opção “Desenvolver” e selecione “Entrar no Modo de Design Responsivo.”

1. Selecione qualquer modelo de dispositivo que você deseja usar para inspecionar a página da web.

Como Mudar a Localização do Painel de Inspeção no Safari

No lado esquerdo do painel de inspeção, selecione a localização que você gostaria, e o painel de inspeção será movido de acordo.

Como Inspecionar Elementos no Firefox no Mac

O Firefox é uma escolha popular entre desenvolvedores e designers experientes ao trabalhar em projetos web. Vamos ver como podemos inspecionar elementos no Firefox no Mac.

Como Abrir o Painel de Inspeção no Firefox

1. Assim que você estiver na página da web que deseja inspecionar no navegador Firefox, clique com o botão direito e selecione “Inspecionar.”

1. Isso abrirá o painel de inspeção no navegador Firefox.

Como Inspecionar um Elemento Particular de uma Página da Web no Firefox

1. Clique no ícone “cursor” que você vê no canto esquerdo do painel de inspeção.

1. Mova seu cursor para o elemento que você gostaria de inspecionar. Para este exemplo, estamos inspecionando uma tag de cabeçalho, mas você pode fazer isso com qualquer elemento que desejar.

Como Ver a Versão Móvel de um Site no Firefox

1. No canto direito do painel de inspeção, clique no ícone do smartphone.

1. Isso converterá e carregará o site em um visualizador em forma de smartphone. Você pode clicar no botão “Responsivo” para selecionar um dispositivo móvel de sua escolha.

Como Mudar a Localização do Painel de Inspeção no Firefox

1. Clique nos três pontos horizontais no canto direito do dock de inspeção.

1. Selecione a localização que você gostaria de habilitar, e o painel de inspeção será movido de acordo.

Perguntas Frequentes

Como a inspeção de elementos difere da visualização do código-fonte da página?

Inspecionar elementos é uma ferramenta de desenvolvedor integrada nos navegadores modernos para interagir, modificar e solucionar problemas de uma página da web em seu HTML, CSS e JavaScript. Quando você verifica o código-fonte de uma página da web, você simplesmente vê um código HTML estático que foi entregue pelo servidor ao navegador. Você pode analisar a estrutura geral, conteúdo e tags, como os metadados, etc., mas a ferramenta de inspeção renderiza a página da web com todos os seus elementos, corrige erros e mais.

Quais outros tipos de dados posso descobrir usando a ferramenta de inspecionar elementos?

Com inspecionar elementos, você obtém uma visão abrangente de como um site é construído. Você ganha acesso ao código HTML real com hierarquia e aninhamento. Você pode modificar o CSS e ver as mudanças em tempo real, incluindo elementos como cor, tamanho da fonte, etc. Você também pode ver o código JavaScript, permitindo que você depure o código e o analise. O recurso “Solicitações de Rede” facilita para você entender os recursos que estão sendo carregados externamente, como as fontes de Saída do Console, manipulação do DOM e mais.

Os proprietários de sites podem ver a atividade de inspecionar elementos em seus sites?

Tecnicamente, sim. Para esclarecer, todos os sites modernos têm ferramentas de análise e rastreamento instaladas, que essencialmente rastreiam tudo o que você faz em um site, desde quanto tempo você permanece no site até onde você clica. No entanto, você nunca será identificado pessoalmente pelo site, e você é simplesmente um ponto de dados em um grupo de usuários que corresponde à sua demografia e comportamento. Esses sistemas estão em vigor para monitorar o desempenho do site e melhorar a experiência do usuário.

Crédito da imagem: Unsplash. Todas as capturas de tela por Abbaz Uddin.