12

我是一名网络开发人员/设计师,我需要我的代码文盲客户能够轻松地弄乱特定元素的颜色,保存这些 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 。这使得事情的顺序很重要。

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

4

3 回答 3

10

如何使用 Chrome 玩 CSS 并保存

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

但是请记住,必须按此顺序执行操作。如果您保存样式表,然后进行 CSS 更改,然后再次保存, Chrome 会奇怪地将原始未修改的源写入文件(直到您再进行一次更改,这会导致 Chrome 自动保存对文件的所有更改)。

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

  • 为您打算让它们使用的每个元素设置一个带有空白(或默认)CSS 规则(具有最高优先级)的主题样式表。
  • 通过电话,引导他们从 Sources 面板中 Save-As 这个主题样式表。
  • 指导他们检查元素,并使用 Chrome 检查器的 GUI 颜色选择器进行干预并找到他们想要的确切颜色。
  • 让他们将保存的样式表发送给您 :)
    在他们关闭浏览器窗口之前,您最好验证修改是否在他们发送给您的文件中:P
于 2013-04-15T00:28:20.610 回答
3

我使用这个Chrome 扩展来保存我直接在 Chrome DevTools 中修改的文件。
似乎很难配置它,但它完成了他的工作。另外,我认为它是网络开发人员/设计师的必备品。
也许通过一些调整,你可以让它做你想做的事情。

于 2013-04-14T23:24:24.757 回答
0

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

是一个示例,说明了如何完成上述操作。

我是这个工具的开发者之一,所以请随时问我任何问题

于 2017-10-10T17:03:18.443 回答