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

Titre de la section Applications intégrées

Astro Menu

Titre de la section Astro Menu

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

Titre de la section 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

Titre de la section 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.

Note

Les vérifications de base des performances et de l’accessibilité effectuées par la barre d’outils de développement ne remplacent pas des outils spécialisés tels que Pa11y ou Lighthouse, ou mieux encore, des êtres humains !

La barre d’outils de développement vise à fournir un moyen rapide et facile de détecter les problèmes courants pendant le développement, sans avoir besoin de basculer vers un autre outil.

Settings

Titre de la section 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

Titre de la section 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 : Create a dev toolbar app (EN)

Désactivation de la barre d’outils dev

Titre de la section 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

Titre de la section 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.

astro.config.mjs

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

Titre de la section 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