开发人员工具，保存对实时站点所做的更改

Question

在 Firefox 或 chrome 中使用开发人员工具时，在对开发人员工具样式表进行更改后，是否可以保存这些更改以供以后在修复实际样式表时参考？

Answer 1

简单地复制/粘贴它们将是最简单的事情。

如果这是您所要求的，则无法直接从开发人员控制台/检查器实际保存对样式表的更改。

Answer 2

在 Firefox 中（他们称自己的工具版本为 Web Developer），

• 保存 HTML：
  右键单击您更改（或要保存）的最外层元素，然后选择
  Copy -> Outer HTML。然后粘贴到文件中。

• 保存在 Inspector 标签上所做的 CSS 更改，这些更改添加到 element inline 条目中，位于级联样式列表的顶部：
  我能建议的最好方法是复制 HTML（见上文），粘贴到新文件中，然后搜索 style'"。
  这将突出显示/查找所有 inline 样式。有些可能已经在文档中。其他将是您添加的。您只需要识别哪些是哪些。然后，您需要将它们作为内联样式添加到您的 HTML、php 和 js 代码中，或者查看周围的类和标签以拼凑如何将它们添加到您的样式表中，而不会破坏其他任何内容。
  如果您知道要保存样式以放入样式表中，那么这可能不是推荐的试验或编辑 CSS 的地方。
  相反，您应该编辑出现在element inline 下方的任何级联规则，或直接从Style Editor 选项卡编辑样式表的本地副本。

• 如果您从 css 层叠列表（针对选定元素）编辑或禁用样式，或从 Styles Editor 选项卡编辑 css，则保存样式相当容易。 切换到Style Editor 选项卡。顶部是用于“构建”当前网页的所有样式表的列表。
  斜体 中显示的任何文件名都包含您修改、添加、禁用的样式。在文件名右侧，点击Save，即可保存整个修改后的样式表。
  您禁用的任何样式（无论它们是否存在于 orig 文件中）都将被注释掉，并且前面可能带有 !。
  不幸的是，如果您只想要一个编辑列表，您还有更多工作要做，因为您不能简单地保存一个列表仅您修改的样式。您保存的文件中没有任何迹象表明您添加或修改了哪些样式。作为一种解决方法，您可以下载“文件差异”程序，以比较两个文件，突出它们之间的差异。
  知道也可以直接编辑样式表的这些本地副本，而不是使用Inspector 选项卡，这些更改将显示在 HTML 页面上，就像您通过“检查器”选项卡编辑样式一样。如果您想为未出现在为该元素显示的级联样式中的元素添加 CSS 选择器组合，这很方便。
  请注意，在 Inspector 选项卡上，在为选定元素显示的每个级联样式的右侧，选择器右侧的文本是它出现的文件的名称。如果单击该名称，它将切换您到样式编辑器选项卡，并显示该文件的内容。同样，您可以直接编辑该文件的（本地副本）。此外，这样可以轻松保存此文件的副本，而无需滚动文件列表即可找到它。

注意：作为一个小技巧，如果您不想使用文件比较程序，没有太多样式，并且您只需要一个您更改的样式的列表，您可以 使用以下过程。
对于您在级联列表中修改的 每个 样式，取消选中它（禁用它）。现在在 css 文件中，它将被注释掉，并以! 开头，例如：
/*! color:#FFDCFD; */。
现在您可以在保存的文件中搜索/*! 以快速找到您编辑的样式（并删除其他所有内容）。乏味的部分是记住要单击的每个元素，以便访问您更改的每个样式，找到它并禁用它。但是，它是一种选择，也是一种很好的解决方法，在紧要关头。

Answer 3

是的，至少在 Chrome 中可以。只需单击开发工具样式面板右上角的加号即可进行更改。然后从下拉列表中选择“inspector-stylesheet”并输入您的更改。

现在，如果您单击您创建的样式右侧的链接，它将带您到源面板中的检查器样式表。在那里你会看到你所有的风格。现在只需右键单击该窗格中的某处并选择“另存为”。任务完成。