Pasek narzędzi deweloperskich

Gdy serwer deweloperski Astro jest uruchomiony, na dole każdej strony w lokalnym podglądzie przeglądarki pojawia się pasek narzędzi.

Pasek ten zawiera szereg przydatnych narzędzi do debugowania i inspekcji witryny podczas rozwoju, a także może być rozszerzany o dodatkowe aplikacje znajdujące się w katalogu integracji. Możesz nawet stworzyć własne aplikacje (EN) z wykorzystaniem API Dev Toolbar (EN)!

Pasek narzędzi jest domyślnie włączony i pojawia się po najechaniu kursorem na dolną krawędź strony. Jest to wyłącznie narzędzie deweloperskie i nie pojawi się na opublikowanej stronie.

Wbudowane aplikacje

Menu Astro

Aplikacja Menu Astro zapewnia łatwy dostęp do różnych informacji o bieżącym projekcie oraz linków do dodatkowych zasobów. W szczególności zapewnia dostęp jednym kliknięciem do dokumentacji Astro, repozytorium GitHub i serwera Discord.

Ta aplikacja zawiera również przycisk “Kopiuj informacje debugowania”, który uruchomi polecenie astro info (EN) i skopiuje wynik do schowka. Może to być przydatne podczas proszenia o pomoc lub zgłaszania problemów.

Inspektor

Aplikacja Inspektor wyświetla informacje o wszystkich wyspach obecnych na bieżącej stronie. Pokazuje przekazane do nich właściwości oraz dyrektywę klienta, która służy do ich renderowania.

Audyt

Aplikacja Audyt automatycznie uruchamia serię audytów na bieżącej stronie, sprawdzając najczęstsze problemy z wydajnością i dostępnością. Jeśli wykryty zostanie jakiś problem, na pasku narzędzi pojawi się czerwona kropka. Kliknięcie na aplikację wyświetli listę wyników audytu i podświetli powiązane elementy bezpośrednio na stronie.

Notatka

Podstawowe audyty wydajności i dostępności wykonywane przez pasek narzędzi deweloperskich nie zastępują dedykowanych narzędzi takich jak Pa11y czy Lighthouse, a tym bardziej ludzi!

Celem paska narzędzi deweloperskich jest szybkie wychwytywanie typowych problemów podczas pracy nad projektem, bez konieczności przełączania się do innych narzędzi.

Ustawienia

Aplikacja Ustawienia pozwala konfigurować opcje paska narzędzi, takie jak logowanie w trybie verbose, wyłączanie powiadomień czy zmiana jego położenia na ekranie.

Rozszerzanie paska narzędzi deweloperskich

Integracje Astro mogą dodać nowe aplikacje do paska narzędzi deweloperskich, pozwalając na rozszerzenie go o niestandardowe narzędzia specyficzne dla twojego projektu. Możesz znaleźć więcej aplikacji narzędzi deweloperskich do zainstalowania w katalogu integracji lub używając Menu Astro.

Zainstaluj dodatkowe integracje aplikacji paska narzędzi deweloperskich w swoim projekcie tak samo jak każdą inną integrację Astro zgodnie z jej własnymi instrukcjami instalacji.

Powiązany przepis: Create a dev toolbar app (EN)

Wyłączanie paska narzędzi deweloperskich

Pasek narzędzi deweloperskich jest domyślnie włączony dla każdej witryny. Można go jednak wyłączyć dla poszczególnych projektów lub użytkowników w razie potrzeby.

Dla całego projektu

Aby wyłączyć pasek narzędzi deweloperskich dla wszystkich pracujących nad projektem, ustaw devToolbar: false w pliku konfiguracyjnym Astro (EN).

astro.config.mjs

import { defineConfig } from "astro/config";

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

Aby ponownie włączyć pasek narzędzi deweloperskich, usuń te linie z konfiguracji lub ustaw enabled: true.

Dla pojedynczego użytkownika

Aby wyłączyć pasek narzędzi tylko dla siebie w konkretnym projekcie, uruchom polecenie astro preferences (EN):

astro preferences disable devToolbar

Aby wyłączyć pasek narzędzi deweloperskich we wszystkich projektach Astro dla użytkownika na danej maszynie, dodaj flagę --global podczas uruchamiania astro-preferences:

astro preferences disable --global devToolbar

Pasek narzędzi deweloperskich może być później ponownie włączony za pomocą:

astro preferences enable devToolbar