O Web Inspector do Safari permite examinar páginas da web no macOS. É uma ferramenta útil para desenvolvedores web e usuários curiosos.Para usar o Web Inspector, você precisa ativá-lo nas configurações do Safari.
Uma vez ativado, o Web Inspector abre um mundo de detalhes de páginas da web. Você pode ver o HTML, CSS e JavaScript que compõem uma página. Essa ferramenta ajuda você a encontrar bugs, testar designs e aprender como os sites funcionam.
O Web Inspector é fácil de usar. Clique com o botão direito em qualquer parte de uma página da web e selecione “Inspecionar elemento”. Uma nova janela aparece com todo o código da página. Você pode mudar as coisas e ver os resultados imediatamente na página.
Arsenal de ferramentas de inspeção do Safari
Abrindo o menu de desenvolvimento
Para aproveitar as ferramentas de desenvolvedor do Safari, primeiro você precisa ativar o menu “Desenvolver”. Navegue atéSafári>Preferências>Avançadoe marque a caixa ao lado de “Mostrar menu Desenvolver na barra de menu”. Isso desbloqueia um conjunto de ferramentas projetadas para aprimorar seu fluxo de trabalho de desenvolvimento web.
1. Clique em Preferências no menu Safari
2. Clique na guia Avançado
3. Verifique Mostrar recursos para desenvolvedores da Web
4. O menu de desenvolvimento será exibido
Inspecionando Elementos com Precisão
A ferramenta “Inspecionar elemento” é a sua porta de entrada para compreender a estrutura de uma página da web. Clique com o botão direito em qualquer elemento e escolha “Inspecionar elemento”. Um painel aparecerá exibindo o código HTML, CSS e JavaScript responsável pela aparência e comportamento daquele elemento.
Depurando código JavaScript
O console JavaScript do Safari é essencial para identificar e corrigir erros em seu código. Use o console para registrar mensagens, inspecionar variáveis e percorrer a execução do seu código. Você pode acessar o console no menu Desenvolver ou pressionandoOpção + Comando + C.
Leitura sugerida:RESOLVIDO: as páginas da Web parecem estranhas no Safari
Monitorando a atividade da rede
A guia Rede nas ferramentas de desenvolvedor do Safari fornece uma visão detalhada de todas as solicitações de rede feitas por uma página da web. Isso pode ajudá-lo a diagnosticar gargalos de desempenho, identificar recursos de carregamento lento e otimizar a velocidade de carregamento do seu site.
Teste de design responsivo
O modo de design responsivo do Safari permite simular diferentes tamanhos de tela e dispositivos para garantir que seu site tenha a aparência e o funcionamento corretos em uma ampla variedade de plataformas. Esse recurso é inestimável para a criação de sites responsivos que se adaptam a diversas resoluções de tela.
Ferramentas adicionais para desenvolvedores
| Ferramenta | Descrição |
|---|---|
| Armazenar | Inspecione e gerencie dados de sites armazenados em cookies, armazenamento local e armazenamento de sessão. |
| Cronogramas | Analise o desempenho dos processos de renderização, script e layout de um site. |
| Camadas | Visualize as camadas de uma página web e identifique problemas de renderização. |
| Recursos | Visualize e edite os recursos (imagens, fontes, etc.) usados por uma página web. |
| Console | Visualize logs, avisos e erros de JavaScript. |
| Procurar | Pesquise o código HTML, CSS e JavaScript de uma página da web. |
| Depurador | Percorra o código JavaScript, defina pontos de interrupção e inspecione variáveis. |
| Rede | Monitore a atividade da rede, incluindo solicitações e respostas. |
| Elementos | Visualize e edite o HTML e CSS de uma página da web. |
| Design Responsivo | Simule diferentes tamanhos de tela e dispositivos. |
| Desempenho | Analise o desempenho do site e identifique áreas de melhoria. |
| Memória | Monitore o uso da memória e detecte vazamentos de memória. |
| Segurança | Visualize detalhes de segurança de um site, incluindo certificados e informações de conexão. |
| Auditorias | Obtenha sugestões para melhorar a acessibilidade, o desempenho e o SEO do site. |
| Extensões do Inspetor da Web | Amplie a funcionalidade das ferramentas de desenvolvedor do Safari com extensões personalizadas. |
Principais conclusões
- O Web Inspector do Safari deve estar ativado nas configurações
- Web Inspector mostra o código por trás das páginas da web
- Você pode usar o Web Inspector para testar e aprender sobre sites
Habilitando o Web Inspector no Safari
Web Inspector é uma ferramenta poderosa para examinar páginas da web no Safari. Ele permite visualizar o código e depurar problemas.
A combinação de teclas é:⌘⌥i
Mostrar menu de desenvolvimento na barra de menu
Para usar o Web Inspector, você precisa primeiro ativar o menu Desenvolver. Abra o Safari e clique em Safari > Preferências na barra de menu superior. Clique na guia Avançado. Marque a caixa ao lado de “Mostrar menu Desenvolver na barra de menu”.
O menu Desenvolver agora aparecerá na barra de menu do Safari. Este menu possui muitas opções úteis para desenvolvedores web.
Acessando recursos do Web Inspector
Assim que o menu Desenvolver estiver visível, você poderá abrir o Web Inspector. Vá para a página da web que deseja verificar. Clique em Desenvolver > Mostrar Web Inspector na barra de menus. Você também pode usar o atalho de teclado Option + Command + I.
Outra maneira de abrir o Web Inspector é clicar com o botão direito em qualquer parte de uma página da web e selecionar “Inspecionar elemento”. Isso abre o inspetor e foca naquele elemento específico.
O Web Inspector possui diversas abas com diferentes ferramentas. A guia Elementos mostra a estrutura HTML da página. A guia Console exibe resultados e erros de JavaScript. Outras guias ajudam você a verificar a atividade da rede, o armazenamento e muito mais.
Utilizando o Web Inspector para desenvolvimento
Web Inspector é uma ferramenta poderosa para desenvolvedores que trabalham com Safari no macOS. Ele permite que você visualize e altere o código da página da web diretamente no navegador.
Inspecionando e modificando HTML e CSS
O Web Inspector mostra o HTML e CSS de uma página. Você pode ver como os elementos são aninhados e estilizados. Clique em qualquer elemento para visualizar seus detalhes. Você pode editar propriedades CSS ao vivo para testar as alterações. Isso ajuda a corrigir problemas de layout rapidamente.
A guia Elementos exibe a estrutura da página. Ele mostra tags e atributos HTML. Você pode expandir e recolher seções para focar em partes específicas. Clique duas vezes no texto para editar o conteúdo diretamente.
O painel Estilos mostra regras CSS para o elemento selecionado. Você pode ativar e desativar regras ou alterar valores. Novos estilos podem ser adicionados para testar ideias rapidamente. Essas alterações são temporárias e redefinidas quando você recarrega a página.
Depuração e solução de problemas
O Web Inspector ajuda a encontrar e corrigir problemas de código. A guia Console mostra avisos e logs de erros. Você pode executar comandos JavaScript aqui para testar ideias.
A guia Fontes permite definir pontos de interrupção em seu código. Isso pausa a execução para que você possa percorrer linha por linha. Você pode observar as variáveis e ver como os valores mudam à medida que o código é executado.
A aba Rede mostra todos os recursos carregados pela página. Isso inclui scripts de imagens e arquivos de dados. Você pode ver os tempos de carregamento e tamanhos de arquivo. Isso ajuda a detectar problemas de desempenho.
Ferramentas avançadas do Web Inspector
O Web Inspector possui ferramentas para análises mais profundas. A guia Armazenamento mostra os dados salvos pelo site, como cookies e armazenamento local. Você pode visualizar e editar esses dados.
A guia Cronogramas registra a atividade da página ao longo do tempo. Mostra quando os scripts são executados e os layouts são atualizados. Isso ajuda a encontrar partes lentas do seu código.
A guia Camadas visualiza as camadas compostas da página. Isso é útil para detectar problemas de renderização. Você pode ver como os elementos são empilhados e repintados.
Essas ferramentas oferecem aos desenvolvedores uma visão completa de suas páginas da web. Eles facilitam a construção de sites rápidos e sem erros.
O Safari inclui ferramentas de desenvolvedor integradas – você não precisa instalar nada para depurar problemas no navegador.