为什么我无法在Firebug中保存CSS更改?

143

Firebug是我发现用于编辑CSS最方便的工具 - 那么为什么没有一个简单的“保存”选项用于CSS呢?

我经常在Firebug中对CSS进行微调,然后回到我的原始.css文件并复制这些微调。

有人想出了更好的解决方案吗?

编辑: 我知道代码存储在服务器上(在大多数情况下不是我的),但我在构建自己的网站时使用它。

Firebug只是使用Firefox从服务器下载的.CSS文件,它知道要编辑哪个文件的哪些行。我不明白为什么没有一个“导出”或“保存”选项,允许您存储新的.CSS文件。(然后我可以用它替换远程文件)。

我尝试在临时位置中查找,并选择文件 > 保存...并尝试Firefox的输出选项,但我仍然没有找到方法。

编辑2:官方讨论组有很多问题,但没有答案。


这是我一段时间之前在小组里发布的帖子:http://groups.google.com/group/firebug/browse_thread/thread/b50c7e8805d19b77/1ceb6acd47313bff?lnk=gst#1318172f0fac6985 - NickFitz
你尝试过http://www.cssUpdater.com吗?使用它,您可以在FireBug中进行编辑,然后点击“立即同步”按钮将所有更改传输到原始CSS文件。 - Jhonte
2
Firebug有一种特定的方法来实现这个。在右侧CSS视图中添加规则进行几个CSS更改后,单击最右侧引用样式元素的地址,然后从顶部菜单下拉列表中选择Live Edit(而不是Source Edit),单击Live Edit并随心所欲地复制/粘贴。 - Chris Like
在本地文件更改时,浏览器中的自动重新加载功能可以让我留在编辑器中。但它只在本地工作。 - Nils Lindemann
23个回答

104

我也曾经想过同样的问题,

当你在使用Firebug进行即时样式修改时,因为一些意外的刷新等原因导致你的修改被清空,这让人感到非常沮丧。

为了达到我的目的,我终于找到了一个工具...: FireDiff

它会给你一个名为“changes”的新标签页,可能是个奇怪的David Bowie引用; 它不仅允许您查看/保存Firebug(即您)已经做了什么,
而且还可以选择跟踪页面本身所做的更改... 如果您和/或页面愿意的话。

非常感谢不用重新输入、重新想象并重新输入每一个CSS规则...

这里是开发者的链接(别被第一印象吓到,也许最好直接转到Mozilla附加组件库)。


这样一个小工具,节省了如此多的人力,今天我们都是赢家;-) 向FireDiff的作者致敬,看起来他并没有在SO上活动。待办事项:给作者发邮件,表达感激之情 - Morten Bergfall
是的,这就是该用户,因为他的网站链接是相同的。 - Jonathan Parker
1
天哪,这太棒了。 - Jason
我理解你,Jason,我理解你...;-) - Morten Bergfall
3
天哪 - 我完全被极客炸了! - Glycerine
显示剩余8条评论

27

我找到这个功能的时候就来了,也就是说,能够将编辑后的CSS属性保存回原始文件(在我的本地开发机器上)。不幸的是,经过大量搜索并没有找到适合我的需求的东西(好吧,有CSS Updater,但你必须注册并且它是一个付费扩展...),我放弃了Firefox + Firebug,寻找类似于Google Chrome的东西。猜猜看...我刚刚发现了这篇很棒的文章,它展示了一个不错的方法来实现这一点(内置于Chrome中 - 不需要额外的扩展程序):

使用Chrome开发者工具更改CSS并在本地文件系统上保存

enter image description here

我现在尝试了一下,它可以很好地突出显示更改的行。只需单击保存即可完成!:)

这里有一个视频,解释了这个功能以及更多内容:Google I/O 2011: Chrome Dev Tools Reloaded

如果在编辑CSS文件时更改浏览器不重要,希望这能帮到您。我已经做出了更改,但我真的很希望Firebug内置此功能。:)


[更新1]

今天我刚看到这个视频:Firefox CSS在Sublimetext中实时编辑(正在进行中) 确实很有前途。

[更新2]

如果你正在使用Visual Studio 2013Web Essentials,你可以像这个视频中展示的那样自动同步CSS:

Web Essentials: 浏览器工具集成


1
还有另一种选择,使用Chrome Canary,您可以启用JS和CSS文件的直接映射。请参阅此文章以获取有关如何启用Canary Workspace实验的说明:http://devcoma.blogspot.it/2013/01/how-to-enable-workspace-experiment-on.html?m=1 - Matteo Conta
非常好的@contam。事情正在真正发展!感谢更新。 :) - Leniel Maccaferri
@LenielMacaferi [更新2]: 我从未能够让Web Essentials更新实际的CSS,我需要设置任何配置吗? - Saber

