O que saber
- Para ativar: Preferences > selecione Advanced tab > toggle Show Develop menu in menu barativado.
- Para usar: selecione Desenvolver > Entrar no modo de design responsivo na barra de ferramentas do Safari.
Este artigo explica como habilitar o modo de design responsivo no Safari 9 ao Safari 13, no OS X El Capitan ao macOS Catalina.
Como ativar o modo de design responsivo no Safari
Para ativar o Modo de design responsivo do Safari, juntamente com outras ferramentas de desenvolvedor do Safari:
-
Vá ao menu Safari e selecione Preferences.
Pressione o atalho de teclado Command+ , (vírgula) para acessar as Preferências rapidamente.
-
Na caixa de diálogo Preferences, selecione a guia Advanced.
Image -
Na parte inferior da caixa de diálogo, selecione a caixa de seleção Show Develop menu in menu bar.
Image -
Agora você verá Desenvolver na barra de menu superior do Safari.
Image -
Selecione Desenvolver > Entre no Modo de Design Responsivo na barra de ferramentas do Safari.
Pressione o atalho de teclado Option+ Command+ R para entrar rapidamente no modo de design responsivo.
Image -
A página da web ativa é exibida no modo de design responsivo. Na parte superior da página, escolha um dispositivo iOS ou uma resolução de tela para ver como a página será renderizada.
Image -
Como alternativa, veja como sua página da web será renderizada em várias plataformas usando o menu suspenso acima dos ícones de resolução.
Image
Ferramentas do desenvolvedor Safari
Além do modo de design responsivo, o menu Safari Develop oferece outras opções úteis.
Abrir página com
Abre a página da web ativa em qualquer navegador atualmente instalado no Mac.
Agente do Usuário
Quando você altera o User Agent, você pode enganar um site para pensar que você está usando outro navegador.
Mostrar Inspetor da Web
Exibe todos os recursos de uma página da web, incluindo informações CSS e métricas DOM.
Mostrar console de erros
Exibe erros e avisos de JavaScript, HTML e XML.
Mostrar fonte da página
Permite visualizar o código-fonte da página da web ativa e pesquisar o conteúdo da página.
Mostrar recursos da página
Exibe documentos, scripts, CSS e outros recursos da página atual.
Mostrar Editor de Fragmentos
Permite editar e executar fragmentos de código. Esse recurso é útil do ponto de vista de teste.
Mostrar Construtor de Extensões
Ajuda você a criar extensões do Safari empacotando seu código de acordo e anexando metadados.
Iniciar Gravação da Linha do Tempo
Permite gravar solicitações de rede, execução de JavaScript, renderização de página e outros eventos no WebKit Inspector.
Caches Vazios
Apaga todos os caches armazenados no Safari, não apenas os arquivos de cache padrão do site.
Desativar Caches
Com o cache desabilitado, os recursos são baixados de um site cada vez que uma solicitação de acesso é feita, em vez de usar o cache local.
Permitir JavaScript do campo de pesquisa inteligente
Desativado por padrão por motivos de segurança, esse recurso permite que você insira URLs contendo JavaScript na barra de endereços do Safari.
