我将本地 CSS 文件映射到我尝试在 Google Inspector 工作区中编辑的实时网页。当然，我可以将我的编辑保存到源选项卡中的本地 CSS 文件，但这不会将编辑保留在实时页面上。即使刷新页面，是否有任何方法可以使您在检查器中输入的 CSS 更改保留在实时页面上？我不断到达一个按我想要的方式设置页面的地方，然后我失去了在页面上的所有工作，并且将其全部备份起来很痛苦。我已经尝试过声明他们这样做的 Chrome 扩展程序，但是当我单击它创建的扩展程序图标时，它们都不起作用。如果有免费的方法来完成这项工作，我感谢您的帮助。
我无权访问 HTML 文件，我的客户只向我发送了实时页面 URL，并希望我仅使用本地 CSS 文件对其进行编辑。我需要一种方法来做到这一点，并在我制作时看到实时编辑留在页面上。
【问题讨论】：
标签： css google-chrome google-chrome-devtools
您可以从 Chrome 开发工具本身保存您的 CSS 更改。 Chrome 现在允许您将本地文件夹添加到您的工作区。在允许 Chrome 访问文件夹并将文件夹添加到本地工作区后，您可以将 Web 资源映射到本地资源。
导航到开发工具的 Sources 面板，右键单击左侧面板（列出文件的位置）并选择 Add Folder to Workspace。您可以通过单击“元素”面板中选定元素的每个 CSS 规则右上角的样式表来快速访问“源”面板中的样式表。
添加文件夹后，您必须授予 Chrome 访问该文件夹的权限。允许 chrome 访问 接下来，您需要将网络资源映射到本地资源。 在此处输入图片说明
重新加载页面后，Chrome 现在会加载映射文件的本地资源。为简单起见，Chrome 仅向您显示本地资源（因此您不会混淆您是在编辑本地资源还是网络资源）。要保存更改，请在编辑文件时按 CTRL + S。
【讨论】：
您应该能够通过将 CSS 文件更改添加到您的工作区来保存您的 CSS 文件更改，就像您在问题中提到的那样。这就是 Chrome 文档的说明以及如何做到这一点。
Set Up Persistence with DevTools Workspaces
这似乎是一个愚蠢的问题，但您是否保存文件？还值得注意的限制（取自上面的链接）...
尽管工作区功能强大，但您应该注意一些限制。
- 仅保留元素面板中的样式更改；对 DOM 的更改不会持久化。
- 只能保存在外部 CSS 文件中定义的样式。对 element.style 或内联样式的更改不会保留。 （如果 您有内联样式，可以在 Sources 上更改它们 面板。）
- 元素面板中的样式更改会立即保留，无需显式保存 -- Ctrl + S 或 Cmd + S (Mac) -- 如果您 将 CSS 资源映射到本地文件。
- 如果您从远程服务器而不是本地服务器映射文件，当您刷新页面时，Chrome 会从 远程服务器。
- 如果您继续在 Workspaces 中进行编辑，您的更改仍会保留在磁盘上并重新应用。您必须使用完整路径 在浏览器中映射文件。甚至您的索引文件也必须包含 .html 在 URL 中，以便查看暂存版本。
【讨论】：