从 Firefox Developer Edition Inspector 工具编辑 CSS

Posted 2023-03-05

【中文标题】从 Firefox Developer Edition Inspector 工具编辑 CSS

【英文标题】：Edit CSS from Firefox Developer Edition Inspector tool

【发布时间】：2015-01-07 00:17:05

【问题描述】：

我正在尝试保存在 Firefox 开发者版的 Inspector 选项卡 上所做的 CSS 更改。

据我所知，您只能将 CSS 保存在样式编辑器选项卡中，但它不反映使用检查器工具所做的更改。

是否可以从 Inspector 选项卡的 Style Editor 中编辑 css？

【问题讨论】：

您在代码检查器中所做的更改仅保存在页面生命周期的该实例中。刷新页面后，它将恢复为页面使用的 CSS。 您无法更改其他人的 CSS，除非您在浏览器中使用包含完全相同选择器的自定义样式表。

我正在尝试在本地修改自己的网站

网络不是这样工作的。你没有自己的“网络”。 “网络”是由世界各地的人们发布的可以从世界各地访问的页面和应用程序的集合。就像打电话一样；你可以拨打任何号码，但你不能让电话另一端的人说出你想让他们说的话，因为你无法控制他们。因此，对于网站，您无法更改其内容，因为您无法控制它们。您只能按照设计与他们互动。

您是否测试过 Firefox 开发者版？它允许将网站的 css 保存在您自己的计算机中。如果我是从事该网络的人，我可以进行修改。我不想破解任何东西。

是的。 Firefox Developer Edition 允许将 CSS 更改保存到本地文件。我想要配置它，以便在 Inspector 工具中所做的更改反映在样式编辑器工具中，您可以在其中保存 CSS 更改，这样我就可以使用我在 Inspector 中所做的更改来获取 CSS。

【参考方案1】：

在寻找更好的工作流程时，我发现您可以对 Inspector 进行更改，然后将这些更改反映到样式编辑器中，您可以在其中保存它。

这不是自动的，但只需单击一下即可轻松完成。

只需在检查器中进行更改，然后单击文件名：行号链接并保存更改。请参阅下面的视觉指南：

检查并找到您的对象。

单击文件名：行号链接只是为了查看您的属性是您在检查器上看到的原始属性。

返回检查员。更改您的值，然后再次单击 file-name:line-number 链接。

您将看到样式编辑器中的值已更新为检查器中更改的值。现在只需保存并继续下一个元素。

现在您可以使用键盘快捷键 CTRL+SHIFT+C 快速切换回 Inspector（注意：此快捷键对我不起作用，因此您可能需要找到高级键盘快捷键管理器）。

【参考方案2】：

Chrome 中有一个很好的解决方案。 见：How to save CSS changes of Styles panel of Chrome Developer Tools?

我在 Firefox 中不知道。见：https://support.mozilla.org/en-US/questions/967467