Barre d'outils de développement

Pendant que le serveur de développement fonctionne, Astro inclut une barre d’outils de développement au bas de chaque page dans l’aperçu de votre navigateur local.

Cette barre d’outils comprend un certain nombre d’outils utiles pour le débogage et l’inspection de votre site pendant le développement et peut-être amélioré avec d’autres applications de la barre d’outils de développement trouvée dans le répertoire des intégrations. Vous pouvez même créer vos propres applications pour la barre d’outil en utilisant l’API de la barre d’outils de développement !

Cette barre d’outils est activée par défaut et apparaît lorsque vous survolez le bas de la page. Il s’agit d’un outil de développement uniquement, qui n’apparaîtra pas sur votre site publié.

Applications intégrées

L’application Astro Menu permet d’accéder facilement à diverses informations sur le projet en cours et à des liens vers des ressources supplémentaires. Elle permet notamment d’accéder en un clic à la documentation, au dépôt GitHub et au serveur Discord d’Astro.

Cette application comprend également un bouton “Copier les informations de débogage” qui lancera la commande astro info et copiera la sortie dans votre presse-papiers. Cela peut être utile pour demander de l’aide ou signaler des problèmes.

Inspect

L’application Inspect fournit des informations sur toutes les îles de la page en cours. Elle vous montrera les propriétés transmises à chaque île, ainsi que la directive client utilisée pour les afficher.

Audit

L’application Audit execute automatiquement une série d’audits sur la page en cours, en recherchant les problèmes de performance et d’accessibilité les plus courants. Lorsqu’un problème est détecté, un point rouge apparaît dans la barre d’outils. En cliquant sur l’application, une liste des résultats de l’audit s’affiche et les éléments concernés sont mis en évidence directement dans la page.

Settings

L’application Settings vous permet de configurer les options de la barre d’outils de développement, telles que la journalisation verbeuse, la désactivation des notifications et l’ajustement de son emplacement sur l’écran.

Améliorer la barre d’outils de développement

Les intégrations Astro peuvent ajouter de nouvelles applications à la barre d’outils de développement, vous permettant de l’étendre avec des outils personnalisés qui sont spécifiques à votre projet. Vous pouvez trouver plus d’applications de développement à installer dans le répertoire des intégrations ou en utilisant le [Menu Astro] (#astro-menu).

Installez les intégrations supplémentaires de la barre d’outils de développement dans votre projet comme n’importe quelle autre intégration Astro en suivant ses propres instructions d’installation.

Méthode associée : Créer une application pour la barre d'outils de développement

Désactivation de la barre d’outils dev

La barre d’outils de développement est activée par défaut pour chaque site. Vous pouvez choisir de la désactiver pour des projets et/ou des utilisateurs individuels si nécessaire.

Par projet

Pour désactiver la barre d’outils de développement pour tous ceux qui travaillent sur un projet, définissez devToolbar : false dans le fichier de configuration Astro.

import { defineConfig } from "astro/config";

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

Pour réactiver la barre d’outils de développement, supprimez ces lignes de votre configuration, ou mettez enabled:true.

Par utilisateur

Pour désactiver la barre d’outils de développement pour vous-même sur un projet spécifique, lancez la commande astro preferences.

astro preferences disable devToolbar

Pour désactiver la barre d’outils dev dans tous les projets Astro pour un utilisateur sur la machine courante, ajoutez le drapeau --global lors de l’exécution de astro-preferences :

astro preferences disable --global devToolbar

La barre d’outils de développement peut ensuite être activée avec :

astro preferences enable devToolbar

Contribuer

Communauté