为什么我不能在Firebug中保存CSS更改？

Question

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

我总是发现自己在Firebug中进行调整，然后回到我原来的.css文件并复制调整。

有没有人想出更好的解决方案？

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

Firebug只是使用从服务器下载的.css文件，它确切地知道它正在编辑哪些文件行。我不明白为什么没有“导出”或“保存”选项，它允许您存储新的.css文件。 （然后我可以替换远程的那个）。

我尝试过查看临时位置，然后选择文件＆gt; 保存... 并在Firefox上尝试输出选项，但我还没找到方法。

编辑2： 官方讨论组有a lot of questions，但没有答案。

Answer 1

现在已经有相当长的一段时间了 当你用萤火虫进行瞬间自由式滑行时，你会感到胆怯 意外重装或什么......

出于我的意图和目的，我终于找到了工具....： FireDiff 。

它为你提供了一个新标签，可能是一些奇怪的David Bowie引用，称为“变化”; 这不仅可以让你看到/保存什么萤火虫，我。即你，一直在做，
但也可以选择跟踪页面本身所做的更改....如果它和/或你是如此倾向。

非常感谢不必重新打字，或重新想象，然后重新打字，我制作的每个 css规则......

Here是指向开发者的链接（不要因首次出现而被贬低，也可以直接前往the Mozilla Add-On repository。

Answer 2

我到这里找到了这个功能，也就是说，能够将已编辑的CSS属性保存回原始文件（在我的本地开发机器上）。不幸的是，经过大量搜索而没有找到任何符合我需要的东西（好吧，有CSS Updater但是你必须注册并且这是付费的扩展......）我放弃了Firefox + Firebug并为Google寻找类似的东西铬。猜猜是什么...我刚发现这篇很棒的帖子显示了一种很好的方式来实现这一点（内置于Chrome中 - 不需要额外的扩展）：

Change CSS and SAVE on local file system using Chrome Developer Tools

我现在尝试了它，突出了改变的线条。只需单击“保存”即可完成！ ：）

以下是解释此内容的视频及其他内容：Google I/O 2011: Chrome Dev Tools Reloaded

我希望在编辑CSS文件时更改浏览器无关紧要。我现在已经做了改变，但我真的很想将这个功能内置到Firebug中。 ：）

---

[更新1]

今天我刚刚看到这个视频：Firefox CSS live edit in Sublimetext (work in progress)看起来很有希望。

[更新2]

如果您恰好在Visual Studio 2013上使用Web Essentials，则可以自动同步CSS，如本视频所示：

Web Essentials: Browser tools integration

Answer 3

Web Developer add-on让您保存编辑内容。我想将Firebug的编辑与Web Developer的Save功能结合起来。

使用“保存”按钮（点击CSS菜单 - ＆gt;编辑CSS）将修改后的CSS保存到磁盘。

推荐：使用“ Stick ”按钮可防止在更改用于进行其他浏览的标签页时丢失更改。如果可能，只使用一个选项卡进行编辑，其他firefox窗口进行相关搜索，webmail等。

Answer 4

我刚刚在mozilla插件沙箱中发布了一个 firebug插件，这可能会完全符合您的要求： https://addons.mozilla.org/en/firefox/addon/52365/

实际上将“触摸的”css文件按需保存到您的Web服务器（通过与单文件webservice php脚本进行通信）。

文档可以在我的主页或插件页面上找到

我会感谢任何测试，错误报告，评论，评级，对此的讨论，因为它仍处于早期测试阶段，但应该已经正常工作。

Answer 5

CSS-X-Fire

我很惊讶它还没有列入这个问题，但可能是因为它是新的并且作者没有时间来推广它。

它被称为 CSS-X-Fire ，它是JetBrains系列IDE的插件：IntelliJ IDEA, PHPWebStorm, PyCharm, WebStorm, RubyMine。

工作原理：安装其中一个IDE并配置部署（支持FTP和SCP）。这样您就可以与服务器保持同步。

在此之后安装此插件。当它启动时，它会告诉你他将为firefox安装一个插件，以便在Firebug和IDE之间进行集成。如果无法安装插件，只需使用drag-n-drop技术进行安装即可。

安装后，它将跟踪Firebug中的所有更改，您只需在IDE中单击即可应用它们。

FireFile

FireFile是一种替代方案，需要您向服务器端添加一个小的php文件，以便能够上传修改后的CSS。

Answer 6

你可以用firebug将fireclipse链接到eclipse，然后从eclipse中保存文件

Answer 7

我认为你最接近的是进入Firebug中的编辑模式并复制和粘贴CSS文件的内容。

Answer 8

我们刚刚介绍了Backfire，这是一个开源的javascript引擎，允许您将Firebug和Webkit检查器中的CSS更改保存到服务器。该库包含一个示例C＃实现，该实现了如何将传入的更改保存到CSS中。

