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

Why can't I save CSS changes in Firebug?

提问by Dean Rather

Firebug is the most convenient tool I've found for editing CSS - so why isn't there a simple "save" option for CSS?

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

I am always finding myself making tweaks in Firebug, then going back to my original .css file and replicating the tweaks.

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

Has anyone come up with a better solution?

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

EDIT:I'm aware the code is stored on a server (in most cases not my own), but I use it when building my own websites.

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

Firebug's just using the .css file Firefox downloaded from the server, it knows precisely what lines in which files it's editing. I can't see why there's not an "export" or "save" option, which allows you to store the new .css file. (Which I could then replace the remote one with).

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

I have tried looking in temporary locations, and choosing File> Save...and experimenting with the output options on Firefox, but I still haven't found a way.

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

EDIT 2:The official discussion group has a lot of questions, but no answers.

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

采纳答案by Leniel Maccaferri

I got here looking exactly for this feature, that is, being able to save edited CSSproperties back to the original file (on my local development machine). Unfortunately after searching a lot and not finding anything that suits my needs (OK, there's CSS Updaterbut you have to register and it's a paid extension...) I gave up on Firefox + Firebug and looked for something similar for Google Chrome. Guess what... I just found this great post that shows a nice way of getting this to work ( built into Chrome - there's no need for additional extensions ):

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

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

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

I tried it now and it works great highlighting the changed lines. Just click Save and you're done! :)

我现在试过了，它在突出显示更改的线条时效果很好。只需单击“保存”即可完成！:)

Here's a video explaining this and much more: Google I/O 2011: Chrome Dev Tools Reloaded

这是解释这一点以及更多内容的视频：Google I/O 2011：Chrome Dev Tools Reloaded

I hope it helps if it doesn't matter to you changing browser while editing your CSS files. I made the change already for now, but I would really love to have this functionality built into Firebug. :)

如果您在编辑 CSS 文件时更改浏览器并不重要，我希望它会有所帮助。我现在已经进行了更改，但我真的很想将此功能内置到 Firebug 中。:)

---

---

[Update 1]

[更新1]

Today I just saw this video: Firefox CSS live edit in Sublimetext (work in progress)Looks promising indeed.

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

[Update 2]

[更新2]

If you happen to be using Visual Studio 2013with Web Essentialsyou'll be able to sync CSS automagically as shown in this video:

如果您碰巧将Visual Studio 2013与Web Essentials 结合使用，您将能够自动同步 CSS，如本视频所示：

Web Essentials: Browser tools integration

Web Essentials：浏览器工具集成

回答by Morten Bergfall

Been wondering the same for quite some time now,
just gut-wrenching when your in-the-moment-freestyle-css'ing with firebug gets blown to bits by
an accidental reload or whatnot....

很长一段时间以来一直想知道同样
的事情，当您使用 firebug 的即时自由式 css 被
意外重新加载或诸如此类的东西炸成碎片时，这让我感到非常痛苦......

For my intents and purposes, I've finally found the tool.... : FireDiff.

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

It gives you a new tab, probably some weird David Bowie reference, called "changes"; which not only allows you to see/save what firebug, i. e. you, have been doing,
but also optionally track changes made by the page itself....if it and/or you are so inclined.

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

So thankful not having to re-type, or re-imagine and then re-re-type, everycss rule I make...

谢天谢地，不必重新输入，或重新想象然后重新输入，我制定的每条css 规则......

