Contente
- Acesse as ferramentas do desenvolvedor no navegador da Apple
- Como ativar o modo de design responsivo no Safari
- Ferramentas de desenvolvedor do Safari
Acesse as ferramentas do desenvolvedor no navegador da Apple
Garantir que sites e aplicativos da web suportem um bando de dispositivos e plataformas é uma tarefa essencial para desenvolvedores da web. O navegador Safari da Apple inclui um modo de design responsivo que permite visualizar como o site será renderizado em várias resoluções de tela e em diferentes versões do iPad, iPhone e iPod touch.
As instruções neste artigo se aplicam ao Safari 13 para macOS. O modo Design responsivo não está disponível na versão do Windows.
Como ativar o modo de design responsivo no Safari
Para habilitar as ferramentas de desenvolvedor do Safari e o modo de design responsivo:
-
Selecione Safári > Preferências na barra de ferramentas do Safari.
Você também pode usar o atalho do teclado Comando+Vírgula (,) para acessar o menu Preferências.
-
No menu Preferências, selecione o Avançado guia e marque a caixa ao lado Mostrar menu Desenvolver na barra de menus. Uma nova opção agora deve estar disponível na barra de ferramentas do Safari, na parte superior da tela.
-
Selecione desenvolve > Entrar no modo de design responsivo na barra de ferramentas do Safari.
Você também pode usar o atalho do teclado Opção+Comando+R para entrar no Modo de design responsivo.
-
A página da web ativa agora deve ser exibida no modo 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.
Você também pode instruir o Safari a simular diferentes agentes de usuário usando o menu suspenso diretamente acima dos ícones de resolução.
Ferramentas de desenvolvedor do Safari
Além do modo Design responsivo, o menu Develop do Safari oferece muitas outras opções úteis, incluindo:
- Abrir página com: Abra a página da web ativa em qualquer outro navegador atualmente instalado no seu Mac.
- Agente de usuário: Alterar o agente do usuário faz com que os servidores da web identifiquem seu navegador como algo diferente do Safari.
- Connect Web Inspector: Exibe todos os recursos de uma página da web, incluindo informações de CSS e métricas de DOM.
- Mostrar Console de Erros: Exibe erros e avisos de JavaScript, HTML e XML.
- Mostrar fonte da página: Visualize e pesquise o código fonte da página da web ativa.
- Mostrar recursos da página: Exibe documentos, scripts, CSS e outros recursos da página atual.
- Mostrar editor de trechos: Edite e execute fragmentos de código. Esse recurso é muito útil do ponto de vista de teste.
- Mostrar criador de extensões: Crie suas próprias extensões do Safari compactando seu código adequadamente e anexando metadados.
- Iniciar gravação da linha do tempo: Registre solicitações de rede, execução de JavaScript, renderização de página e outros eventos no WebKit Inspector.
- Caches vazios: Exclua todos os caches armazenados no Safari, não apenas os arquivos de cache padrão do site.
- Desativar caches: Com o cache desativado, os recursos são baixados de um site sempre que uma solicitação de acesso é feita, em vez de utilizar o cache local.
- Permitir JavaScript do campo de pesquisa inteligente: Desativado por padrão por motivos de segurança, esse recurso permite inserir URLs que contêm JavaScript na barra de endereços do Safari.
- Tratar certificados SHA-1 como inseguros: Abreviação de Secure Hash Algorithm, a função hash SHA-1 provou ser menos segura do que se pensava inicialmente, daí a adição dessa opção no Safari.
