From fb3f413f0a94535cf85b05946e3d87255c3cd6e9 Mon Sep 17 00:00:00 2001 From: Marcos Corrochano Arroyo Date: Sun, 12 Jul 2026 13:27:10 +0200 Subject: [PATCH 1/2] create dev-toolbar.mdx --- src/content/docs/es/guides/dev-toolbar.mdx | 87 ++++++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 src/content/docs/es/guides/dev-toolbar.mdx diff --git a/src/content/docs/es/guides/dev-toolbar.mdx b/src/content/docs/es/guides/dev-toolbar.mdx new file mode 100644 index 0000000000000..c0e03d090ddc2 --- /dev/null +++ b/src/content/docs/es/guides/dev-toolbar.mdx @@ -0,0 +1,87 @@ +--- +title: Barra de herramientas de desarrollo +description: Una guía para usar la barra de herramientas de desarrollo en Astro +i18nReady: true +--- + +import RecipeLinks from '~/components/RecipeLinks.astro'; + +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](#extender-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](/es/recipes/making-toolbar-apps/) utilizando la [API de la barra de herramientas de desarrollo](/es/reference/dev-toolbar-app-reference/)! + +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 «Copiar información de depuración» que ejecuta el comando [`astro info`](/es/reference/cli-reference/#astro-info) 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](/es/concepts/islands/) 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. + +:::note +Las auditorías básicas de rendimiento y accesibilidad que realiza la barra de herramientas de desarrollo no sustituyen a herramientas específicas como [Pa11y](https://pa11y.org/) o [Lighthouse](https://developers.google.com/web/tools/lighthouse), ¡ni mucho menos a las personas! + +La barra de herramientas para desarrolladores tiene como objetivo ofrecer una forma rápida y sencilla de detectar problemas habituales durante el desarrollo, sin necesidad de cambiar de herramienta. +::: + +### 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](https://astro.build/integrations/?search=&categories%5B%5D=toolbar) o mediante el [menú de Astro](#menú-astro). + +Instala integraciones adicionales de la barra de herramientas para desarrolladores en tu proyecto, igual que cualquier otra [integración de Astro](/es/guides/integrations/), siguiendo sus propias instrucciones de instalación. + + + +## 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](/es/reference/configuration-reference/#devtoolbarenabled). + +```js title="astro.config.mjs" ins={4-6} +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`](/es/reference/cli-reference/#astro-preferences). + +```shell +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`: + +```shell +astro preferences disable --global devToolbar +``` + +La barra de herramientas de desarrollo se puede habilitar más adelante con: + +```shell +astro preferences enable devToolbar +``` From fe3ad4e4693ac333bfbd6bc1c78ac90319997de3 Mon Sep 17 00:00:00 2001 From: Marcos Corrochano Arroyo Date: Sun, 12 Jul 2026 13:31:37 +0200 Subject: [PATCH 2/2] fix button reference text --- src/content/docs/es/guides/dev-toolbar.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/es/guides/dev-toolbar.mdx b/src/content/docs/es/guides/dev-toolbar.mdx index c0e03d090ddc2..ad8bd6c3d7469 100644 --- a/src/content/docs/es/guides/dev-toolbar.mdx +++ b/src/content/docs/es/guides/dev-toolbar.mdx @@ -18,7 +18,7 @@ Esta barra de herramientas está activada por defecto y aparece al pasar el curs 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 «Copiar información de depuración» que ejecuta el comando [`astro info`](/es/reference/cli-reference/#astro-info) y copia el resultado en el portapapeles. Esto puede resultar útil a la hora de pedir ayuda o informar de problemas. +Esta aplicación también incluye un botón "Copy debug info" (Copiar información de depuración) que ejecuta el comando [`astro info`](/es/reference/cli-reference/#astro-info) y copia el resultado en el portapapeles. Esto puede resultar útil a la hora de pedir ayuda o informar de problemas. ### Inspeccionar