Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 87 additions & 0 deletions src/content/docs/es/guides/dev-toolbar.mdx
Original file line number Diff line number Diff line change
@@ -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 "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

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.

<RecipeLinks slugs={["es/recipes/making-toolbar-apps"]} />

## 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
```
Loading