Neste guia, gostaria de lhe dar uma visão aprofundada sobre como utilizar as ferramentas de programação do Safari. Embora as ferramentas de programação do Safari tenham algumas diferenças em relação às do Chrome e do Firefox, o princípio básico continua a ser o mesmo. Aprenderá a ativar as ferramentas de programação, a utilizar as diferentes áreas e funções e a implementar processos de depuração essenciais. Vamos começar com as descobertas mais importantes.
Descobertas mais importantes
- As Developer Tools do Safari não são tão facilmente acessíveis como nos outros navegadores, uma vez que têm de ser activadas através das definições.
- A interface do utilizador e as funcionalidades das Ferramentas de Programador são semelhantes às de outros navegadores, mas as implementações específicas variam.
- A depuração em dispositivos iOS é possível com o Safari, ligando o dispositivo através de USB.
Instruções passo a passo
1. Ativar as Developer Tools no Safari
Para ativar as Developer Tools no Safari, é necessário ajustar as definições do Safari. Inicie o Safari e aceda à barra de menus. Selecione "Safari" e, em seguida, "Preferências".
Mude para o separador "Avançadas" na extremidade direita. Aí encontra a opção "Mostrar funcionalidades de desenvolvimento para programadores Web". Active esta opção para ativar as ferramentas de desenvolvimento.
2. acesso às ferramentas de desenvolvimento
Assim que as Ferramentas de Desenvolvimento estiverem activadas, pode abri-las através do menu "Desenvolver" na barra de menus ou utilizando determinadas combinações de teclas. O acesso direto através das teclas F12 ou Alt-Cmd-I não funciona, mas pode, por exemplo, clicar com o botão direito do rato no elemento e selecionar "Examinar elemento".
Pode também utilizar a combinação de teclas Cmd+Option+C para abrir a consola e alternar entre diferentes vistas.
3. Navegação nas Ferramentas de Desenvolvimento
Embora a interface do utilizador das Ferramentas de desenvolvimento seja semelhante à que está habituado a utilizar noutros navegadores, estas têm algumas diferenças especiais. Na barra lateral esquerda, pode alternar entre os separadores "Elementos", "Consola", "Fontes", "Rede" e outros.
Aqui pode saber mais sobre os elementos do sítio Web para ver e editar os respectivos estilos e esquemas. Pode editar cada estilo clicando simplesmente nas regras CSS correspondentes.
4. Trabalhar com a consola
A consola do Safari permite-lhe executar código JavaScript e apresentar os resultados pretendidos. Um aspeto interessante é que a formatação dos resultados é diferente. O primeiro argumento é apresentado como texto, enquanto todos os argumentos subsequentes são apresentados como objectos JavaScript.
Se emitir mensagens de registo adicionais, certifique-se de que a apresentação não tem espaços entre os argumentos individuais, mas é separada por travessões. Isto pode ser importante para evitar mal-entendidos durante a depuração.
5. definir o código-fonte e os pontos de interrupção
No separador "Sources" (Fontes), pode ver os ficheiros originais e os ficheiros transpilados do seu sítio Web. Também é possível definir pontos de interrupção aqui para facilitar a depuração. Para o fazer, basta clicar na linha de código correspondente.
Não se esqueça de utilizar os vários controlos para facilitar a passagem pelo código. No Safari, o atalho para o passo a passo é diferente; em vez disso, utilize ícones específicos.
6. efetuar análises de rede
O separador "Rede" dá-lhe informações completas sobre todos os pedidos que a sua página faz durante o tempo de carregamento. Aqui pode ver os pedidos que são enviados e recebidos, bem como os respectivos cabeçalhos e pré-visualizações.
Uma caraterística interessante aqui é a distinção entre cabeçalhos e tempos, o que lhe dá uma visão mais profunda do desempenho do seu sítio.
7. utilizar as medições de desempenho e as linhas de tempo
No separador "Linhas de tempo", pode efetuar análises de desempenho exaustivas e fazer gravações para compreender melhor a velocidade e os processos do seu sítio.
Esta função funciona de forma semelhante aos perfis de desempenho noutros navegadores, mas poderá ter de se habituar a algumas diferenças na apresentação e na nomenclatura.
8 Depuração em dispositivos móveis
Um destaque especial das Ferramentas de desenvolvimento do Safari é a capacidade de depurar sítios Web no seu iPhone ou iPad. Ligue o seu dispositivo através de USB e active as opções de depuração correspondentes nas definições do dispositivo.
Em seguida, aceda ao menu "Desenvolver" e selecione o dispositivo ligado para obter acesso às janelas abertas e às respectivas Developer Tools.
Resumo
Neste guia detalhado, aprendeu a ativar as Ferramentas de desenvolvimento do Safari, a utilizar as várias funções e separadores e a efetuar a depuração em dispositivos móveis. A maioria das funções é semelhante às ferramentas de outros navegadores, mas existem diferenças específicas, especialmente na interface do utilizador e nos atalhos. Depois de se familiarizar com as mesmas, será rapidamente capaz de depurar no Safari.
Perguntas mais frequentes
Como posso ativar as ferramentas para programadores no Safari?Aceda às definições do Safari em "Advanced" e active a opção "Show development features for web developers".
Como posso abrir a consola no Safari?Pode abrir a consola com a combinação de teclas Cmd+Option+C ou clicando em "Explorar item" no menu de contexto.
Quais são as diferenças entre a consola do Safari e a de outros navegadores? No Safari, o primeiro argumento é apresentado como texto e os argumentos subsequentes são apresentados como objectos JavaScript, não sendo utilizado espaço entre os resultados.
Posso depurar no meu iPhone com o Safari?Sim, ao ligar o seu iPhone via USB e ativar as opções de depuração, pode depurar páginas web no seu iPhone.
Existe a mesma análise de desempenho no Safari e no Chrome?Sim, a função de linha de tempo no Safari permite análises de desempenho semelhantes, mas a apresentação pode ser diferente.
