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

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

有谁想出更好的解决方案？

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

Firebug仅使用从服务器下载的.css文件Firefox，它确切地知道正在编辑哪些文件中的行。我看不到为什么没有“导出”或“保存”选项，该选项允许您存储新的.css文件。（然后我可以将其替换为）。

我尝试查找临时位置，然后选择“ 文件” >“ 保存...”，并尝试在Firefox上使用输出选项，但是我仍然没有找到解决方法。

编辑2： 官方讨论小组有很多问题，但没有答案。

我到这里正是在寻找该功能，也就是说，能够将编辑后的CSS属性保存回原始文件（在本地开发计算机上）。不幸的是，在进行了大量搜索之后，没有找到任何适合我的需求（确定，有CSS Updater，但是您必须注册，并且这是一个付费扩展...），我放弃了Firefox + Firebug，并为Google Chrome寻找了类似的东西。猜猜是什么...我刚刚找到了这篇很棒的文章，它展示了一种很好的方法来使其工作（内置于Chrome-无需其他扩展程序）：

使用Chrome开发者工具更改CSS和SAVE在本地文件系统上

我现在尝试了一下，突出显示已更改的行效果很好。只需单击“保存”，就完成了！:)

以下是解释此内容的视频，以及更多内容：Google I / O 2011：Chrome开发工具重新加载

我希望这对您在编辑CSS文件时更改浏览器无关紧要。我现在已经进行了更改，但是我真的很想将此功能内置到Firebug中。:)

[更新1]

今天我刚刚看了这段视频：Sublimetext中的Firefox CSS实时编辑（正在进行中）看起来确实很有希望。

[更新2]

如果您恰好将Visual Studio 2013与Web Essentials结合使用，则可以自动同步CSS，如以下视频所示：

Web Essentials：浏览器工具集成

现在已经有一段时间想知道同样
的事情了，只是当您因使用萤火虫的瞬间自由式CSS而被
意外重载或其他东西炸毁时，只是绞尽脑汁。

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

它为您提供了一个新标签，可能是David Bowie的一些怪异参考，称为“更改”。这不仅使您可以查看/保存萤火虫（即您在做什么），
还可以选择跟踪页面本身所做的更改....如果页面和/或您如此倾向于。

非常感谢不必重新键入，重新想象然后重新重新键入我制作的每个 CSS规则...

这是开发人员的链接（不要被初次出现而感到失望，也许还可以直接进入Mozilla Add-On存储库。

在Web开发附加让您保存您的修改。我想将Firebug的编辑与Web Developer的“保存”功能结合在一起。

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

建议：在更改选项卡进行其他浏览时，请使用“ 操纵杆 ”按钮以防止丢失所做的更改。如果可能，请仅使用一个选项卡进行编辑，而其他Firefox窗口则进行相关搜索，网络邮件等。

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

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

可以在我的主页或附加页面上找到文档

我希望对它进行任何测试，错误报告，评论，评级和讨论，因为它仍处于测试阶段，但应该可以正常工作。

CSS-X-Fire

令我感到惊讶的是，它仍然没有被列出来，但可能是因为它是新事物，而作者还没有时间进行推广。

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

工作原理：安装这些IDE之一并配置部署（支持FTP和SCP）。这将使您与服务器保持同步。

在此之后，您将安装此插件。启动时，它会告诉您他将为Firefox安装一个插件，以便在Firebug和IDE之间进行集成。如果无法安装该插件，则只需使用拖放技术即可安装它。

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

火文件

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

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

我认为最接近的方法是在Firebug中进入“编辑”模式，然后复制并粘贴CSS文件的内容。

我们刚刚介绍了Backfire，这是一个开放源代码的JavaScript引擎，可让您将Firebug和Webkit检查器中所做的CSS更改保存到服务器。该库包含一个有关如何将传入的更改保存到CSS的示例C＃实现。

这是有关其工作原理的博客文章：http : //blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/

这是托管在Google代码中的代码：http : //code.google.com/p/backfire/

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

如果您像其他人一样使用Firebug弄乱CSS，这不是特别有用，但是朝正确的方向迈出了一步。

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

以下是方案：

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

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

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

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

在没有FTP访问权限的远程托管网站上工作

在这种情况下，将必须实现类似FireFile附件的功能。

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

我是CSS-X-Fire的作者，索林·斯巴尼亚（Sorin Sbarnea）也曾在此线程中发贴。猜猜我来晚了;）

CSS-X-Fire将CSS属性更改从Firebug发射到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/

