4

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

4

3 回答 3

4

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

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

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

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

于 2018-12-28T07:31:39.640 回答
1

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

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

于 2014-12-18T17:25:19.227 回答