Ser um desenvolvedor web no mundo de hoje significa dar suporte a vários dispositivos e plataformas, o que às vezes pode ser uma tarefa assustadora. Mesmo com o código mais bem elaborado e aderente aos mais recentes padrões da web, você ainda pode descobrir que partes do seu site podem não parecer ou agir da maneira que você deseja em determinados dispositivos ou resoluções. Quando confrontados com o desafio de suportar um vasto leque de cenários, ter as ferramentas de simulação certas ao seu dispor pode ser inestimável.
Se você é um dos muitos programadores que usam um Mac, o conjunto de ferramentas de desenvolvedor do Safari sempre foi útil. Com o lançamento do Safari 9, a abrangência dessa funcionalidade se expandiu consideravelmente, principalmente devido ao Modo de design responsivo, que permite visualizar como o site será renderizado em várias resoluções de tela, bem como em diferentes versões do iPad, iPhone e iPod touch.
Este tutorial detalha como ativar o Modo de design responsivo e como utilizá-lo para suas necessidades de desenvolvimento.
Preferências do Safari
Primeiro, abra seu navegador Safari.
Clique em Safári no menu do navegador, localizado na parte superior da tela. Quando o menu suspenso aparecer, selecione o Preferências opção circulada no exemplo mostrado.
Nota: Você pode utilizar o seguinte atalho de teclado em vez do item de menu acima mencionado: COMANDO + COMMA (,)
02 de 05Mostrar Menu Desenvolver
A caixa de diálogo Preferências do Safari agora deve ser exibida, sobrepondo a janela do navegador. Primeiro, clique no Avançado ícone representado por uma engrenagem e localizado no canto superior direito da janela.
As preferências avançadas do navegador agora devem estar visíveis. Na parte inferior é uma opção acompanhada por uma caixa de seleção, rotulada Mostrar o menu Desenvolver na barra de menus e circulou no exemplo acima. Clique na caixa de seleção uma vez para ativar este menu.
03 de 05Entre no modo de design responsivo
Uma nova opção deve agora estar disponível em seu menu Safari, localizado na parte superior da tela, rotulado desenvolve. Clique nesta opção.
Quando o menu suspenso aparecer, selecione Entre no modo de design responsivocirculado no exemplo mostrado.
Nota: Você pode utilizar o seguinte atalho de teclado em vez do item de menu acima mencionado:OPÇÃO + COMANDO + R
04 de 05Modo de design responsivo
A página da web ativa deve agora ser exibida no Modo de design responsivo, conforme mostrado no exemplo acima. Ao selecionar um dos dispositivos iOS listados, como o iPhone 6, ou uma das resoluções de tela designadas disponíveis, como 800 x 600, você pode visualizar imediatamente como a página será renderizada nesse dispositivo ou nessa resolução de exibição.
Além dos dispositivos e resoluções mostrados, você também pode instruir o Safari para simular um agente de usuário diferente - como um de um navegador diferente - clicando no menu suspenso mostrado diretamente acima dos ícones de resolução.
05 de 05Menu Desenvolver: Outras Opções
Além do modo de design responsivo, o menu Develop do Safari 9 oferece muitas outras opções úteis, algumas das quais estão listadas abaixo.
- Abrir página com: Permite que você 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 9.
- Conecte o Web Inspector: O Web Inspector do Safari 9 exibe todos os recursos de uma página da Web, fornecendo a capacidade de examinar informações de CSS, métricas de DOM e estrutura, bem como seu código-fonte nativo.
- Mostrar o Console de Erros: Uma das opções mais usadas no Menu Revelação, esse console exibe erros e avisos de JavaScript, HTML e XML.
- Mostrar a origem da página: Permite visualizar e pesquisar o código-fonte da página da Web ativa.
- Mostrar recursos da página: Selecionar esta opção exibe documentos, scripts, CSS e outros recursos da página atual.
- Mostrar editor de trechos: Fornece a capacidade de editar e executar fragmentos de código, em oposição a uma página completa. Esse recurso é muito útil de uma perspectiva de teste.
- Mostrar criador de extensões: Permite que você crie suas próprias extensões do Safari, embalando seu código de acordo e anexando metadados.
- Inicie a gravação da linha de tempo: Registra vários itens, incluindo solicitações de rede, execução de JavaScript, renderização de página e outros eventos para um período definido pelo usuário, tudo visível no WebKit Inspector.
- Caches vazios: Clicar nessa opção exclui todo o cache armazenado 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 que você insira URLs que contenham JavaScript na barra de endereços do Safari.
- Trate os 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 desta opção no Safari 9.
