浏览器作为设计工具 - 改变颜色，保存它们？

Question

我是一名网络开发人员/设计师，我需要我的代码 - 文盲客户端能够轻松搞乱特定元素的颜色，保存这些CSS更改，并将它们发送给我。我将通过电话指导他们，但我仍然需要它比预期他们在主题表中找到CSS选择器，并编写十六进制代码更容易。

我需要一个浏览器内检查器，允许代码文盲的人：

• 使用GUI颜色选择器轻松操作网页元素上的颜色。
  （+） Chrome完美无缺。这正是我想要的。
  （ - ） Firefox的华丽检查员似乎没有这个基本功能。
• 保存受影响的样式表，以便他们发送给我。
  （？） Firefox的样式编辑器使保存页很容易，但是对于被检查元素的更改 - 奇怪的是 - 似乎没有被应用。
  （ - ） Chrome可能在Sources面板的深处可以做到这一点，但似乎你需要成为黑客来解决它，因为我是代码识别者，并且我还没想出来。

我发现这个难题的存在非常令人困惑 - 为什么浏览器厂商难以制作如此丰富的网页编辑套件，人们可以操纵CSS，但不包括基本的“保存更改”功能？ / em> 我错过了什么吗？

编辑01：

我在Chrome中发现，可以使用检查器自由操作元素的CSS，然后单击与每个规则关联的CSS工作表（在规则的右上角），以转到Modified CSS “源”选项卡中的工作表。 这就是我要保存的内容。
从这里，可以右键单击此修改后的源代码中的任意位置，然后单击“另存为 - 但奇怪的是，不幸的是，非直观地” Chrome保存错误源代码。它保存了原始的，未经修改的源代码 - 而不是您右键单击“保存”的已修改源代码。非常令人沮丧，我正在试图找到解决这个bug的方法。 我太近了！

编辑02：

好的，我已经明白了。 当您在Chrome的“来源”标签中保存文件时，您不仅仅是保存该文件 - 您实际上是在设置Chrome以便在每次更改时自动保存该文件制作它。
这实际上很酷，但很容易引起误解。

因此，在保存CSS文件后， 您在检查器中对元素的CSS所做的每一项更改都将自动保存到该文件。 即使你重新启动浏览器。

出现混淆， ，因为当您有一个标记为自动保存的文件，然后您保存为修改后的文件时， Chrome奇怪地写了原始文件文件，而不是您右键单击的文件。在此之后，只要您进行任何更改，Chrome就会自动将当前每个修改都写入该文件。 我认为这是Chrome中的错误。

吸取教训， 首先，另存为文件。 其次，进行更改。
Presto，你修改过的CSS主题在你的硬盘上等着你。

要清楚 如果您保存，然后进行更改，然后再次保存 - Chrome将保存原始来源，而非你修改过的来源。这使事情的顺序变得重要。

我不知道如何查看当前标记为自动保存的文件列表，或者如何取消标记它们。

Answer 1

如何使用Chrome播放CSS并保存

• 确定要更改的样式表。 请务必仅影响与此样式表关联的规则。
• 在“开发者工具”的“来源”面板中导航到此样式表，右键单击，然后将另存为此文件导航到您的计算机。 通过单击“元素”面板中所选元素的每个CSS规则右上角的样式表，可以快速访问“源”面板中的样式表。
• 自由更改与您选择并保存的样式表相关联的CSS规则。 Chrome会自动将每次更改保存到您保存在计算机上的样式表中。

请注意， 必须按此顺序执行操作。如果您保存样式表，然后进行CSS更改，然后再次保存， Chrome会奇怪地将原始未修改源写入文件（直到您再进行一次更改） ，这会导致Chrome自动将所有更改保存到文件中。

如何与您的客户和朋友一起使用

• 为您打算让它们玩的每个元素设置一个主题样式表，其中包含空白（或默认值）CSS规则（具有最高优先级）。
• 通过电话，引导他们在“来源”面板中保存为此主题样式表。
• 引导他们检查元素，并使用Chrome检查器的GUI颜色选择器插入并找到他们想要的确切颜色。
• 让他们发送保存的样式表:)
  最好在关闭浏览器窗口之前验证修改是否在他们发送给您的文件中：P

Answer 2

我使用this Chrome扩展程序直接在Chrome DevTools中保存我修改的文件  似乎很难配置它，但它完成了他的工作。此外，我认为这对网络开发者/设计师来说是必须的 也许通过一些调整，你可以让它做你想做的事。

Answer 3

Sitemod.io允许您使用Chrome开发者工具在任何实时或本地编辑任何 HTML ， CSS 或 JS 代码网页。完成工作后，您可以保存编辑内容并获得修改版本的唯一URL，以便与客户共享您的mod。

Here是一个示例，说明了如何完成上述工作。

我是这个工具的开发人员之一，所以请随时问我任何事情