火文件

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

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

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

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

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

它有足够的好东西可以与Firebug结合使用，并且可以将CSS保存到文本文件中。

使用逆火。

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

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

Backfire使用单个javascript文件，并且源代码包中有一个有效的.NET服务器实现示例，可轻松移植到其他平台。

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

更好的解决方案：

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

我们在Web检查器中编辑css的主要原因（我使用webkit，但FireBug沿同一行）是因为我们需要进行一些小的调整，并且重新加载页面花费的时间太长。

这种方法有两个主要问题。首先，允许您编辑可能没有id选择器的单个元素。因此，即使您能够从Web检查器复制/粘贴生成的CSS，它也必须生成一个id范围为CSS的CSS。就像是：

#element-127 {
  background: red;
}

那将使您的CSS一团糟。

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

尽管如此，第二个问题。那个东西的界面非常粗糙，很难进行大的更改-就像您要尝试真正地将此CSS块快速复制到此位置（或其他任何操作）一样。

我宁愿坚持使用TextMate。

理想的做法是只在您的文本编辑器中编写CSS，并使浏览器反映所做的更改而无需重新加载页面。这样，在进行一些小的更改时，您将编写最终的CSS。

下一个级别将是使用动态CSS语言（例如Stylus，Less，SCSS等）编写代码，并使用生成的CSS更新浏览器。这样，您就可以开始创建像这样的mixin box-shadow()来抽象复杂性，这是Web检查员绝对无法做到的。

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

• LiveReload：当您按保存时，将CSS推送到浏览器而不刷新，但这是一个Mac应用程序，因此很难进行自定义。
• CodeKit：也是一个Mac应用程序，但是每次保存时都会刷新浏览器。

无法轻松自定义这些工作方式的能力是我不使用它们的主要原因。

我专门整理了https://github.com/viatropos/design.io来解决这个问题，并做到了：

1. 保存后，浏览器会随时显示css / js / html / etc，而无需重新加载页面
2. 它可以处理任何模板/语言/框架（手写笔，Less，CoffeeScript，Jade，Haml等）
3. 它是用JavaScript编写的，您可以在JavaScript中快速快速地合并扩展。

这样，当您需要对CSS进行一些小的更改时，您可以说，设置背景色，按Save，看到不完全，不完全，将色调调整10，保存，不完全，按5调整，保存看起来不错。

它的工作方式是通过观察何时保存文件（在OS级别），处理文件（这是扩展程序的工作位置）以及通过websocket将数据推送到浏览器中来进行处理，然后由websocket处理（扩展名）。

没有插上什么，但是我在这个问题上挣扎了很长时间。

希望有帮助。

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

我想知道为什么我不能很好地选择和复制文本。特别是当别人说你可以“选择并复制”时。事实证明您可以，只要在任何文本上按下任意鼠标（无论是单击还是拖动），就可以开始拖动任何文本（即在文本上方或左侧的装订线）之外立即拖动属性编辑。您也可以单击外部文本以获取一个光标（即使它并不总是可见的），然后可以使用箭头键四处移动并以这种方式选择文本。
不幸的是，复制到剪贴板的文本没有任何缩进，但是至少它可以避免手动转录CSS文件的全部内容。与原始程序比较时，只需让您的差异程序忽略空白中的更改即可。

您可以编写自己的服务器脚本文件，该文件带有filename参数和content参数。

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

编写可利用firebug信息并检索有用数据的Javascript会很棘手。

我个人宁愿要求Firebug的开发人员小组提供功能，对他们来说应该不难。

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

引自Firebug常见问题解答：

编辑页面

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

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

  在Firebug中进行编辑有点像从餐厅三明治中取出酱菜，然后在餐厅三明治中加入芥末酱：您可以享受这里的效果，但是餐厅的下一位顾客仍然会得到酱菜且没有芥末酱。

  这是一项长期要求的功能，因此有一天它将直接从Firebug中获得。同时，您可以尝试Firediff，这是Kevin Decker的firebug扩展。

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

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

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

编辑：看起来马克·比耶克有一个更快的版本

一种“编辑”页面的非常简单的方法是通过Internet浏览器进入该网站。将页面另存为html到您的桌面上。转到桌面，右键单击新的网页文件，然后选择“打开方式”，选择“记事本”，然后从此处编辑页面（如果知道html的话）。完成所有编辑后，保存文件并重新打开网页，如果正确完成，则更改应在其中。然后，您可以使用新编辑的页面并将其导出或复制到您的远程位置

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