MacOS: Habilitar Web Inspector no Safari

Se você deseja visualizar o código-fonte de uma página da web no Apple Safari para macOS Sierra, será necessário habilitar a ferramenta Safari Web Inspector usando os seguintes métodos.

Os desenvolvedores de navegadores, como Apple e Google, fornecem uma ferramenta pronta para visualizar os códigos subjacentes. Os desenvolvedores costumam usar isso para depurar e visualizar as alterações feitas em um site ativo sem perturbar o código real no servidor. No entanto, essa ferramenta agora se tornou popular entre criadores de conteúdo e usuários da internet que têm conhecimento técnico e que desejam editar um site ativo para fins pessoais ou profissionais. Se você é um deles, leia o artigo até o final para saber tudo sobre o Safari Web Inspector e como inspecionar elementos.

Conteúdos

O que é o Safari Web Inspector?

MacOS: Habilitar Web Inspector no Safari
Aprenda o que é o Safari Web Inspector (Foto: Cortesia da Apple)

O Web Inspector é parte do conjunto de ferramentas de desenvolvimento que a Apple oferece para desenvolvedores de sites e aplicativos em todo o mundo. A ferramenta está disponível tanto para dispositivos macOS quanto para iOS. Os desenvolvedores podem modificar, otimizar e depurar websites facilmente para obter um desempenho máximo para suas propriedades online.

A ferramenta Web Inspector no Safari traz a maior parte dos recursos do website sob uma interface unificada. A ferramenta também separa os recursos e seus parâmetros em guias dedicadas para que você não fique sobrecarregado com tantos códigos e opções. O Web Inspector também oferece uma visão de Linha do Tempo da memória do website para que você possa depurar a memória facilmente. Além disso, sendo um desenvolvedor, você pode ajustar e otimizar mais de 150 propriedades CSS populares que você precisa para desenvolver um website funcional.

No Web Inspector, você tem as seguintes guias para recursos da web:

  • Elementos
  • Console
  • Fontes
  • Rede
  • Linhas do Tempo
  • Armazenamento
  • Gráficos
  • Camadas
  • Auditoria

Como ativar o Safari Web Inspector no Safari 10 e acima

Por padrão, a Apple Mac desativa o Web Inspector no Safari. Isso é para evitar desordem desnecessária na interface do usuário (UI) do navegador web. No entanto, se você é um desenvolvedor, criador de conteúdo, ou um usuário experiente de Mac, pode querer ativar o recurso seguindo estes passos:

  • Abra o aplicativo Safari no seu MacBook ou iMac.
  • Certifique-se de ter clicado no navegador para obter o ícone do Safari na barra de ferramentas do Mac.
MacOS: Habilitar Web Inspector no Safari
Como encontrar a opção de Preferências do Safari
  • Clique em Safari no canto superior esquerdo e seleccione Preferências.
  • Alternativamente, você pode usar o atalho Command + , para mostrar o menu de Preferências.
  • Dentro do menu de Preferências, você deve estar na guia Geral.
MacOS: Habilitar Web Inspector no Safari
Menu de Preferências do Safari, guia Avançado para habilitar o Web Inspector no Safari
  • Navegue até a aba Avançado.
  • Logo abaixo da opção Proxies, você deve ver a caixa de seleção para Mostrar menu Desenvolver na barra de menu. Marque a caixa.
MacOS: Habilitar Web Inspector no Safari
O menu Desenvolver na barra de ferramentas do Mac
  • Agora, o menu Desenvolver do Safari aparecerá na barra de ferramentas do Mac.

Assim você pode ativar a funcionalidade do Web Inspector no seu navegador Safari. Os passos são semelhantes para a versão mais recente do macOS Ventura, e versões anteriores como Monterey, Big Sur, Catalina, etc., até Jaguar.

Leia também: Html 4.01

Até agora, você aprendeu como obter a funcionalidade do Web Inspector no aplicativo Safari da Mac. Aprenda abaixo como usá-lo no Safari para websites ativos:

Como usar o Safari Web Inspector no macOS

Encontre abaixo os passos para chamar a ferramenta Web Inspector para desenvolvimento web, criação de conteúdo ou quaisquer outros propósitos. Neste artigo, estou mostrando os passos usando o sistema operacional macOS Monterey. No entanto, os passos são bastante semelhantes do macOS Jaguar ao Ventura.

  • Abra o Safari e visite qualquer website que você deseja inspecionar.
  • Existem duas maneiras de inspecionar o código HTML/CSS subjacente de um website ou fazer alterações usando a ferramenta de desenvolvedor Apple Web Inspector. Estas são:
    • Desenvolver > Mostrar Web Inspector.
    • Clique com o botão direito > Inspecionar Elemento.
  • Para usar a primeira, vá até a barra de ferramentas do Mac para o navegador Safari e clique no menu Desenvolver.