15

Web Developer add-on 可以让你保存编辑内容。我希望将 Firebug 的编辑功能与 Web Developer 的保存功能结合起来。

alt text
(来源:mozilla.org)

使用“保存”按钮(单击 CSS 菜单 -> 编辑 CSS)将修改后的 CSS 保存到磁盘。

建议:使用“固定”按钮,以防在切换选项卡进行其他浏览时丢失更改。如果可能,请仅使用一个选项卡进行编辑和其他 Firefox 窗口相关搜索、网页邮件等。


1
我确实使用Web开发者插件。但我试图寻找该选项,但未能找到。我该如何保存新样式表? - Dean Rather
当我在Firebug中编辑CSS时,更改没有同步到WebDeveloper工具栏“Edit CSS”。你如何进行同步? - Gerold Meisinger

13
我刚在mozilla插件沙盒发布了一款Firebug插件,也许正是您想要的:https://addons.mozilla.org/en/firefox/addon/52365/ 实际上,它会通过与一个单文件webservice php脚本通信,将"touch"过的css文件按需保存到您的Web服务器上。
文档可以在我的主页或插件页面上找到。
由于这个插件仍处于早期测试阶段,但应该已经可以正常工作,因此我希望能得到任何测试、错误报告、评论、评分和讨论。请注意保留HTML标记。

13

CSS-X-Fire

我很惊讶这个问题还没有列出它,但可能是因为它很新,作者还没有时间去推广它。

它叫做CSS-X-Fire,是 JetBrains 系列 IDE 的插件:IntelliJ IDEA, PHPWebStorm, PyCharm, WebStorm, RubyMine

它的工作原理: 您安装其中一个 IDE 并配置部署(支持 FTP 和 SCP)。这将使您与服务器保持同步。

安装此插件后,当它启动时,它会告诉您它将安装 Firefox 插件,以便在 Firebug 和 IDE 之间进行集成。如果无法安装插件,请使用拖放技术安装它。

安装完成后,它将跟踪 Firebug 中的所有更改,您将能够通过 IDE 中的简单点击应用它们。

CSS-X-Fire 窗口在 IDE 中。

FireFile

FireFile 是另一种选择,需要您在服务器端添加一个小的 php 文件,以便能够上传修改后的 CSS。


不错的发现!但我想知道是否有类似的通道可以在Firebug和其他Mac IDE或编辑器之间使用,而不仅仅是IntelliJ。 - Henrik
@hced 您的愿望已经实现,请检查 FireFile。 - sorin

10
您可以使用FirebugFireclipse 将其链接到 Eclipse,然后从 Eclipse 中保存文件。

1
你可以将FireBug链接到Eclipse吗?太棒了!FireBug和Eclipse是我在开发中使用的主要工具。我会研究一下这个。谢谢! - Dean Rather

9
我认为你能得到最接近的结果是进入Firebug的编辑模式,然后复制和粘贴CSS文件的内容。

那就是我一直在寻找的解决方案...我喜欢之前从未注意到的显而易见的答案。克苏鲁诅咒 StackOverflow 及其所有形式,因为它防止了疯狂。 - OhkaBaka
2
啊...这不起作用....那是原始源代码...它抹掉了我所有的更改。 - OhkaBaka

7

看起来很棒。而且也适用于WebKit Web Inspector?太好了! - jocap

3

3
我提出的解决方案涉及结合使用Firebug和FireFTP,以及在本地运行网站时直接访问本地文件系统的代码。
以下是几种情况:
在远程机器上托管的网站
在这种情况下,您将提供FTP详细信息和CSS / HTML / Javascript的位置,当您保存更改时,Firebug会更新这些文件。它甚至可以自动定位文件,然后提示您验证是否有正确的文件。如果文件名唯一,则不应该存在问题。
在本地计算机上运行的网站
在这种情况下,您可以向Firebug提供网站的本地文件夹位置,并使用相同的行为来匹配和验证文件。如果需要访问本地文件系统,可以通过FireFTP执行访问。
在没有FTP访问权限的远程托管网站上工作
在这种情况下,必须实现类似FireFile附加组件的功能。
另一个功能是能够保存和打开项目文件,其中存储了本地文件与它们相关联的URL之间的映射,以及像FireFTP一样保存FTP详细信息。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接