我是一名网络开发人员/设计师,我需要我的代码文盲客户能够轻松地弄乱特定元素的颜色,保存这些 CSS 更改并将它们发送给我。我将通过电话指导他们,但我仍然需要它比期望他们在主题表中找到 CSS 选择器并编写十六进制代码更容易。
我需要一个浏览器内的检查器,它可以允许不识字的人:
- 使用 GUI 颜色选择器轻松操作网页元素上的颜色。
(+) Chrome 完美地做到了这一点。这正是我想要的。
(-) Firefox 原本华丽的检查器似乎没有这种基本功能。 - 保存受影响的样式表,以便他们将其发送给我。
(?) Firefox 的样式编辑器使保存工作表变得容易,但是对检查元素的更改 - 奇怪的是 - 似乎没有应用。
(-) Chrome 可能在 Sources 面板的深处可以做到这一点,但似乎你需要成为一名黑客才能弄清楚,因为我是一个懂代码的人,我还没有弄清楚出去。
我发现这个难题的存在非常令人费解——为什么浏览器供应商要费心制作如此丰富的网页编辑套件,其中可以操作 CSS,但不包含基本的“保存更改”功能? 我错过了什么吗?
编辑01:
我发现,在 Chrome 中,可以使用检查器自由操作元素的 CSS,然后单击与每个规则关联的 CSS 表(在规则的右上角),将您带到修改后的 CSS 表中来源选项卡。这就是我想要保存的。
从这里,可以右键单击修改后的源代码中的任意位置,然后另存为——但奇怪的是,不幸的是, Chrome 保存了错误的源代码。它保存原始的、未修改的源代码——而不是您右键单击另存为的修改后的源代码。非常令人沮丧,我目前正在尝试找到解决此错误的方法。我好近!
编辑02:
好的,我已经想通了。当您在 Chrome 的 Sources 选项卡中保存文件时,您不仅仅是在保存该文件——您实际上是在将 Chrome 设置为在您对其进行的每次更改时不断地自动保存该文件。
这实际上很酷,但非常具有误导性。
因此,在您保存 CSS 文件后,您在检查器中对元素的 CSS 所做的每次更改都会自动保存到该文件中。即使您重新启动浏览器,这种情况仍然存在。
出现了混淆,因为当您将文件标记为自动保存时,然后您将另存为修改后的文件, Chrome 会奇怪地写入原始文件,而不是您右键单击的文件。之后,一旦您进行任何更改,Chrome 就会自动将当前对该文件的所有修改写入。我认为这是 Chrome 中的一个错误。
吸取教训, 首先,另存为文件。其次,做出改变。
Presto,您修改后的 CSS 主题在您的硬盘上等着您。
需要明确的是,如果您保存,然后进行更改,然后再次保存 - Chrome 将保存Original Source,而不是您的 Modified Source 。这使得事情的顺序很重要。
我不知道如何查看当前标记为自动保存的文件列表,或者如何取消标记它们。