Chrome DevTools workspace experimental

Type: boolean
Default: false

Añadido en: astro@5.13.0

Habilita la integración experimental de Chrome DevTools workspace para el dev server de Astro.

Esta funcionalidad te permite editar archivos directamente en Chrome DevTools y que esos cambios se reflejen en tu sistema de archivos local vía una carpeta workspace conectada. Esto es útil para aplicar ediciones como ajustar valores CSS sin salir de tu pestaña del navegador.

Con esta funcionalidad habilitada, ejecutar astro dev configurará automáticamente un Chrome DevTools workspace para tu proyecto. Tu proyecto aparecerá entonces como una fuente workspace a la que puedes conectar. Luego, los cambios que hagas en el panel “Sources” se guardan automáticamente en el código fuente de tu proyecto.

Para habilitar esta funcionalidad, añade la flag experimental chromeDevtoolsWorkspace a tu configuración de Astro:

astro.config.mjs

import { defineConfig } from 'astro/config';

export default defineConfig({
  experimental: {
    chromeDevtoolsWorkspace: true,
  },
});

Conectando tu proyecto

Astro creará el archivo de configuración necesario para soportar Chrome DevTools workspaces. Sin embargo, tu proyecto también debe ser conectado como fuente para habilitar el guardado de archivos.

1. Inicia el dev server de Astro con el comando CLI apropiado para tu package manager.

2. Navega a la vista previa de tu sitio (ej. http://localhost:4321/) en Chrome y abre DevTools.

3. Bajo la pestaña Sources > Workspaces, encontrarás la carpeta de tu proyecto de Astro. Haz clic en Connect para añadir tu directorio como workspace.

Consulta la documentación de Chrome DevTools workspace para más información.