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 la vista previa de tu navegador local.

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 para la barra de herramientas de desarrollo que encontrarás en el directorio de integraciones. ¡Incluso puedes construir tus propias aplicaciones para la barra de herramientas usando la API de la barra de herramientas de desarrollo!

Esta barra de herramientas está habilitada por defecto y aparece al pasar el cursor sobre la parte inferior de la página. Es únicamente una herramienta de desarrollo y no aparecerá en tu sitio publicado.

Aplicaciones integradas

La aplicación Menú de Astro proporciona un acceso sencillo a diversa información sobre el proyecto actual y enlaces a recursos adicionales. En particular, proporciona acceso con un solo clic a la documentación de Astro, el repositorio de GitHub y el servidor de Discord.

Esta aplicación también incluye un botón “Copiar información de depuración” que ejecutará el comando astro info y copiará la salida en tu portapapeles. Esto puede ser útil al pedir ayuda o reportar problemas.

Inspeccionar

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

Auditoría

La aplicación Auditoría ejecuta automáticamente una serie de auditorías en la página actual, buscando los problemas más comunes de rendimiento y accesibilidad. 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.

Ajustes

La aplicación Ajustes te permite configurar opciones para la barra de herramientas de desarrollo, tales como un registro detallado, desactivar notificaciones y ajustar su ubicación en tu pantalla.

Las integraciones de Astro pueden añadir 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 usando el Menú de Astro.

Instala integraciones de aplicaciones adicionales para la barra de herramientas de desarrollo en tu proyecto al igual que cualquier otra integración de Astro de acuerdo con sus propias instrucciones de instalación.

La barra de herramientas de desarrollo está habilitada por defecto para cada sitio. Puedes optar por desactivarla para proyectos y/o usuarios individuales según sea necesario.

Por proyecto

To disable the dev toolbar for everyone working on a project, set devToolbar: false in the Astro config file.

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 desactivar la barra de herramientas de desarrollo para ti mismo en un proyecto específico, ejecuta el comando astro preferences.

astro preferences disable devToolbar

Para desactivar la barra de herramientas de desarrollo en todos los proyectos de Astro para un usuario en la máquina actual, añade 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 Patrocinar