Experimental Chrome DevTools workspace

Type: boolean
Default: false

Aggiunto in: astro@5.13.0 Nuovo

Enables experimental Chrome DevTools workspace integration for the Astro dev server.

This feature allows you to edit files directly in Chrome DevTools and have those changes reflected in your local file system via a connected workspace folder. This is useful for applying edits such as adjusting CSS values without leaving your browser tab.

With this feature enabled, running astro dev will automatically configure a Chrome DevTools workspace for your project. Your project will then appear as an available workspace source that you can connect. Then, changes that you make in the “Sources” panel are automatically saved to your project source code.

To enable this feature, add the experimental flag chromeDevtoolsWorkspace to your Astro config:

astro.config.mjs

import { defineConfig } from 'astro/config';

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

Connecting your project

Astro will create the necessary configuration file to support Chrome DevTools workspaces. However, your project must also be connected as a source to enable file saving.

1. Start the Astro dev server with the appropriate CLI command for your package manager.

2. Navigate to your site preview (e.g. http://localhost:4321/) in Chrome and open DevTools.

3. Under the Sources > Workspaces tab, you will find your Astro project folder. Click Connect to add your directory as a workspace.

See the Chrome DevTools workspace documentation for more information.