Barra de Ferramentas de Desenvolvimento
Enquanto o servidor de desenvolvimento estiver em execução, o Astro inclui uma barra de ferramentas de desenvolvimento na parte inferior de cada página na pré-visualização do seu navegador local.
Essa barra de ferramentas inclui várias ferramentas úteis para depurar e inspecionar seu site durante o desenvolvimento e pode ser estendida com mais aplicativos da barra de ferramentas de desenvolvimento encontrados no diretório de integrações. Você pode até mesmo criar seus próprios aplicativos usando a API da barra de ferramentas de desenvolvimento!
Essa barra de ferramentas é habilitada por padrão e aparece quando você passa o mouse sobre a parte inferior da página. Ela é apenas uma ferramenta de desenvolvimento e não aparecerá em seu site publicado.
Aplicativos incluídos
Seção intitulada Aplicativos incluídosMenu Astro
Seção intitulada Menu AstroO aplicativo Menu Astro fornece acesso fácil a várias informações sobre o projeto atual e links para recursos adicionais. Em especial, ele fornece acesso com um clique à documentação do Astro, ao repositório do GitHub e ao servidor do Discord.
Esse aplicativo também inclui um botão “Copy debug info” (Copiar informações de depuração) que executará o comando astro info
e copiará a saída para sua área de transferência. Isso pode ser útil para solicitar ajuda ou relatar problemas.
Inspect
Seção intitulada InspectO aplicativo Inspect (Inspecionar) fornece informações sobre todas as ilhas na página atual. Isso mostrará as propriedades passadas para cada ilha e a diretiva de cliente que está sendo usada para renderizá-las.
O aplicativo Audit (Auditoria) executa automaticamente uma série de auditorias na página atual, verificando os problemas mais comuns de performance e acessibilidade. Quando um problema for encontrado, um ponto vermelho aparecerá na barra de ferramentas. Ao clicar no aplicativo, uma lista de resultados da auditoria será exibida e os elementos relacionados serão destacados diretamente na página.
As auditorias básicas de performance e acessibilidade realizadas pela barra de ferramentas de desenvolvimento não substituem ferramentas dedicadas como Pa11y ou Lighthouse ou, melhor ainda, humanos!
A barra de ferramentas de desenvolvimento tem como objetivo oferecer uma maneira rápida e fácil de detectar problemas comuns durante o desenvolvimento, sem a necessidade de trocar de contexto para uma ferramenta diferente.
Settings
Seção intitulada SettingsO aplicativo Settings (Configurações) permite configurar opções para a barra de ferramentas de desenvolvimento, como log detalhado, desativar as notificações e ajustar seu posicionamento na tela.
Estendendo a barra de ferramentas de desenvolvimento
Seção intitulada Estendendo a barra de ferramentas de desenvolvimentoAs integrações do Astro podem adicionar novos aplicativos à barra de ferramentas de desenvolvimento, permitindo que você a estenda com ferramentas personalizadas específicas para o seu projeto. Você pode encontrar mais aplicativos de ferramentas de desenvolvimento para instalar no diretório de integrações ou usando o Menu Astro.
Instale integrações adicionais de aplicativos da barra de ferramentas de desenvolvimento em seu projeto, como qualquer outra integração do Astro, de acordo com suas próprias instruções de instalação.
Desativando a barra de ferramentas de desenvolvimento
Seção intitulada Desativando a barra de ferramentas de desenvolvimentoA barra de ferramentas de desenvolvimento é ativada por padrão em todos os sites. Você pode optar por desativá-la para projetos e/ou usuários individuais, conforme necessário.
Por projeto
Seção intitulada Por projetoPara desativar a barra de ferramentas de desenvolvimento para todos que estiverem trabalhando em um projeto, use devToolbar: false
no arquivo de configuração do Astro.
Para ativar a barra de ferramentas de desenvolvimento novamente, remova essas linhas de sua configuração ou use enabled:true
.
Por usuário
Seção intitulada Por usuárioPara desativar a barra de ferramentas de desenvolvimento somente para você em um projeto específico, execute o comando astro preferences
.
Para desativar a barra de ferramentas de desenvolvimento em todos os projetos do Astro para um usuário na máquina atual, adicione a flag --global
ao executar astro-preferences
:
A barra de ferramentas de desenvolvimento pode ser ativada posteriormente com:
Learn