import RecipeLinks from "~/components/RecipeLinks.astro";

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

Menu Astro

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.

:::note 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

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.

<RecipeLinks slugs={["pt-br/recipes/making-toolbar-apps"]} />

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