前面几章，我们花了很多时间学习在 Sources 面板中编辑 CSS 和 JavaScript。那种“改完即生效”的体验确实很爽——改颜色、调间距、修逻辑，所有改动瞬间反映在页面上，不需要保存、不需要刷新。

但你肯定也注意到了一个问题：刷新页面之后，所有修改都消失了。

你在 Sources 面板里辛辛苦苦调的样式、改的逻辑，一个 F5 就全没了。因为你改的是浏览器内存中的代码副本，而不是你硬盘上的源文件。

这个限制让 Sources 面板的编辑功能更像是一个“临时试验场”——用来快速验证想法，但验证完之后，你还得手动把改动同步到代码编辑器里。如果改动的代码比较多，这个过程还是挺麻烦的。

有没有办法让 Sources 面板中的修改自动保存到本地源文件中？有！

答案就是：Workspace（工作区）。

Workspace 是 Chrome DevTools 中一项强大的功能，它会把浏览器加载的网络资源和你电脑本地文件夹中的源文件建立起映射关系。一旦映射建立起来，你在 Sources 面板中对 CSS、HTML 或 JavaScript 所做的修改，都将在保存后自动同步至本地源文件中。

换句话说，Workspace 让 DevTools 从一个"临时试验场"变成了一个"真正的代码编辑器"——你可以在浏览器中直接编辑代码，保存后，所有修改将实时同步至本地磁盘。

这一章，我们来学习 Workspace 的完整用法：它是什么、怎么配置、怎么使用，以及在使用过程中需要注意些什么。

小提示：Workspace 的配置涉及本地文件夹和权限，操作时需要稍微小心一些。建议你跟着文章一步步操作，在自己的项目中实际配置一次。

一、Workspace 是什么？

简单来说，Workspace 就是把浏览器里的代码和你的本地文件‘连’起来，在 DevTools 里改完代码，本地文件也会跟着变。

它解决了什么问题？

想象一下这个场景：你在调试一个页面的样式，在 Sources 面板中调整了十几个 CSS 属性，终于把布局调到了理想状态。但现在，你需要把这些改动手动复制到代码编辑器里，保存，提交。如果改动的代码很多，这个过程既繁琐又容易遗漏。

Workspace 把这个流程简化了：你在 Sources 面板中修改 CSS 后，按下 Ctrl/Cmd + S 进行保存，改动便会直接写入到本地源文件中。再也不用在工具间来回切换进行复制粘贴了。

它的核心原理是什么？

Workspace 的核心原理是映射（Mapping）——将浏览器加载的网络资源和你电脑本地文件夹中的源文件建立起映射关系。

映射建立之后，当你打开 Sources 面板中的某个文件并修改它时，DevTools 就会知道这个文件对应本地硬盘上的哪个文件。在按下 Ctrl/Cmd + S 进行保存后，改动会同时应用到两个地方：

  1. 浏览器内存中的代码副本（页面上的效果立即更新）。

  2. 本地硬盘上的源文件（改动被持久化保存）。

Workspace 能保存哪些文件的修改？

Workspace 支持保存 CSS、HTML 和 JavaScript 等文件的修改。

不过有一个重要的限制：Workspace 不会保存你在 Elements 面板中对 DOM 所做的更改。因为 Elements 面板中看到的是浏览器渲染后的 DOM 树，它和原始的 HTML 文件并不是一一对应的关系——JavaScript 可能会动态修改 DOM，CSS 也可能通过 content 属性改变内容。所以，对 DOM 的修改需要在 Sources 面板中编辑对应的 HTML 或 JavaScript 源文件。

小建议：记住这个原则—— 在 Sources 面板中改文件，Workspace 能帮你保存；在 Elements 面板中改 DOM，Workspace 帮不了你。

二、Workspace 的两种配置方式

Workspace 提供了两种配置方式：手动连接和自动连接。

方式一：手动连接

手动连接是最直接的方式——你告诉 DevTools “我的项目文件在这个文件夹里”，DevTools 就会自动建立映射。

操作步骤：

第一步：打开本地网页

在 Chrome 中打开一个由本地服务器提供的网页（比如 http://localhost:3000）。

第二步：打开 DevTools 并进入 Sources 面板

按 F12 打开 DevTools，切换到 Sources 面板。

第三步：找到 Workspace 标签页

在 Sources 面板左侧的文件导航区中，你会看到 Page、Snippets 等标签。找到并点击 Workspace 标签页。

第四步：添加文件夹

在 Workspace 标签页下方的空白处右键点击，选择 Add folder to workspace；或直接点击 Workspace 标签页下方的 Manually add folder 按钮。

系统会弹出一个文件夹选择对话框。

第五步：选择项目文件夹

在对话框中选择你本地项目包含源文件的根目录（比如你的项目文件夹），点击“选择”或“打开”。

