Add Chrome DevTools workspace flag (#12108)

Co-authored-by: Sarah Rainsberger <[email protected]>
Co-authored-by: Sebastian Beltran <[email protected]>
Co-authored-by: yanthomasdev <[email protected]>

Author: 4 people

astro.sidebar.ts

@@ -150,6 +150,7 @@ export const sidebar = [
 					'reference/experimental-flags/preserve-scripts-order',
 					'reference/experimental-flags/heading-id-compat',
 					'reference/experimental-flags/raw-env-values',
+					'reference/experimental-flags/chrome-devtools-workspace',
 				],
 			}),
 			'reference/legacy-flags',

src/content/docs/en/reference/experimental-flags/chrome-devtools-workspace.mdx

@@ -0,0 +1,51 @@
+---
+title: Experimental Chrome DevTools workspace
+sidebar:
+  label: Chrome DevTools workspace
+i18nReady: true
+---
+
+import Since from '~/components/Since.astro';
+import { Steps } from '@astrojs/starlight/components';
+
+
+<p>
+
+**Type:** `boolean`<br />
+**Default:** `false`<br />
+<Since v="5.13.0" />
+</p>
+
+Enables experimental [Chrome DevTools workspace integration](https://developer.chrome.com/docs/devtools/workspaces) 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](#connecting-your-project). 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:
+
+```js title="astro.config.mjs" ins={4-6}
+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](https://developer.chrome.com/docs/devtools/workspaces#manual-connection) to enable file saving.
+
+<Steps>
+
+1. [Start the Astro dev server](/en/develop-and-build/#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.
+
+</Steps>
+
+See the [Chrome DevTools workspace documentation](https://developer.chrome.com/docs/devtools/workspaces#connect) for more information.