Barra de herramientas de desarrollo

Mientras el servidor de desarrollo está en ejecución, Astro incluye una barra de herramientas de desarrollo en la parte inferior de cada página en tu vista previa local del navegador.

Esta barra de herramientas incluye una serie de herramientas útiles para depurar e inspeccionar tu sitio durante el desarrollo y se puede extender con más aplicaciones de la barra de herramientas de desarrollo que se encuentran en el directorio de integraciones. ¡Incluso puedes construir tus propias aplicaciones de barra de herramientas utilizando la API de la barra de herramientas de desarrollo!

Esta barra de herramientas está habilitada de forma predeterminada y aparece cuando pasas el cursor por la parte inferior de la página. Es una herramienta de desarrollo solamente y no aparecerá en tu sitio publicado.

Aplicaciones integradas

La aplicación de Astro Menu proporciona un acceso fácil a varios datos sobre el proyecto actual y enlaces a recursos adicionales. En particular, proporciona acceso con un solo clic a la documentación de Astro, al repositorio de GitHub y al servidor de Discord.

Esta aplicación también incluye un botón “Copy debug info” que ejecutará el comando astro info y copiará la salida al portapapeles. Esto puede ser útil al solicitar ayuda o informar problemas.

Inspect

La aplicación Inspect proporciona información sobre cualquier isla en la página actual. Esto te mostrará las propiedades pasadas a cada isla y la directiva del cliente que se está utilizando para renderizarlas.

Audit

La aplicación Audit ejecuta automáticamente una serie de auditorías en la página actual, comprobando los problemas de rendimiento y accesibilidad más comunes. Cuando se encuentra un problema, aparecerá un punto rojo en la barra de herramientas. Al hacer clic en la aplicación, se mostrará una lista de resultados de la auditoría y se resaltarán los elementos relacionados directamente en la página.

Settings

La aplicación Settings te permite configurar opciones para la barra de herramientas de desarrollo, como el registro detallado, deshabilitar notifaciones y ajustar su ubicación en tu pantalla.

Extendiendo la barra de herramientas de desarrollo

Las integraciones de Astro pueden agregar nuevas aplicaciones a la barra de herramientas de desarrollo, lo que te permite extenderla con herramientas personalizadas específicas para tu proyecto. Puedes encontrar más aplicaciones de herramientas de desarrollo para instalar en el directorio de integraciones o utilizando el Menú de Astro.

Instala aplicaciones adicionales de la barra de herramientas de desarrollo en tu proyecto de la misma manera que cualquier otra integración de Astro según sus propias instrucciones de instalación.

Receta relacionada: Crear aplicaciones de barra de herramientas para desarrollo

Deshabilitar la barra de herramientas de desarrollo

La barra de herramientas de desarrollo está habilitada de forma predeterminada para todos los sitios. Puedes elegir deshabilitarla para proyectos y/o usuarios individuales según sea necesario.

Por proyecto

Para deshabilitar la barra de herramientas de desarrollo para todos los que trabajan en un proyecto, establece devToolbar: false en el archivo de configuración de Astro.

import { defineConfig } from "astro/config";

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

Para habilitar la barra de herramientas de desarrollo nuevamente, elimina estas líneas de tu configuración o establece enabled:true.

Por usuario

Para deshabilitar la barra de herramientas de desarrollo para ti mismo en un proyecto específico, ejecuta el comando astro preferences.

astro preferences disable devToolbar

Para deshabilitar la barra de herramientas de desarrollo en todos los proyectos de Astro para un usuario en la máquina actual, agrega la bandera --global al ejecutar astro-preferences:

astro preferences disable --global devToolbar

La barra de herramientas de desarrollo se puede habilitar más tarde con:

astro preferences enable devToolbar

Contribuir

Comunidad