第六步：授权访问

DevTools 会提示“Let DevTools edit files”。点击 Allow，允许 DevTools 编辑该文件夹中的文件。

第七步：确认连接

配置完成后，Workspace 标签页中会显示你添加的文件夹。

小建议：手动连接是最推荐初中级开发者使用的方式——步骤清晰、直观，不需要额外的配置。从“添加文件夹”到“看到绿点”，整个过程不到一分钟。

方式二：自动连接（适合进阶场景）

自动连接是 Workspace 的更高级配置方式。它的原理是：你的本地开发服务器在特定路径提供一个 com.chrome.devtools.json 配置文件，Chrome DevTools 会自动检测并读取这个文件，然后根据文件中的信息自动连接工作区。

json 文件的内容：

// 文件名：com.chrome.devtools.json
{
  "workspace": {
    "root": "/Users/yourname/path/to/your/project",
    "uuid": "a-random-version-4-uuid"
  }
}

  • workspace.root：项目根目录在本地文件系统中的绝对路径。

  • workspace.uuid：项目的唯一标识符（UUID v4），用于区分不同项目。

文件存放位置：

DevTools 会自动向以下地址发送请求：

// 路径，文件名是 Chrome 内部写死的，不可更改。
/.well-known/appspecific/com.chrome.devtools.json

你需要配置本地开发服务器，让它对这个路径返回正确的 json 内容。

自动连接的优势：

  • 无需手动配置：不需要在 DevTools 中手动添加文件夹。

  • 团队协作友好：团队成员 clone 项目后，只要开发服务器配置正确，Workspace 自动生效。

  • 项目切换方便：不同项目有各自的 com.chrome.devtools.json，DevTools 能自动识别。

重要限制：

自动连接仅适用于本地开发环境，且只有通过 localhost 访问时才有效。这是出于安全考虑——防止远程网站通过这个机制访问你电脑上的文件。

小建议：对于初中级开发者， 手动连接已经足够满足日常开发需求。自动连接更适合团队项目或需要频繁切换多个项目的场景。先掌握手动连接，等有需要时再了解自动连接。

自动连接的三种方式

我总结了三种 Workspace 自动连接功能的配置方式，从手动到自动化程度依次递进，请根据项目实际情况灵活选择。

方式一：手动创建配置文件（通用方式）

这是最基础的方式，适用于任何项目，不依赖任何构建工具。

第一步：生成 UUID

你需要一个 UUID v4。在终端中执行以下命令即可生成：

npx --package uuid uuid v4
# 输出示例：53b029bb-c989-4dca-969b-835fecec3786

第二步：创建配置文件

在你的项目根目录下，创建以下目录和文件：

项目根目录/
└── .well-known/
    └── appspecific/
        └── com.chrome.devtools.json

com.chrome.devtools.json 文件的内容如下：

{
  "workspace": {
    "root": "/path/to/your/project",
    "uuid": "你刚刚生成的UUID"
  }
}

第三步：确保本地服务器提供该文件

如果你的项目使用的是 Vite、Webpack 等构建工具，它们默认会提供 ./public 或 ./ 目录下的静态文件。你需要确保 .well-known/appspecific/com.chrome.devtools.json 这个路径能够被访问到。

第四步：在 DevTools 中连接

  1. 在 Chrome 中打开 http://localhost:你的端口。

  2. 打开 DevTools（F12）。

  3. 切换到 Sources（来源） 面板。

  4. 在左侧找到 Workspace（工作区）标签页。

  5. 你会看到项目文件夹旁边出现了一个 “连接（Connect）” 按钮。

  6. 点击 “连接”，在弹出的权限提示中点击 “修改文件（Edit files）” 授予访问权限。

连接成功后，Workspace面板会显示关联文件夹，当前页面加载的文件旁边会出现绿色圆点。

方式二：使用 NPM 工具包自动生成（推荐）

如果你不想手动创建目录和文件，可以使用 devtools-workspace 这个 NPM 包，它会自动完成所有配置。

第一步：安装

npm install --save-dev devtools-workspace

第二步：自动生成配置文件

在项目根目录执行以下命令：

# 自动检测项目类型并创建配置文件
npx devtools-workspace auto

你也可以指定项目根目录：

npx devtools-workspace auto --root ./my-project

如果配置文件已存在，想强制覆盖：

npx devtools-workspace auto --force

第三步：验证配置是否成功

npx devtools-workspace check

如果显示配置文件存在且有效，说明配置成功了。

第四步：在 DevTools 中连接（同方式一的第四步）

方式三：通过构建工具插件自动生成

如果你使用的是 Vite、Webpack 或 Rollup，可以通过对应的插件在构建时自动生成配置文件。

Vite 项目

安装插件：

npm install -D vite-plugin-devtools-json

在 vite.config.js 中配置：

