143

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

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

有没有人提出更好的解决方案?

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

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

我尝试在临时位置查找,然后选择File > Save...并尝试 Firefox 上的输出选项,但我仍然没有找到方法。

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

4

23 回答 23

104

很长一段时间以来一直在想同样
的事情,当您使用 firebug 的即时自由式 css 因
意外重新加载或诸如此类的事情而被炸成碎片时,您会感到非常痛苦......

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

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

非常感谢我不必重新输入,或重新想象然后重新输入,我制定的每条css 规则......

是开发人员的链接(不要因为第一次出现而贬低,也许还不如直接访问Mozilla Add-On 存储库

于 2009-12-16T15:48:47.157 回答
27

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

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

在此处输入图像描述

我现在试过了,它很好地突出了改变的线条。只需单击保存即可完成!:)

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

如果您在编辑 CSS 文件时更改浏览器并不重要,我希望它会有所帮助。我现在已经做出了改变,但我真的很想把这个功能内置到 Firebug 中。:)


[更新 1]

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

[更新 2]

如果您碰巧将Visual Studio 2013Web Essentials一起使用,您将能够自动同步 CSS,如本视频所示:

Web Essentials:浏览器工具集成

于 2012-07-21T16:05:58.933 回答
15

Web Developer 插件可让您保存您的编辑。我想将 Firebug 的编辑与 Web Developer 的保存功能结合起来。

替代文字
(来源:mozilla.org

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

建议:当您更改标签以进行其他浏览时,请使用“粘贴”按钮以防止丢失您的更改。如果可能,仅使用一个选项卡进行编辑,其他 firefox 窗口进行相关搜索、网络邮件等。

于 2008-10-03T21:09:28.233 回答
13

我刚刚在 mozilla 插件沙盒中发布了一个萤火虫插件,它可能完全符合您的要求: https ://addons.mozilla.org/en/firefox/addon/52365/

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

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

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

于 2009-12-02T15:47:41.987 回答
13

CSS-X-火

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

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

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

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

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

IDE 内的 CSS-X-Fire 窗口。

火文件

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

于 2010-09-26T15:29:41.323 回答
10

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

于 2008-10-02T14:50:35.047 回答
9

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

于 2008-10-02T14:48:21.697 回答
7

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

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

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

于 2010-08-31T09:25:02.663 回答
3

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

如果您像每个人一样使用 Firebug 来处理 CSS,这并不是特别有用,但这是朝着正确方向迈出的一步。

于 2009-03-21T23:26:23.257 回答
3

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

以下是场景:

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

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

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

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

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

在这种情况下,必须实施诸如 FireFile 附加组件之类的东西。


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

于 2010-01-20T23:42:06.570 回答
3

火文件

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

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

于 2010-04-09T08:23:47.283 回答
3

我是 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/

于 2010-10-02T14:50:58.003 回答
2

由于 Firebug 不在您的服务器上运行,而是从站点获取 CSS 并将其存储在本地,并向您显示具有这些本地更改的站点。

于 2008-10-02T14:38:49.490 回答
2

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

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

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

于 2008-10-07T13:18:24.923 回答
2

使用逆火。

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

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

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

于 2010-09-03T08:50:37.080 回答
2

我也一直有这个问题,最后决定我们不应该在网络检查器中编辑东西并为它构建一些东西(https://github.com/viatropos/design.io)。

更好的解决方案:

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

我们在 web 检查器中编辑 css 的主要原因(我使用 webkit,但 FireBug 也是如此)是因为我们需要进行一些小的调整,并且重新加载页面需要很长时间。

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

#element-127 {
  background: red;
}

那会让你的CSS变得一团糟。

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

Webkit 检查器

不过,第二个问题。那个东西的界面很粗糙,很难做出大的改变——比如如果你想尝试真正快速地将这个css块复制到这个地方,或者其他什么。

我宁愿坚持使用TextMate。

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

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

有一些东西可以做到这一点,但在我看来,没有什么能真正简化它。

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

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

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

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

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

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

希望有帮助。

于 2011-11-17T22:47:33.730 回答
1

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

于 2008-10-02T14:58:33.810 回答
1

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

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

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

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

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

于 2009-03-19T02:17:31.583 回答
1

我想知道为什么我不能很好地选择并复制我眼前的文字。尤其是当其他人说您可以“选择并复制”时。事实证明你可以,你只需要在任何文本之外(即在文本上方或左侧的排水沟中)开始拖动,因为任何鼠标按下 - 无论是单击还是拖动 - 任何文本都会立即调用该属性编辑。您还可以单击外部文本以获取光标(即使它并不总是可见),然后您可以使用箭头键四处移动并以这种方式选择文本。
不幸的是,复制到剪贴板的文本没有任何缩进,但至少它使您免于手动转录 CSS 文件的全部内容。只需让您的差异程序在与原始程序进行比较时忽略空格的变化。

于 2009-11-10T18:29:12.177 回答
1

引自Firebug 常见问题解答

编辑页面

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

    现在你不能。正如 John J. Barton 在新闻组中所写:

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

    这是一个长期需要的功能,所以有一天它会直接从 Firebug 中获得。同时,您可以尝试Firediff,这是 Kevin Decker 的 firebug 扩展。

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

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

于 2010-11-03T07:23:07.507 回答
0

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

编辑:看起来Mark Biek有一个更快的版本

于 2008-10-02T14:54:39.983 回答
0

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

于 2010-10-23T14:39:10.763 回答
-4

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

于 2008-10-02T14:41:27.503 回答