MacOS: Habilitar Web Inspector no Safari
Como usar o Safari Web Inspector no macOS Monterey
  • No menu de contexto que aparece, clique em Mostrar Web Inspector. O atalho para esta ação é Option + Command + I.
MacOS: Habilitar Web Inspector no Safari
A visualização do Web Inspector
  • Isso abrirá a ferramenta Web Inspector na metade inferior do navegador web. Os códigos que você vê são para o URL ou página da web completa que você acessou.
  • Se você quiser visualizar o código subjacente de um elemento específico na página da web sem abrir o código para a página inteira, selecione o elemento que deseja inspecionar.
MacOS: Habilitar Web Inspector no Safari
Inspecionar elemento no Safari para Mac
  • Clique com o botão direito e selecione Inspecionar Elemento no menu de contexto que se abre.
  • O Web Inspector do Safari será aberto.
MacOS: Habilitar Web Inspector no Safari
Inspecionando elementos específicos no Safari
  • Mas desta vez, o Safari levará você diretamente ao código HTML ou CSS subjacente do elemento que você está auditando.
  • Nesta ferramenta, você obtém os códigos HTML e CSS do elemento da página web que está inspecionando.

Leia também: Tecnipages Explica CSS

Como abrir o Safari Web Inspector em versões mais antigas do macOS

Suponha que você esteja em um Mac mais antigo que Jaguar e precise usar a ferramenta Web Inspector. Se você não encontrar os passos acima nesse Mac, pode executar um código simples para ativar o Web Inspector. Aqui está como fazer:

  • Abra Aplicativos e vá para a pasta Utilitários.
  • Dentro de Utilitários, você deve encontrar o Terminal. É o prompt de comando dos computadores macOS.
  • Agora, abra a interface de linha de comando do Terminal e digite o seguinte comando simples:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

MacOS: Habilitar Web Inspector no Safari
Execute o código de Inspecionar Elemento para habilitar o Web Inspector no Safari
  • Pressione Return para executar o comando.
  • Agora você pode abrir uma página da web no Safari e clicar com o botão direito ou segurar o botão do mouse em qualquer lugar na página até que o menu de contexto apareça.
  • There, clique na opção Inspecionar Elemento para visualizar os códigos CSS e HTML subjacentes do website.

Safari Web Inspector: Considerações Finais

Portanto, estes são os métodos para habilitar o Web Inspector no Safari sem esforço. Você pode seguir os passos por conta própria e começar a desenvolver ou criar conteúdo em poucos minutos. Você aprendeu os métodos para ativar o Inspecionar Elemento no Safari para versões novas e legadas do macOS. Se eu perdi algum método para obter e usar o Web Inspector, não hesite em me informar deixando um comentário abaixo.

Próximo, os melhores aplicativos de codificação para iPad.



Leave a Comment

Safari: Excluir Cookies, Histórico, Senhas, etc.

Safari: Excluir Cookies, Histórico, Senhas, etc.

Quer saber como excluir cookies, histórico ou dados de senha do navegador Apple Safari? Leia este guia e aprenda agora!

Safari para iPhone e iPad: Correção de “Não foi possível abrir a página, muitos redirecionamentos”

Safari para iPhone e iPad: Correção de “Não foi possível abrir a página, muitos redirecionamentos”

Resolva um erro em que não foi possível abrir a página, muitos redirecionamentos. aparece ao navegar na web em seu Apple iPhone ou iPad.

Como visualizar a versão desktop do Facebook no iPhone e iPad

Como visualizar a versão desktop do Facebook no iPhone e iPad

Como visualizar a versão completa do Facebook em seu iPhone ou outro dispositivo Apple iOS.

Safari: exclua cookies, histórico, senhas, etc.

Safari: exclua cookies, histórico, senhas, etc.

Como excluir cookies, histórico ou dados de senha do navegador Apple Safari.

Safari: ativar / desativar o bloqueador de pop-ups

Safari: ativar / desativar o bloqueador de pop-ups

Como habilitar ou desabilitar o bloqueador de pop-up no Apple Safari para Windows, OS X e iOS.

Como definir a página inicial no Chrome, Safari, Firefox, IE, Edge

Como definir a página inicial no Chrome, Safari, Firefox, IE, Edge

Sua página inicial é a página que abre quando você clica no botão de página inicial do navegador - geralmente parte da barra de menu na parte superior e na forma de um

Como aumentar o tamanho do texto em qualquer site no iPad

Como aumentar o tamanho do texto em qualquer site no iPad

Facilite a leitura no Safari e aumente o tamanho; veja como.

iPadOS: dicas e truques que todo usuário do Safari deve saber

iPadOS: dicas e truques que todo usuário do Safari deve saber

Conhecendo as dicas e truques que o Safari tem a oferecer, você saberá como obter o máximo do navegador. Também traz algumas dicas e truques na manga

