Como ativar o menu de desenvolvimento no Safari no Mac

Quando você clica com o botão direito do mouse em qualquer página da web no Safari no Mac, isso não revela os botões Mostrar código-fonte da página e Inspecionar elemento. Para vê-los, você precisa ativar o menu Desenvolver — nós &’ 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 irá 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 ” botão 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 seção “ Avançado ” guia.

Marque a caixa para “ 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 voltados para o desenvolvedor, como desativar o JavaScript em qualquer site.

Como visualizar o código-fonte da página no Safari no Mac

Depois de ativar 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 do mouse no espaço em branco da página. Agora, selecione “ Mostrar código-fonte da página. ” Você também pode acessar este menu usando o atalho de teclado Option + Command + u.

Se você estiver procurando imagens ou outros elementos de mídia em qualquer página da web, o Safari facilita a sua localização. No painel esquerdo, você verá várias pastas, como Imagens, Fontes, etc. Clique no botão “ Imagens ” pasta para encontrar rapidamente as fotos de que você precisa.

Depois de selecionar uma imagem, você pode visualizar 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 abri-lo 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 do código-fonte 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 irá desanexar o console e abri-lo 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 do código-fonte 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.

RELACIONADO: Como visualizar o código-fonte HTML no Google Chrome