这是一篇关于它是如何工作的博客文章： http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/

以下是Google代码托管的代码： http://code.google.com/p/backfire/

Answer 9

我知道这不能解答您的问题，但令人惊讶的是，Internet Explorer 8的Firebug克隆“开发人员工具栏”（可通过​​F12访问）提供“保存html”选项。此函数将当前DOM保存到本地文件，这意味着如果以某种方式编辑DOM，例如通过在某处添加样式属性，这也将被保存。

如果你像使用Firebug一样乱用CSS，这并不是特别有用，但是朝着正确的方向迈出了一步。

Answer 10

我提出了一个涉及Firebug和FireFTP组合的解决方案，以及在本地运行网站时直接访问本地文件系统的代码。

以下是方案：

在远程计算机上托管的网站上工作

在这种情况下，您将提供FTP详细信息以及CSS / HTML / Javascript的位置，然后Firebug会在您保存更改时更新这些文件。它甚至可以找到文件本身，然后提示您验证它是否具有正确的文件。如果文件名是唯一的，那应该不是问题。

在本地计算机上运行的网站上工作

在这种情况下，您可以向Firebug提供网站的本地文件夹位置，并使用相同的行为来匹配和验证文件。如有必要，可以通过FireFTP访问本地文件系统。

在没有FTP访问的情况下远程托管的网站上工作

在这种情况下，必须实现像FireFile插件这样的东西。

---

另一个功能是能够保存和打开项目文件，这些文件存储本地文件与其关联的URL之间的映射，以及保存FTP详细信息，如FireFTP所做的那样。

Answer 11

FireFile

创建Firebug是为了检测不是调试器的问题。但是，如果添加将firebug与保存更改集成在一起的新工具，则可以保存更改。它是FireFile，请点击这里 http://thelistoflist.blogspot.com/2010/04/how-to-save-change-you-make-in-firebug.html

FireFile通过向服务器端添加一个小的PHP文件来提供所需的功能。

Answer 12

我是CSS-X-Fire的作者，Sorin Sbarnea也在这篇帖子中发表了这篇文章。猜猜我有点晚了;）

CSS-X-Fire将Firebug中的CSS属性更改发送到可以应用或丢弃更改的IDE。

此解决方案与大多数其他现有工具相比有几个优点，这些工具只知道浏览器下载的文件名和内容（请参阅原始帖子中的NickFitz评论）。

场景1：您有一个网站（项目），其中包含一些主题，用户可以从中选择。每个主题都有自己的CSS文件，但Firebug只知道一个，当前的一个。 CSS-X-Fire将检测项目中所有匹配的选择器，并让您决定应该修改哪个。

场景2：Web项目包含在编译时或部署期间创建的样式表。它们可能与多个文件合并，文件名可能会更改。 CSS-X-Fire不关心文件的名称，它只处理CSS选择器名称及其属性。

以上是CSS-X-Fire擅长的场景示例。由于它与源文件一起工作，并且知道语言结构，因此它也有助于查找Firebug，跳转代码等未知的重复项。

CSS-X-Fire是Apache 2许可下的开源软件。 项目主页：http://code.google.com/p/css-x-fire/

Answer 13

使用Firefox Web Developer工具栏中的CSS编辑器：

http://chrispederick.com/work/web-developer/

与Firebug一起使用它有足够的好东西，它可以让你将CSS保存到文本文件中。

Answer 14

由于Firebug无法在您的服务器上运行，而是从网站上获取CSS并将其存储在本地，并向您显示包含这些本地更改的网站。

Answer 15

使用逆火。

http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/

这是一个开源解决方案，可以将CSS更改发送回服务器并保存。

Backfire使用单个javascript文件，源代码包具有可运行的.NET服务器实现示例，可以轻松移植到其他平台。

Answer 16

我也永远遇到了这个问题，并最终决定我们不应该在Web检查器中编辑内容并为其构建一些内容（https://github.com/viatropos/design.io）。

更好的解决方案：

  

当您在文本编辑器中按 时，浏览器会自动反映CSS更改而不重新加载。

我们在网络检查器中编辑css的主要原因（我使用webkit，但FireBug是相同的）是因为我们需要进行小的调整，重新加载页面需要很长时间。

这种方法存在两个主要问题。首先，您可以编辑可能没有id选择器的单个元素。因此，即使您能够从Web检查器复制/粘贴生成的CSS，也必须生成id来确定css的范围。类似的东西：

#element-127 {
  background: red;
}

这会让你的css变得一团糟。

您可以通过仅更改现有选择器的样式（下面的webkit检查器图像中的.space类选择器）来解决这个问题。

尽管如此，第二个问题。这个东西的界面非常粗糙，很难做出很大的改变 - 比如你想尝试真正快速地将这块css复制到这个地方，或者其他什么。