import { defineConfig } from 'vite';
import devtoolsJson from 'vite-plugin-devtools-json';

export default defineConfig({
  plugins: [
    devtoolsJson(),
    // ... 其他插件
  ]
});

Webpack 项目

在 webpack.config.js 中配置：

const WebpackDevtoolsWorkspacePlugin = require('devtools-workspace/webpack-plugin');

module.exports = {
  plugins: [
    new WebpackDevtoolsWorkspacePlugin({
      root: process.cwd(),
      uuid: 'custom-uuid', // 可选，默认自动生成
      force: false
    })
  ]
};

Rollup 项目

import rollupPluginDevtoolsWorkspace from 'devtools-workspace/rollup-plugin';

export default {
  plugins: [
    rollupPluginDevtoolsWorkspace({
      root: process.cwd()
    })
  ]
};

完整演示示例

假设你有一个 Vite 项目，路径为 /projects/my-app。

步骤 1：进入项目目录

cd /Users/alice/projects/my-app

步骤 2：安装 Vite 插件

npm install -D vite-plugin-devtools-json

步骤 3：在 vite.config.js 中添加插件

import { defineConfig } from 'vite';
import devtoolsJson from 'vite-plugin-devtools-json';

export default defineConfig({
  plugins: [devtoolsJson()]
});

步骤 4：启动开发服务器

npm run dev
# 输出：Local: http://localhost:5173

步骤 5：在 Chrome 中打开 http://localhost:5173，按 F12 打开 DevTools。

步骤 6：切换到 Sources → Workspace，点击项目文件夹旁边的 “连接” 按钮。

步骤 7：在弹出的权限提示中点击 “修改文件”。

步骤 8：现在，你在 Sources 面板中修改任何 CSS、HTML 或 JavaScript 文件，按 Ctrl/Cmd + S 保存后，修改会自动写入本地源文件。

重要提醒

  1. 仅限 localhost：自动工作区发现机制仅在应用通过 localhost 提供服务时有效，不适用于生产环境。

  2. 路径必须是绝对路径workspace.root 必须是本地文件系统上的绝对路径。

  3. 权限授予：第一次连接时需要授予 DevTools 访问项目目录的权限。

三、如何使用 Workspace 保存修改

配置好 Workspace 之后，使用它非常简单——和你平时在 Sources 面板中编辑代码的流程几乎一样，唯一的区别是修改会被持久化保存。

保存 CSS 修改

  1. 在 Sources 面板的 Workspace 标签页中，打开已关联文件夹中的 CSS 文件。

  2. 修改 CSS 代码。

  3. 按 Ctrl/Cmd + S 保存。

  4. 编辑 CSS，不用保存便会立即生效，按 Ctrl/Cmd + S目的是将修改持久化到本地。

保存 JavaScript 修改

  1. 在 Sources 面板的 Workspace 标签页中，打开已关联文件夹中的 JavaScript 文件。

  2. 修改 JavaScript 代码。

  3. 按 Ctrl/Cmd + S 保存。

  4. 刷新页面后修改的代码才会生效。

保存 HTML 修改

  1. 在 Sources 面板的 Workspace 标签页中，打开已关联文件夹中的 HTML 文件。

  2. 修改 HTML 代码。

  3. 按 Ctrl/Cmd + S 保存。

  4. 刷新页面后修改的代码才会生效。

注意：按 Ctrl/Cmd + S 保存后，改动会持久化到本地源文件。

这过程中，有一些细节，可能会被你留意到：在 Workspace 标签页中，有些文件名左侧会显示一个绿点，有些则不会。那，这个绿点，究竟代表着什么含义呢？

其实，绿点就是 DevTools 的映射确认标记。当 Workspace 中某个本地文件与页面当前加载的网络资源成功配对时，该文件旁便会出现绿点。

简单来说：页面（Page 标签页）加载了哪些资源，Workspace 中与之对应的文件就会亮起绿点。

但需要明确的是：在 Workspace 中编辑文件（无论文件是否带绿点）并保存后，改动都将持久化至本地源文件。

小建议：配置 Workspace 之后，建议你养成一个习惯——在 Sources 面板中修改代码后，始终按 Ctrl/Cmd + S 保存。即使你改的是 CSS（之前不需要保存），现在保存能让修改持久化到本地文件。

四、一个完整的示例

让我们用一个完整的例子，把 Workspace 的配置和使用流程串起来。

场景

你正在开发一个个人博客项目，项目在 /path/projects/my-blog 文件夹中。你用 npm run dev 启动了一个本地开发服务器，在 http://localhost:3000 上预览页面。

你发现首页的标题颜色不太好看，想从蓝色改成橙色。你希望这个修改能直接保存到源文件中，不需要手动复制粘贴。

操作步骤

