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 (EN)!

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

O 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

O 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.

Audit

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.

Settings

O 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

As 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.

Receita relacionada: Crie um aplicativo da barra de ferramentas de desenvolvimento

Desativando a barra de ferramentas de desenvolvimento

A 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

Para 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.

import { defineConfig } from "astro/config";

export default defineConfig({
  devToolbar: {
    enabled: false
  }
})

Para ativar a barra de ferramentas de desenvolvimento novamente, remova essas linhas de sua configuração ou use enabled:true.

Por usuário

Para desativar a barra de ferramentas de desenvolvimento somente para você em um projeto específico, execute o comando astro preferences.

astro preferences disable devToolbar

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:

astro preferences disable --global devToolbar

A barra de ferramentas de desenvolvimento pode ser ativada posteriormente com:

astro preferences enable devToolbar

Contribua

Comunidade