我宁愿坚持使用TextMate。

理想的做法是在文本编辑器中编写CSS并让浏览器反映更改而不重新加载页面。通过这种方式，当你进行一些小改动时，你就会编写最终的CSS。

下一个级别是使用动态CSS语言编写，如Stylus，Less，SCSS等，并使用生成的CSS更新浏览器。通过这种方式，您可以开始创建像box-shadow()这样的混合，从而抽象出Web检查员绝对无法做到的复杂性。

有一些事情可以做到这一点，但在我看来并没有真正简化它。

• LiveReload：当您按保存时，将css推送到浏览器而不刷新，但是it's a mac app，因此很难自定义。
• CodeKit：也是一个mac应用，但每次保存时都会刷新浏览器。

没有能力轻松定制这些工作的方式是我不使用它们的主要原因。

我专门将https://github.com/viatropos/design.io放在一起解决了这个问题，并且这样做：

1. 浏览器会在您保存时反映css / js / html / etc，而无需重新加载页面
2. 它可以处理任何模板/语言/框架（Stylus，Less，CoffeeScript，Jade，Haml等）
3. 它是用JavaScript编写的，你可以用JavaScript快速拼接扩展。

这样，当你需要对CSS做一些小改动时，你可以说，设置背景颜色，按保存，看到不，不完全，调整色调10，保存，不，调整5，保存，看起来不错。

它的工作方式是观察保存文件（在操作系统级别），处理文件（这是扩展工作的地方），然后通过websockets将数据推送到浏览器，然后处理（客户端的扩展名。）

不要插电或任何东西，但我在这个问题上挣扎了很长时间。

希望有所帮助。

Answer 17

Firebug适用于计算 CSS（通过在文件中使用CSS并应用继承等以及使用JavaScript进行的更改而获得的CSS）。这意味着您可能无法直接使用它来包含在HTML文件中，这是特定于浏览器/版本的（除非您只关心Firefox）。另一方面，它跟踪原始内容和计算内容......我认为将一些JS添加到Firebug以便能够将CSS导出到文本文件中应该不是很困难。

Answer 18

您可以编写自己的服务器脚本文件，该文件采用文件名参数和内容参数。

服务器脚本将找到所请求的文件，并用新文件替换其内容。

编写利用firebug信息并检索有用数据的Javascript将是棘手的部分。

我个人宁愿让firebug的开发团队提供一个功能，对他们来说应该不会太难。

最后，Ajax将文件名/内容对发送到您创建的php文件。

Answer 19

我想知道为什么我不能选择并复制我眼前的文字。特别是当别人说你可以“选择和复制”时。事实证明你可以，你只需要开始任何文本的拖动外部（即在文本的上方或左边的阴沟中），就像任何mousedown一样 - 是否它是一个单击或拖动 - 任何文本立即调用属性编辑器。您也可以单击外部文本以获取光标（即使它并不总是可见），然后您可以使用箭头键移动光标并选择文本。
  不幸的是，复制到剪贴板的文本没有任何缩进，但至少可以避免手动转录CSS文件的全部内容。只需让你的差异程序在与原文进行比较时忽略空格的变化。

Answer 20

引自the Firebug FAQ：

  

编辑页面

     

  

• 我可以将我对网页所做的更改保存到源代码吗？

       

  现在你不能。正如John J. Barton在新闻组写道：

       

  在Firebug中编辑有点像从餐馆三明治中取出泡菜并添加芥末：您可以享受到结果，但餐厅的下一位顾客仍然会得到泡菜而且没有芥末。

       

  这是一个长期要求的功能，所以有一天它可以直接从Firebug获得。同时，你可以尝试Firediff，这是Kevin Decker对firebug的扩展。

  

• 如何在firebug中输出对网站的CSS所做的所有更改？

       

  这是Kevin Decker的Firediff中实现的功能。

  

Answer 21

这是部分解决方案。进行更改后，单击指向相关文件的链接之一。这是原始文件，因此您必须刷新文件，该文件位于firebug窗格右上方的选项菜单按钮下。现在你有了修改过的css页面，你可以复制它。糊。显然，您必须为每个css文件执行此操作。

编辑：看起来Mark Biek的版本更快

Answer 22

“编辑”页面的一种非常简单的方法是通过互联网浏览器访问该网站。将页面仅以html格式保存到桌面上。转到桌面并右键单击新的网页文件并选择打开，选择记事本并从那里编辑页面，如果您知道HTML将很容易。完成所有编辑后，保存文件并重新打开网页，如果正确完成，更改应该在那里。然后，您可以使用新编辑的页面并将其导出或复制到远程位置

Answer 23

实际上Firebug是一个调试和分析工具：不是编辑器，显然不是一个编辑器。另一个原因已经提到：如何在调试网页时更改存储在服务器上的CSS？