实验性 Chrome DevTools 工作区

类型：boolean
默认：false

¥Type: boolean
Default: false

Added in: astro@5.13.0

为 Astro 开发服务器启用实验性 Chrome DevTools 工作区集成。

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

此功能允许你直接在 Chrome 开发者工具中编辑文件，并通过连接的工作区文件夹将这些更改反映到本地文件系统中。这对于在不离开浏览器标签页的情况下应用编辑（例如调整 CSS 值）非常有用。

¥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.

启用此功能后，运行 astro dev 将自动为你的项目配置 Chrome DevTools 工作区。之后，你的项目将显示为可用的 可连接的工作区源。然后，你在 “源代码” 面板中所做的更改会自动保存到你的项目源代码中。

¥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.

要启用此功能，请将实验性标志 chromeDevtoolsWorkspace 添加到 Astro 配置中：

¥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 将创建必要的配置文件以支持 Chrome DevTools 工作区。但是，你的项目也必须包含 连接为数据源 才能启用文件保存功能。

¥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.

请参阅 Chrome DevTools 工作区文档 了解更多信息。

¥See the Chrome DevTools workspace documentation for more information.