使用Chrome Inspector＆amp ;;在浏览器中编辑CSS工作区，有更改保持刷新页面

Question

我将本地CSS文件映射到我尝试在Google Inspector工作区中编辑的实时网页。当然，我可以将我的编辑保存到源选项卡中的本地CSS文件，但这不会保留实时页面上的编辑。即使您刷新页面，有没有办法让您进入检查器的CSS更改保留在实际页面上？我一直到达页面设置的地方我想要它然后我丢失了我在页面上的所有工作，并且很难将它全部备份。我尝试过Chrome扩展程序，表明他们会这样做但当我点击它创建的扩展程序图标时，它们都不起作用。如果有一种免费的方式来完成这项工作，我感谢您的帮助。

我无权访问HTML文件，我的客户端只向我发送了实时页面网址，并希望我仅使用本地CSS文件对其进行编辑。我需要一种能够做到这一点的方法，并在我制作时看到实时编辑保留在页面上。

Answer 1

您可以从Chrome开发工具本身保存CSS更改。 Chrome现在允许您将本地文件夹添加到工作区。允许Chrome访问该文件夹并将该文件夹添加到本地工作区后，您可以将Web资源映射到本地资源。

导航到“开发人员工具”的“源”面板，右键单击左侧面板（列出文件的位置），然后选择“将文件夹添加到工作区”。通过单击“元素”面板中所选元素的每个CSS规则右上角的样式表，可以快速访问“源”面板中的样式表。

添加文件夹后，您必须授予Chrome访问该文件夹的权限。允许访问Chrome 接下来，您需要将网络资源映射到本地资源。 在此处输入图像描述

重新加载页面后，Chrome现在会加载映射文件的本地资源。为简化操作，Chrome只会向您显示本地资源（因此您不必对编辑本地资源或网络资源感到困惑）。要保存更改，请在编辑文件时按CTRL + S.

Answer 2

您应该可以将CSS文件更改保存到工作区中，就像您在问题中提到的那样。这是Chrome文档说明的内容以及如何执行此操作。

Set Up Persistence with DevTools Workspaces

这可能看起来像一个愚蠢的问题，但你保存文件？另外值得注意的是限制（取自上面的链接）......

与工作空间一样强大，您应该注意一些限制。

  

  
• 仅保留“元素”面板中的样式更改;对DOM的更改不会保留。
  
• 只能保存在外部CSS文件中定义的样式。对element.style或内联样式的更改不会保留。 （如果   你有内联样式，可以在源上更改它们   面板。）
  
• “元素”面板中的样式更改会立即保留，不会显式保存 - Ctrl + S或Cmd + S（Mac） - 如果您   将CSS资源映射到本地文件。
  
• 如果您要从远程服务器而不是本地服务器映射文件，则在刷新页面时，Chrome会重新加载页面   远程服务器。
  
• 如果您继续在工作区中进行编辑，您的更改仍会保留在磁盘上并重新应用。您必须使用a的完整路径   在浏览器中映射文件。甚至你的索引文件也必须包含   URL中的.html，以便查看暂存版本。