Barra de herramientas de desarrollo

Mientras el servidor de desarrollo está en funcionamiento, Astro muestra una barra de herramientas de desarrollo en la parte inferior de cada página de la vista previa de tu navegador local.

Esta barra de herramientas incluye varias herramientas útiles para depurar e inspeccionar tu sitio web durante el desarrollo y se puede ampliar con más aplicaciones de la barra de herramientas de desarrollo que se encuentran en el directorio de integraciones. ¡Incluso puedes crear tus propias aplicaciones para la barra de herramientas utilizando la API de la barra de herramientas de desarrollo (EN)!

Esta barra de herramientas está activada por defecto y aparece al pasar el cursor por la parte inferior de la página. Se trata de una herramienta de desarrollo y no aparecerá en tu sitio web publicado.

Aplicaciones integradas

Menú Astro

La aplicación “Astro Menu” permite acceder fácilmente a diversa información sobre el proyecto actual y ofrece enlaces a recursos adicionales. En particular, permite acceder 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” (Copiar información de depuración) que ejecuta el comando astro info (EN) y copia el resultado en el portapapeles. Esto puede resultar útil a la hora de pedir ayuda o informar de problemas.

Inspeccionar

La aplicación “Inspect” proporciona información sobre las islas de la página actual. Te mostrará las propiedades que se pasan a cada isla y la directiva de cliente que se utiliza para renderizarlas.

Auditoría

La aplicación “Audit” realiza automáticamente una serie de auditorías en la página actual, comprobando los problemas más habituales relacionados con el rendimiento y la accesibilidad. Cuando se detecta un problema, aparece un punto rojo en la barra de herramientas. Al hacer clic en la aplicación, se abre una ventana emergente con la lista de resultados de la auditoría y se resaltan los elementos relacionados directamente en la página.

Configuración

La aplicación “Ajustes” te permite configurar opciones de la barra de herramientas de desarrollo, como el registro detallado, la desactivación de notificaciones y el ajuste de su ubicación en tu pantalla.

Extender la barra de herramientas de desarrollo

Las integraciones Astro permiten 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 mediante el menú de Astro.

Instala integraciones adicionales de la barra de herramientas para desarrolladores en tu proyecto, igual que cualquier otra integración de Astro (EN), siguiendo 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á activada por defecto en todos los sitios web. Puedes desactivarla para proyectos concretos y/o usuarios, según sea necesario.

Por proyecto

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

import { defineConfig } from 'astro/config';

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

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

Por usuario

Para inhabilitar la barra de herramientas de desarrollo en un proyecto concreto, ejecuta el comando astro preferences (EN).

astro preferences disable devToolbar

Para inhabilitar la barra de herramientas de desarrollo en todos los proyectos Astro de un usuario en el equipo actual, añade el parámetro --global al ejecutar astro-preferences:

astro preferences disable --global devToolbar

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

astro preferences enable devToolbar

Contribuir Comunidad Patrocinador