(源工具“工作区”选项卡) 编辑和保存工作区中的文件

2025-07-01

可以将 DevTools 用作浏览器内集成开发环境， (IDE) 。若要保存对网页源文件的编辑，请在“源”工具的“工作区”选项卡中添加网页的源代码文件夹。然后，可以在源工具的编辑器 (或 DevTools) 底部的“快速视图”面板中的“快速源工具”中编辑和保存 HTML、CSS 和 JS 文件。

可以从 “工作区 ”选项卡中创建、复制、重命名和删除源文件。

使用“源”工具中的“工作区”选项卡，可从“源”工具中显示和编辑计算机上文件夹的内容。对工作区中的文件所做的更改将保存到计算机。

设置工作区的典型方法是将其设置为显示网站的前端代码的源文件。这样，就可以使用 DevTools 来检查网站，并更改其源文件。这样，所做的更改将保存在计算机上，而不是在刷新页面时丢失。

另请参阅：

工作区教程 (源工具工作区选项卡)

DevTools 工作区功能概述

使用 DevTools 工作区 ，可以查看计算机上的网站的源代码，并从源工具对其进行更改，以便在页面刷新时保留更改。

下面是使用工作区的典型方案：

在计算机上拥有网站的源代码。
从源代码目录运行本地 Web 服务器 (（例如 npx http-server) ），以便可通过本地开发 URL（如 http://localhost:8080）访问站点。
在 Microsoft Edge 中打开 http://localhost:8080 。
使用 DevTools 中的“源 ”工具的“ 工作区 ”选项卡更改网站的源代码，包括 CSS、HTML 和 JavaScript 文件。
重新加载网页以查看更改。

网站可能使用生成系统，你需要先运行该系统，然后才能看到更改。 Web 开发人员通常使用监视源代码文件中保存的更改的生成系统。保存对源代码文件的更改时，生成系统将生成这些更改，然后在浏览器中自动刷新页面。

如果使用此类自动生成系统，在源工具中对源文件进行更改并保存它时，会自动看到这些更改应用于呈现的网页。

工作区功能与已转换源代码的限制

如果使用新式框架，它可能会将源代码从易于维护的格式转换为经过优化以尽快运行的格式。 “源”工具中的“工作区”选项卡通常能够通过使用 JavaScript 和 CSS 的源映射将优化的代码映射回原始源代码。但是，每个框架使用源映射的方式存在很大差异。

DevTools 不支持每个框架变体。如果在将工作区与所选框架配合使用时遇到问题，或者确定所需的特定于框架的步骤，请在 MicrosoftEdge/DevTools 存储库上打开问题来联系以使用。

使用“源”工具的“工作区”选项卡时，使用“元素”工具中的“样式”选项卡编辑 CSS

如果使用工作区，在某些情况下，可以在“元素”工具的“样式”选项卡中编辑 CSS，并将更改保存到磁盘上的映射文件：

如果 DevTools 在网页上映射样式表和工作区中的文件（例如源映射或匹配内容），则你在“元素”工具的“样式”选项卡中所做的编辑将保存到磁盘上的 CSS 文件。

如果使用自动生成系统框架，则如果 DevTools 能够使用源映射将样式表映射到工作区文件，则会将更改保存到源文件。

如果没有生成步骤，或者存在生成步骤和源映射，DevTools 可能会将更改保存到磁盘，具体取决于所使用的自动生成系统或框架。 “ 样式 ”选项卡映射到磁盘上的 CSS 文件，因此“ 样式 ”选项卡中的编辑将保存到磁盘。
如果样式表未映射到工作区文件，在“元素”工具的“样式”选项卡中进行的编辑不会保存到磁盘上的 CSS 文件。在“元素”工具的“样式”选项卡中编辑 CSS 将丢失更改;更改不会保存到磁盘。

如果使用 工作区，请在源工具中编辑 CSS， (不在 “元素 ”工具) 中编辑，因为编辑的源文件可能先由生成脚本生成或编译，然后再由本地服务器提供服务。在 “元素” 工具中编辑时，你可能正在编辑文件的编译和生成版本，而不是源文件。

使用 工作区时：

在 “源” 工具中编辑文件。
保存更改。
再次生成。某些生成系统在检测到更改时自动执行此作。
重新加载页面。某些服务器在检测到更改时自动执行此作。

“元素”工具的“样式”选项卡的限制

使用 “元素 ”工具的“ 样式 ”选项卡可能并不总是适用于每个方案。假设项目使用框架或预处理器来编写 CSS，其中不直接编写 CSS，而是使用其他语言和不同的文件结构编写 CSS 的等效项。此类项目可能使用生成系统，该系统随后将类似 CSS 的代码进行转换、编译，并将其合并为浏览器可以理解的内容。

此类项目可能会生成源映射，因此 DevTools 允许你在 “元素 ”工具的“ 样式 ”选项卡中查看和编辑源文件。但在某些情况下，这可能不起作用，或者项目可能不使用源映射。

发生这种情况时，在 “元素 ”工具的“ 样式 ”选项卡中所做的任何更改都不会保存到工作区文件中。在这种情况下，请改为在 “源” 工具中编辑源文件。在上述方案中，使用其他语言的文件显示在“源”工具的“工作区”选项卡中，你可以在其中编辑源文件。

