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

Question

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

我需要一个浏览器内检查器,它允许代码文盲的人:

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

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

编辑01:

我在Chrome中发现,可以使用检查器自由操作元素的CSS,然后单击与每个规则关联的CSS工作表(在规则的右上角),以转到已修改的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