第一步：配置 Workspace

  1. 在 Chrome 中打开 http://localhost:3000。

  2. 按 F12 打开 DevTools，切换到 Sources 面板。

  3. 在左侧导航区中，找到并点击 Workspace 标签页。

  4. 点击 Add folder manually。

  5. 在弹出的对话框中选择 /path/projects/my-blog 文件夹。

  6. 点击 Allow 授权 DevTools 编辑所有的文件。

第二步：找到并修改文件

  1. 在 Workspace 标签页中，展开文件夹树，找到 css（比如：styles/main.css）文件。

  2. 点击文件，在编辑器中打开它。

  3. 找到标题的样式规则：

h1 {
    color: #1a73e8;
}

  1. 把 #1a73e8 改成 #ff6b35。

第三步：保存修改

按 Ctrl/Cmd + S 保存。

第四步：验证效果

  • 页面上：标题立刻变成了橙色。

  • 本地文件中：打开 /path/projects/my-blog/styles/main.css，你会看到颜色已经变成了 #ff6b35。

第五步：刷新页面验证持久化

刷新页面（F5）。标题仍然是橙色——因为修改已经保存到了本地源文件中，页面重新加载时读取的就是修改后的文件。

整个过程，你不需要在浏览器和代码编辑器之间切换，不需要复制粘贴，不需要重新启动开发服务器。所有操作都在 DevTools 中完成，修改直接写入了硬盘。

五、Workspace 的注意事项

1. 确保通过本地服务器访问

Workspace 需要页面通过本地服务器（如 localhost）访问才能正常工作。如果你直接用 file:// 协议打开 HTML 文件，Workspace 可能无法正确建立映射。

2. 授权是必须的

出于安全考虑，Chrome 要求网站获得明确的用户许可才能访问本地文件。如果第一次授权时点击了“Cancel”，你需要在Workspace面板中重新添加文件夹。

3. 排除不需要的文件

如果你的项目中有一些不需要在 DevTools 中编辑的文件（比如 node_modules 目录），可以在 Workspace 设置中配置排除规则。这样可以让文件导航区更清爽，也能避免意外修改依赖文件。

4. 保存操作是必须的

即使启用了 Workspace，对 CSS 所做的修改并不会自动持久化——你需要按 Ctrl/Cmd + S 手动保存，改动才会写入本地文件。这与未启用 Workspace 时"修改即生效"的行为有所不同：后者仅将改动保留在浏览器内存中，而前者要求主动保存才能落盘。

六、Workspace vs Overrides

在 DevTools 中，除了 Workspace，还有一个叫做 Overrides（覆盖）的功能，也可以实现修改的持久化。这两者有什么区别？

维度

Workspace（工作区）

Overrides（覆盖）

映射方式

映射到本地项目源文件

复制到 DevTools 指定的覆盖文件夹

修改流向

双向——修改源文件，刷新后保留

单向——修改保存在覆盖文件夹中

适用场景

你拥有项目的源代码，正在本地开发

你想临时修改线上页面，或没有源文件访问权限

映射成功

绿点圆点

紫色圆点

简单来说：Workspace 适合“我有源代码，正在本地开发”的场景；Overrides 适合“我没有源代码，想临时改一下线上页面看看效果”的场景。

对于初中级开发者来说，Workspace 更常用——因为你大部分时间都在开发自己的项目，拥有完整的源代码。

总结

在这一章中，我们学习了 Workspace（工作区）的完整用法：

  • 什么是 Workspace：Chrome DevTools 中用于将网络资源映射到本地文件的功能，让浏览器中的代码修改能够自动保存到硬盘上。

  • 支持的文件类型：CSS、HTML、JavaScript。

  • 不支持的操作：Elements 面板中的 DOM 修改不会被保存。

  • 两种配置方式：

    • 手动连接（推荐初中级开发者）：在 Sources > Workspace 中点击 Add folder to workspace，选择项目文件夹，授权访问。

    • 自动连接（进阶）：通过 com.chrome.devtools.json 配置文件让 DevTools 自动发现工作区。

  • 如何使用：在 Sources 面板中打开映射的文件，修改代码，按 Ctrl/Cmd + S 保存。

  • 成功标志：文件名旁边出现绿色圆点。

  • 注意事项：需要通过 localhost 访问、需要授权、需要主动保存。

Workspace 把 DevTools 从一个“临时试验场”变成了一台“真正的代码编辑器”。配置好它之后，你可以在浏览器中调试、修改、保存——所有操作都在一个窗口中完成，修改直接写入硬盘，不需要在两个工具之间来回切换。

从今天开始，在你的本地项目中配置 Workspace，体验一下“在浏览器里写代码”的流畅感。

下一章预告：我们将学习性能分析与黑盒脚本——如何利用 Sources 面板分析脚本的执行性能，以及如何让调试器自动跳过第三方库的代码。