然后，在后台，任何保存的更改都需要重新生成和编译 (这些更改可能会在) 自动发生，然后在页面刷新后 () 自动发生的更改将显示在呈现的网页中。

本地替代 是一项类似于工作区的 DevTools 功能。如果想要试验对网页的更改，并且需要跨网页加载显示更改，但不关心将更改映射到网页的源代码，则可以使用替代。

本地替代 会将你对网页所做的更改保存在所选文件夹中，并将其组织在与被重写资源的 URL 匹配的文件夹结构中。

替代功能存储你在 DevTools 中编辑的网页资源的副本。刷新页面时，Microsoft Edge 加载文件的本地修改副本，而不是服务器上的文件。

另请参阅：

使用本地副本替代网页资源（“替代”选项卡）

刷新后，元素工具 DOM 树编辑丢失

若要对 HTML 源文件进行更改，需要使用 “源 ”工具的“ 工作区 ”选项卡，而不是 “元素” 工具。

元素工具 > DOM 树编辑的限制：

在 “元素” 工具中，可以更改浏览器引擎在加载页面时构造的 HTML 文档的 DOM 表示形式。但是，对 DOM 的更改无法映射回 HTML 源文件。可以使用 “元素” 工具中的 DOM 树对 HTML 内容进行更改，但对 DOM 树所做的更改不会保存到磁盘，只会影响当前的浏览器会话。

另请参阅：

使用上述“源”工具的“工作区”选项卡时，使用“元素”工具中的“样式”选项卡编辑 CSS。

“源工具>页面”选项卡的限制：

“源”工具的“页面”选项卡不允许保存对文件系统所做的更改。

无法编辑通过“ 页面 ”选项卡打开的 HTML 文件。
可以通过“ 页面 ”选项卡打开的 CSS 或 JS 文件进行编辑，但在刷新网页时不会保留编辑内容。

以下步骤演示在页面刷新时不会保留元素工具 DOM 树中的编辑：

按照工作区教程 (源工具“工作区”选项卡) 中所述设置工作区演示。
在 DevTools 中，选择 “元素 (</>) 工具。
在 DOM 树的元素中 <h1> ，选择文本字符串 DevTools Workspaces Demo，将其删除，键入文本字符串 I Love Cake，然后按 Enter。呈现的网页显示新的标题文本 “我爱蛋糕”：
选择 “源” 工具，右键单击， index.html然后选择“ 在包含文件夹中打开”。

文件资源管理器或 Finder 打开。
在index.html文本编辑器（如 Visual Studio Code）中打开目录中的文件/Demos/workspace/。未显示刚刚所做的更改;标题仍显示“DevTools 工作区演示”，而不是“I Love Cake”。
在浏览器中，刷新演示页。

页面将还原为原始标题“DevTools 工作区演示”，因为带有编辑的 DOM 树被丢弃，并且 DOM 是从目录中未更改 index.html 的文件 /Demos/workspace/ 重新创建的。

为何不保存 DOM 树编辑

根据上述部分，更改 Elements 中的 DOM 树不起作用。

在 “元素” 工具上看到的节点树表示页面的 DOM。
为了显示页面，浏览器通过网络提取 HTML，分析 HTML，然后将其转换为 DOM 节点树。
如果页面包含任何 JavaScript，该 JavaScript 可以添加、删除或更改 DOM 节点。 CSS 也可以通过 content 属性更改 DOM。
浏览器最终使用 DOM 来确定它应向浏览器用户呈现的内容。
因此，用户看到的页面的最终状态可能与浏览器提取的 HTML 大相径庭。
这使得 DevTools 难以解析 应在元素 工具中保存更改的位置，因为 DOM 受 HTML、JavaScript 和 CSS 的影响。

简而言之，浏览器引擎构造的 DOM 树不同于从服务器下载的 HTML 文档。

使绿色的“映射”点显示在文件上

如果 DevTools 中的文件上停止出现绿色的“映射”点，例如在 “工作区 ”选项卡中;如果 “更改” 工具未显示预期的更改，则为：

显示 DevTools 后，在 Microsoft Edge 中长按或右键单击“ 刷新 ”按钮，然后选择“ 硬刷新 ” (Ctrl+Shift+R) 。

DevTools 中某个文件旁边的绿色“映射”点表示 DevTools 已在从 Web 服务器接收的页面的网络资源与目录中的本地源文件 /Demos/workspace/ 之间建立映射。在 DevTools 中添加的新文件必须由服务器返回，以指示为映射。

如果在工作区中添加新 .js 文件，并且希望在添加 .js 的文件上显示一个绿色的“同步”圆圈，并在 “更改” 工具中表示该文件：

引用 HTML 文件中添加.js的文件，例如标记中的<body>行<script src="test.js"></script>。
请确保文件中存在代码 .js ，例如行 console.log('hello from test.js');。
按 Ctrl+S (Windows、Linux) 或 Command+S (macOS) 。更改已保存，星号消失。
显示 DevTools 后，在 Microsoft Edge 中长按或右键单击“ 刷新 ”按钮，然后选择“ 硬刷新 ” (Ctrl+Shift+R) 。