O que saber
-
No Safari: clique com o botão direito do mouse em uma página da web e selecione Inspecionar elemento.
- No Chrome, você pode clicar com o botão direito do mouse e clicar em Inspect.
- Para habilitar o recurso no Safari: Safari > Preferences > Advanced > Mostrar menu Desenvolver na barra de menus caixa.
Este artigo ensina como inspecionar o elemento de um site no Mac. Veja como fazer isso via Safari e Google Chrome.
Como você usa o recurso Inspecionar elemento em um Mac?
Antes de inspecionar elementos no Mac ao usar o Safari, você precisa habilitar o menu do desenvolvedor no navegador. Veja como ativá-lo e o que fazer para inspecionar um elemento.
Se você puder ver Desenvolver entre marcadores e janela, o menu do desenvolvedor já foi ativado e você pode pular para a etapa 4.
Usando o recurso Inspecionar Elemento no Safari
Veja como usar o Inspect Element no Safari, o navegador padrão em computadores Mac.
-
No Safari, clique em Safari > Preferences.
Image -
Clique Avançado.
Image -
Clique em Show Develop menu na barra de menus e feche a janela.
Image - Ao navegar em um site, clique com o botão direito do mouse no item que deseja inspecionar.
-
Clique Inspecionar Elemento.
Image -
Agora você pode ver o código por trás do site que você inspecionou.
Image
Usando o recurso Inspect Element no Chrome em um Mac
Se você usa o Chrome em vez do Safari no seu Mac, é ainda mais fácil visualizar um elemento, pois não há necessidade de habilitar o recurso. Aqui está o que fazer.
- No Chrome, navegue até um site.
- Clique com o botão direito do mouse no elemento que deseja inspecionar.
-
Clique Inspecionar.
Image -
Agora você pode visualizar o código em uma janela lateral no Chrome.
Image
Por que não consigo inspecionar no meu Mac?
Você pode não conseguir inspecionar um elemento no seu Mac se não tiver ativado o menu Desenvolvedor no Safari. Aqui está um lembrete de como fazer isso.
-
No Safari, clique em Safari > Preferences.
Image -
Clique Avançado.
Image -
Clique em Show Develop menu na barra de menus e feche a janela.
Image
Como fazer alterações no site inspecionando o elemento
Além de permitir que você visualize o código em um site, também é possível alterar temporariamente qualquer elemento do site através do Inspect Element. Veja como fazer isso pelo Safari.
O processo é muito semelhante em outros navegadores.
- Ao navegar em um site, clique com o botão direito do mouse no item que deseja inspecionar.
- Clique Inspecionar Elemento.
- Clique duas vezes no texto do código para torná-lo editável.
- Delete ou digite uma nova string de texto.
- Toque em Enter.
- O código foi alterado temporariamente apenas para seu benefício.
Por que você deseja usar o recurso Inspecionar elemento?
Ser capaz de inspecionar um elemento é útil por muitas razões.
- Para alterar o código em tempo real. Os designers de sites podem alterar temporariamente as coisas em um site para ver como as alterações afetam as coisas.
- Para verificar o código. Tanto os designers quanto o pessoal de marketing podem verificar o código para confirmar se os detalhes do Google Analytics estão lá.
- Para visualizar imagens separadamente de um site. Se um site não permite que você abra uma imagem em uma nova guia ou janela, é possível visualizar o elemento.
-
Tinker. Ver o código de uma página da Web pode ajudá-lo a entender o que você vê, removendo o mistério do que e do porquê do que está acontecendo com o site em que você está. É como desmontar um eletrodoméstico para ver como funciona, mas não há parafusos a perder neste caso.
FAQ
É legal inspecionar um site?
Sim. No entanto, se você planeja usar qualquer código ou recurso de um site, verifique com o proprietário e adicione uma nota de direitos autorais.
Como faço para copiar HTML de um site com o elemento inspecionar?
No Chrome, clique com o botão direito do mouse na página e selecione Inspect, vá para a seção superior e clique com o botão direito do mouse na tag (por exemplo). Selecione Copy > Copy outerHTML e cole o código em um arquivo de texto ou HTML.
Posso copiar CSS de um site com o elemento inspecionar?
Sim. Clique com o botão direito do mouse no elemento que deseja copiar e escolha Inspect. Clique com o botão direito do mouse no código destacado e selecione Copy > Copy styles.
Como vejo minhas senhas salvas usando o elemento inspecionar?
Para revelar senhas ocultas, clique com o botão direito do mouse na caixa de texto da senha e selecione Inspecionar. Na seção destacada, procure por type=”password” e substitua password por text. Existem maneiras mais fáceis de mostrar todas as suas senhas no Chrome.