Hereis a link to the developer (don't be disparaged by first appearance, mayhap just as well head straight over to the Mozilla Add-On repository.

这是开发人员的链接（不要因为第一次出现而被贬低，也许也可以直接转到Mozilla Add-On 存储库。

回答by Leniel Maccaferri

The Web Developer add-onlet's you save your edits. I'd like to combine the editing of Firebug with the Save feature of Web Developer.

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

Use the "Save" button (click CSS menu -> Edit CSS) to save the modified CSS to disk.

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

Recomendation: Use the "Stick" button to prevent losing your changes when you change the tab for doing other browsing. If it is possible, use only one tab to do the edit and other firefox window the related searches, webmail, etc.

建议：当您更改标签以进行其他浏览时，使用“棒”按钮以防止丢失您的更改。如果可能，只使用一个选项卡进行编辑和其他 Firefox 窗口相关搜索、网络邮件等。

回答by sorin

CSS-X-Fire

CSS-X-火

I'm surprised that it still not listed to this question, but probably because is new and the author didn't have time to promote it yet.

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

It is called CSS-X-Fireand it is a plugin for JetBrains series of IDEs : IntelliJ IDEA, PHPWebStorm, PyCharm, WebStorm, RubyMine.

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

How it works: You install one of these IDEs and configure the deployment (supports FTP and SCP). This will allow you to stay in sync with the server.

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

After this you install this plugin. When it starts it will ask tell you that he will install a plugin for Firefox, in order to do the integration between Firebug and the IDE. If it fails to install the plugin, just use the drag-n-drop technique to install it.

在此之后，您安装此插件。当它启动时，它会询问你他将为 Firefox 安装一个插件，以便在 Firebug 和 IDE 之间进行集成。如果安装插件失败，只需使用拖放技术安装它。

Once installed it will track all your changes from Firebug and you will be able to apply them with a simple click inside de IDE.

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

FireFile

火文件

FireFile is an alternative that requires you to add one small php file to the server side in order to be able to upload the modified css.

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

回答by Tobias Strebitzer

I just released a firebug addonat the mozilla addon sandbox which might quite do what you want: https://addons.mozilla.org/en/firefox/addon/52365/

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

It actually saves the "touched" css files on demand to your web server(by communication with a one-file webservice php script).

它实际上根据需要将“触及”的 css 文件保存到您的 Web 服务器（通过与单文件 webservice php 脚本通信）。

Documentationcan be found at my homepage or on the addon page

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

I would appreciate any testing, bug reports, comments, ratings, discussion on this, as it's still in early beta, but should already work fine.

我将不胜感激任何对此的测试、错误报告、评论、评级和讨论，因为它仍处于早期测试阶段，但应该已经可以正常工作了。

回答by Craig Angus

You could link firebugto eclipse with fireclipseand then save the file from eclipse

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

回答by Mark Biek

I think the closest you're going to get is by going into Edit mode in Firebug and copying and pasting the contents of the CSS file.

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

回答by Rahul

We just introduced Backfire, an open source javascript engine that allows you to save CSS changes made in Firebug and Webkit inspector to the server. The library includes an example C# implementation of how to save the incoming changes to your CSS.

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

Here's a blog post about how it works: http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/

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

And here's the code hosted at Google Code: http://code.google.com/p/backfire/

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

回答by Ronnie Kolehmainen

I am the author of CSS-X-Fire which Sorin Sbarnea also kindly posted about in this thread. Guess I'm a bit late ;)

我是 CSS-X-Fire 的作者，Sorin Sbarnea 也在这个帖子中友好地发布了它。猜猜我有点晚了;)

CSS-X-Fire emits CSS property changes from Firebug to the IDE where the changes can be applied or discarded.

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

There are a couple of advantages with this solution over most of the other existing tools which only know know about the filenames and the content downloaded by the browser (see NickFitz comment in the original post).

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

Scenario 1: You have a website (project) which has a handful of themes from which the user can select from. Each theme has its own CSS file but only one is known to Firebug, the current one. CSS-X-Fire will detect all matching selectors in the project and let you decide which should be modified.

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

Scenario 2: The web project has stylesheets created compile-time or during deployment. They might be merged from several files and the file names may change. CSS-X-Fire doesn't care of the names of the files, it only deals with CSS selector names and their properties.

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

Above are examples of scenarios where CSS-X-Fire excels. Since it works with the source files, and knows about the language structure, it also helps to find duplicates not known to Firebug, jump-to-code, etcetera.

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

CSS-X-Fire is open source under the Apache 2 license. Project home: http://code.google.com/p/css-x-fire/

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

回答by Jonathan Parker

I propose a solution that involves a combination of Firebug and FireFTP as well as code that directly accesses the local file system when running a website locally.

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

Here are the scenarios:

以下是场景：

Working on a website that is hosted on a remote machine

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

In this case you would provide the FTP details and the location of the CSS/HTML/Javascript and Firebug would then update these files when you save your changes. It may even be able to locate the files itself and then prompt you to verify that it has the correct file. If file names are unique it shouldn't be a problem.

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

Working on a website running on your local machine

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

In this case you could provide Firebug with the local folder location of the website and the same behaviour would be used to match and verify the files. The access to the local file system could be performed through FireFTP if necessary.

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

Working on a website hosted remotely without FTP access

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

In this case something like the FireFile add-on would have to be implemented.

在这种情况下，必须实施诸如 FireFile 插件之类的东西。

---

---

An additional feature would be the ability to save and open project files that store the mappings between the local files and the URLs they are associated with as well as saving the FTP details as FireFTP already does.

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