Espace de travail expérimental dans Chrome DevTools

Type : boolean
Par défaut : false

Ajouté à la version : astro@5.13.0 Nouveau

Active l’intégration expérimentale d’un espace de travail dans Chrome DevTools pour le serveur de développement Astro.

Cette fonctionnalité vous permet de modifier des fichiers directement dans Chrome DevTools et de répercuter ces modifications dans votre système de fichiers local via un dossier d’espace de travail connecté. Ceci est utile pour appliquer des modifications, comme l’ajustement des valeurs CSS, sans quitter l’onglet de votre navigateur.

Avec cette fonctionnalité activée, l’exécution de astro dev configurera automatiquement un espace de travail dans Chrome DevTools pour votre projet. Ce dernier apparaîtra alors comme une source d’espace de travail disponible à laquelle vous pouvez vous connecter. Les modifications apportées dans le panneau « Sources » seront alors automatiquement enregistrées dans le code source de votre projet.

Pour activer cette fonctionnalité, ajoutez l’option expérimentale chromeDevtoolsWorkspace à votre configuration Astro :

astro.config.mjs

import { defineConfig } from 'astro/config';

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

Connecter votre projet

Astro créera le fichier de configuration nécessaire à la prise en charge des espaces de travail dans Chrome DevTools. Cependant, votre projet doit également être connecté en tant que source pour permettre l’enregistrement des fichiers.

1. Démarrez le serveur de développement d’Astro avec la commande CLI appropriée pour votre gestionnaire de paquets.

2. Accédez à l’aperçu de votre site (par exemple http://localhost:4321/) dans Chrome et ouvrez DevTools.

3. Sous l’onglet Sources > Espace de travail, vous trouverez le dossier de votre projet Astro. Cliquez sur Connecter pour ajouter votre répertoire comme espace de travail.

Consultez la documentation des espaces de travail dans Chrome DevTools pour plus d’informations.