Entwicklungswerkzeugleiste

Während der Entwicklungsserver läuft, enthält Astro eine Entwicklungs­symbolleiste am unteren Rand jeder Seite in deiner lokalen Browser-Vorschau.

Diese Werkzeugleiste enthält eine Reihe nützlicher Tools zum Debuggen und Überprüfen deiner Website während der Entwicklung und kann mit weiteren Entwicklungs­werkzeugleiste-Apps erweitert werden, die du im Verzeichnis integrations findest. Mit der Entwicklungs­werkzeugleiste-API (EN) kannst du sogar eigene Toolbar-Anwendungen (EN) erstellen!

Diese Symbolleiste ist standardmäßig aktiviert und wird angezeigt, wenn du mit dem Mauszeiger über den unteren Rand der Seite fährst. Sie ist nur für die Entwicklung gedacht und wird nicht auf deiner veröffentlichten Seite angezeigt.

Eingebaute Apps

Abschnitt betitelt Eingebaute Apps

Astro Menü

Abschnitt betitelt Astro Menü

Die Astro-Menü-App bietet einfachen Zugang zu verschiedenen Informationen über das aktuelle Projekt und Links zu zusätzlichen Ressourcen. Vor allem bietet sie mit einem Klick Zugang zur Astro-Dokumentation, zum GitHub-Repository und zum Discord-Server.

Diese App enthält auch eine Schaltfläche „Debug-Infos kopieren“, die den Befehl astro info (EN) ausführt und die Ausgabe in deine Zwischenablage kopiert. Das kann nützlich sein, wenn du um Hilfe bittest oder Probleme meldest.

Untersuchung

Abschnitt betitelt Untersuchung

Die App Inspect liefert Informationen über alle Inseln auf der aktuellen Seite. Sie zeigt dir die Eigenschaften, die an jede Insel übergeben wurden, und die Client-Direktive, mit der sie gerendert wird.

Audit

Abschnitt betitelt Audit

Die Audit-App führt automatisch eine Reihe von Audits auf der aktuellen Seite durch, um die häufigsten Leistungs- und Zugänglichkeits­probleme zu erkennen. Wenn ein Problem gefunden wird, erscheint ein roter Punkt in der Werkzeugleiste. Wenn du auf die App klickst, wird eine Liste mit den Ergebnissen des Audits angezeigt und die entsprechenden Elemente werden direkt auf der Seite markiert.

Hinweis

Die grundlegenden Leistungs- und Zugänglichkeits­prüfungen, die von der Entwicklungs­werkzeugleiste durchgeführt werden, sind kein Ersatz für spezielle Tools wie Pa11y oder Lighthouse, oder noch besser: für Menschen!

Die Entwicklungs­werkzeugleiste soll eine schnelle und einfache Möglichkeit bieten, häufige Probleme während der Entwicklung zu erkennen, ohne zu einem anderen Tool wechseln zu müssen.

Einstellungen

Abschnitt betitelt Einstellungen

In der App „Einstellungen“ kannst du Optionen für die Entwicklungsleiste konfigurieren, wie z. B. die ausführliche Protokollierung, die Deaktivierung von Benachrichtigungen und die Anpassung ihrer Platzierung auf deinem Bildschirm.

Erweitern der Entwicklungs­werkzeugleiste

Abschnitt betitelt Erweitern der Entwicklungs­werkzeugleiste

Mit den Astro-Integrationen kannst du neue Apps zur Entwicklungs­werkzeugleiste hinzufügen und sie so um benutzerdefinierte Werkzeuge erweitern, die speziell auf dein Projekt zugeschnitten sind. Du findest weitere Entwicklungswerkzeug-Apps, die du im Verzeichnis der Integrationen installieren kannst oder über das Astro-Menü.

Installiere zusätzliche Entwicklungs­werkzeugleiste-App-Integrationen in deinem Projekt wie jede andere Astro-Integration gemäß der zugehörigen Installationsanleitung.

Verwandte Anleitung: Create a dev toolbar app (EN)

Deaktivieren der Entwicklungs­werkzeugleiste

Abschnitt betitelt Deaktivieren der Entwicklungs­werkzeugleiste

Die Entwicklungs­werkzeugleiste ist standardmäßig für jede Website aktiviert. Du kannst sie bei Bedarf für einzelne Projekte und/oder Nutzer deaktivieren.

Pro Projekt

Abschnitt betitelt Pro Projekt

Um die Entwicklungs­werkzeugleiste für alle, die an einem Projekt arbeiten, zu deaktivieren, setze devToolbar: false in der Astro-Konfigurationsdatei (EN).

astro.config.mjs

import { defineConfig } from "astro/config";

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

Um die Entwicklungs­werkzeugleiste wieder zu aktivieren, entferne diese Zeilen aus deiner Konfiguration oder setze enabled: true.

Pro Benutzer

Abschnitt betitelt Pro Benutzer

Um die Entwicklungs­werkzeugleiste für ein bestimmtes Projekt zu deaktivieren, führe den Befehl astro preferences (EN) aus.

astro preferences disable devToolbar

Um die Entwicklungs­werkzeugleiste in allen Astro-Projekten eines Benutzers auf dem aktuellen Rechner zu deaktivieren, füge das --global Flag hinzu, wenn du astro-preferences ausführst:

astro preferences disable --global devToolbar

Die Entwicklungs­werkzeugleiste kann später mit aktiviert werden:

astro preferences enable devToolbar