Começando no Safari versão 9 no OS X El Capitan, a Apple introduziu o Modo de Design Responsivo. Essa interface ajuda os desenvolvedores da web a projetar experiências da web em vários tamanhos de tela, orientações e resoluções. O Design Responsivo ajuda os desenvolvedores a garantir que seus sites e aplicativos sejam compatíveis com vários dispositivos e plataformas. Veja como ativar o modo de design responsivo no navegador Safari. As informações neste artigo se aplicam ao Safari 13 ao Safari 9, abrangendo o macOS Catalina ao OS X El Capitan. O Modo de Design Responsivo não está disponível na versão do Safari para Windows, que a Apple não oferece mais suporte.
Como ativar o modo de design responsivo no Safari
Para ativar o Modo de design responsivo do Safari, junto com outras ferramentas de desenvolvedor do Safari:
-
Vou ao Safári menu e selecione Preferências. Pressione o atalho do teclado Comando+, (vírgula) para acessar as Preferências rapidamente.
-
No Preferências caixa de diálogo, selecione o Avançado aba.
-
Na parte inferior da caixa de diálogo, selecione o Mostrar menu de desenvolvimento na barra de menu caixa de seleção.
-
Agora você verá Desenvolver na barra de menu superior do Safari.
-
Selecione Desenvolver > Entrar no modo de design responsivo na barra de ferramentas do Safari. Pressione o atalho do teclado Opção+Comando+R para entrar no Modo de design responsivo rapidamente.
-
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.
Safari Developer Tools
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 de usuário
Ao alterar o Agente do usuário, você pode fazer um site pensar que 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 erro
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 trechos
Permite editar e executar fragmentos de código. Este recurso é útil do ponto de vista de teste.
Mostrar construtor de extensão
Ajuda a construir extensões do Safari, empacotando seu código de acordo e anexando metadados.
Iniciar a gravação da linha do tempo
Permite registrar solicitações de rede, execução de JavaScript, renderização de página e outros eventos no WebKit Inspector.
Caches vazios
Exclui todos os caches armazenados no Safari, não apenas os arquivos de cache de sites padrão.
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 razões de segurança, este recurso permite que você insira URLs contendo JavaScript na barra de endereço do Safari.