Quando você clica com o botão direito em qualquer página da web no Safari no Mac, ele não revela os botões Mostrar código-fonte da página e Inspecionar elemento. Para ver isso, você precisa habilitar o menu Desenvolver – mostraremos como fazer isso.
Depois de ativar o menu Desenvolver, clicar com o botão direito em um espaço em branco em qualquer site da Web revelará os botões Inspecionar elemento e Mostrar código-fonte da página. Eles permitem que você dê uma olhada no código-fonte de qualquer site, o que é útil para coisas como baixar imagens de sites e depurar código ou descobrir como fica por trás de qualquer site (para designers de sites).
Como ativar o menu de desenvolvimento no Safari no Mac
Você pode ativar facilmente o menu Desenvolver no Safari seguindo algumas etapas. Abra o Safari em seu Mac e clique no botão “Safari” na barra de menu.
Em seguida, selecione “Preferências”. Como alternativa, você pode usar o atalho de teclado Command +, (vírgula). Isso também abrirá as preferências do Safari.
Vá para a guia “Avançado”.
Marque a caixa “Mostrar menu de desenvolvimento na barra de menus”.
Agora, o menu Desenvolver aparecerá entre os favoritos e a janela na parte superior.
Além de poder visualizar o código-fonte da página, isso permitirá que você acesse recursos focados no desenvolvedor, como desativar o JavaScript em qualquer site.
Como visualizar o código-fonte da página no Safari no Mac
Depois de habilitar o menu Desenvolver, há algumas maneiras de visualizar o código-fonte da página no Safari.
Abra qualquer site no Safari e clique com o botão direito no espaço em branco da página. Agora, selecione “Mostrar código-fonte da página”. Você também pode acessar esse menu usando o atalho de teclado Option + Command + u.
Se você estiver procurando por imagens ou outros elementos de mídia em qualquer página da web, o Safari facilita sua localização. No painel esquerdo, você verá várias pastas, como Imagens, Fontes, etc. Clique na pasta “Imagens” para encontrar rapidamente as fotos que você precisa.
Depois de selecionar uma imagem, você pode ver seus detalhes facilmente abrindo a barra lateral de detalhes. O botão para abri-lo está localizado no canto superior direito do console, logo abaixo do ícone de engrenagem. Você também pode abrir isso com o atalho Option + Command + 0.
Clique em “Recurso” na parte superior da barra lateral de detalhes para visualizar detalhes, como o tamanho da imagem e seu URL completo.
Você também pode alterar a posição do console de origem da página facilmente. Existem dois botões no canto superior esquerdo deste console, ao lado do botão X. Clique no ícone de retângulo para mover o console para um lado diferente na janela do navegador.
Se desejar abrir o console do código-fonte da página em uma janela separada, você pode clicar no ícone de dois retângulos. Isso removerá o console e o abrirá em uma janela separada.
Para verificar o código de qualquer elemento específico na página, você pode clicar com o botão direito nesse elemento e selecionar “Inspecionar elemento”. Isso o levará diretamente para o código do elemento que você selecionou.
Sempre que terminar de examinar o código, clique no botão X para fechar o console de origem da página e voltar a navegar no Safari. Você também pode verificar como visualizar a fonte da página de um site no Google Chrome aqui.