Como visualizar senhas salvas no Chrome, Opera, Edge e Firefox

Como visualizar senhas salvas no Chrome, Opera, Edge e Firefox

Salvar suas senhas no navegador não é a coisa mais segura a se fazer. Mas, alguns podem fazer isso de qualquer maneira, uma vez que as senhas que salvam são para contas inúteis ou precisa descobrir a senha que você está usando naquele local? Mostramos que você deve visualizar as senhas que seu navegador salvou.

MacOS: Ativar Web Inspector no Safari

MacOS: Ativar Web Inspector no Safari

Como visualizar o código-fonte em uma página da web no Apple Safari usando a ferramenta Web Inspector.

Apple Safari: Desative completamente o cache

Apple Safari: Desative completamente o cache

Mostramos como desabilitar o cache no navegador Apple Safari.

O ícone do Safari está faltando no iPhone ou iPad

O ícone do Safari está faltando no iPhone ou iPad

Resolva um problema em que o ícone do Apple Safari está faltando em seu dispositivo iOS.

iPhone e iPad: definir a página inicial do Safari

iPhone e iPad: definir a página inicial do Safari

Como configurar a página inicial do Safari em seu Apple iPhone ou iPad.

Forçar versão desktop do YouTube no Safari para iPhone e iPad

Forçar versão desktop do YouTube no Safari para iPhone e iPad

Mostramos como exibir a versão completa para desktop do site do YouTube no Safari para iOS.

Atalho para aumentar / diminuir o tamanho da fonte em qualquer navegador

Atalho para aumentar / diminuir o tamanho da fonte em qualquer navegador

Como aumentar ou diminuir rapidamente a fonte em qualquer navegador em execução no Microsoft Windows, Linux ou MacOS.

Como alterar o agente do usuário no Safari

Como alterar o agente do usuário no Safari

Instruções detalhadas sobre como alterar a string do agente do usuário no navegador Apple Safari para MacOS.

Windows 11 vs. MacOS – Cinco Principais Diferenças

Windows 11 vs. MacOS – Cinco Principais Diferenças

Windows 11 vs. MacOS – Descubra algumas das principais diferenças entre esses sistemas operacionais para ajudá-lo a escolher seu dispositivo.

MacOS: Habilitar Web Inspector no Safari

MacOS: Habilitar Web Inspector no Safari

Aprenda aqui como visualizar o código-fonte de uma página da web no Apple Safari usando a ferramenta Safari Web Inspector.

Safari: Excluir Cookies, Histórico, Senhas, etc.

Safari: Excluir Cookies, Histórico, Senhas, etc.

Quer saber como excluir cookies, histórico ou dados de senha do navegador Apple Safari? Leia este guia e aprenda agora!

MacOS: Desabilitar “{appname} não pode ser aberto porque é de um desenvolvedor não identificado”

MacOS: Desabilitar “{appname} não pode ser aberto porque é de um desenvolvedor não identificado”

O erro de desenvolvedor não identificado no macOS pode ser um grande incômodo. Leia este artigo agora para encontrar métodos comprovados que resolverão o problema instantaneamente!

MacOS Sonoma vs macOS Ventura: Qual é a diferença

MacOS Sonoma vs macOS Ventura: Qual é a diferença

Caso você planeje atualizar para o macOS Sonoma, veja como ele é diferente do macOS Ventura em termos de recursos.

MacOS: como definir variável de ambiente

MacOS: como definir variável de ambiente

No Mac, as variáveis ​​ambientais armazenam informações, como quem é o usuário atual, caminhos padrão para comandos e o nome do computador host. Se você

Outlook 365, o menu inicial está faltando: 6 melhores correções

Outlook 365, o menu inicial está faltando: 6 melhores correções

Se o botão Home estiver faltando no Outlook, desative e ative o Home Mail na faixa de opções. Essa solução rápida ajudou muitos usuários.

Como criar uma lista de distribuição no Outlook: os 3 melhores métodos

Como criar uma lista de distribuição no Outlook: os 3 melhores métodos

Quer enviar um e-mail para muitos destinatários? Não sabe como criar uma lista de distribuição no Outlook? Aqui está como fazer isso sem esforço!

Como fazer uma lista suspensa no Excel: 2 melhores métodos em 2023

Como fazer uma lista suspensa no Excel: 2 melhores métodos em 2023

Se você deseja tornar as tarefas de entrada de dados perfeitas e rápidas, precisa aprender a fazer uma lista suspensa no Excel.

O Outlook não abre no modo de segurança: as 5 principais correções

O Outlook não abre no modo de segurança: as 5 principais correções

Deseja abrir o Outlook no modo de segurança, mas não consegue? Descubra como corrigir o problema “O Outlook não abre no modo de segurança”.