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

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

我总是发现自己在 Firebug 中做了一些调整,然后回到原来的版本。Css 文件和复制调整。

有人想出更好的解决办法了吗?

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

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

我尝试过在临时位置查找,选择 档案 > 救..。,并在 Firefox 上尝试输出选项,但我仍然没有找到一种方法。

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

63683 次浏览

因为 Firebug 不能在您的服务器上工作,而是从站点获取 CSS 并将其存储在本地,然后向您显示带有这些本地更改的站点。

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

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

您可以用 火灾纵火犯链接到 eclipse,然后从 eclipse 中保存文件

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

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

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

Web 开发器附件允许您保存编辑。我想把 Firebug 的编辑和 WebDeveloper 的 Save 特性结合起来。

alt text
(资料来源: Mozilla.org)

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

建议 : 使用“ 棍子”按钮,以防在更改选项卡以进行其他浏览时丢失您的更改。如果可能的话,只使用一个标签进行编辑和其他火狐窗口的相关搜索,网页邮件等。

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

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

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

您可以编写自己的服务器脚本文件,其中包含一个文件名参数和一个内容参数。

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

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

我个人更愿意让 Firebug 的开发团队提供一个函数,这对他们来说应该不会太难。

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

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

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

我想知道为什么我不能很好地选择和复制我眼前的文本。特别是当其他人说你可以只是“选择和复制”。事实证明,如果你是 可以,你只需要开始拖动任何文本的 在外面(比如在文本的左上角或者右上角) ,任何鼠标向下——无论是点击还是拖动——都会立即调用属性编辑器。您还可以单击外部文本以获得光标(即使它并不总是可见) ,然后您可以使用箭头键移动并以这种方式选择文本。
不幸的是,复制到剪贴板上的文本没有任何缩进,但至少可以避免手动抄写 CSS 文件的全部内容。只要让你的 diff 程序在与原始程序比较时忽略空格的变化就可以了。

我刚刚在 mozilla 插件沙盒上发布了一个 纵火狂 Adon,它可能会完全满足你的需求: Https://addons.mozilla.org/en/firefox/addon/52365/

它实际上是 根据需要将“触摸”的 css 文件保存到 Web 服务器(通过与一个只有一个文件的 webservice php 脚本进行通信)。

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

我会感激任何测试,错误报告,评论,评级,讨论,因为它仍然在早期测试,但应该已经工作良好。

我也一直在想这个问题,
当你和纵火犯的即兴表演被炸成碎片的时候,真是痛彻心扉
意外上膛什么的。

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

它给你一个新的标签,可能是一些奇怪的大卫鲍伊参考,称为“变化”; 它不仅可以让你看到/保存纵火犯,即你,一直在做什么,
还可以选择跟踪页面本身所做的更改... ... 如果您愿意的话。

所以感谢没有重新类型,或重新想象,然后重新类型,每个 css 规则,我做..。

这里 是一个到开发者的链接(不要因为第一次出现而被贬低,也许直接转到 Mozilla 插件库也不错。

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

下面是一些情景:

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

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

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

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

在远程托管的网站上工作,无法访问 FTP

在这种情况下,类似 FireFile 附加组件的东西必须实现。


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

火文件

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

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

我们刚刚介绍了 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/

使用回火。

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

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

Backfire 使用一个 javascript 文件,并且源代码包有一个工作的。NET 服务器实现示例,该示例易于移植到其他平台。

CSS-X-Fire

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

它被称为 一个 href = “ http://code.google.com/p/CSS-X-Fire/”rel = “ nofollow noReferrer”> CSS-X-Fire ,是 JetBrains 系列 IDE 的一个插件: IntelliJ IDEA,PHPWebStorm,PyCharm,WebStorm,RubyMine

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

然后安装这个插件。当它开始的时候,它会告诉你,他将为 Firefox 安装一个插件,以便在 Firebug 和 IDE 之间进行集成。如果插件安装失败,只需要使用拖放技术来安装它。

一旦安装,它将跟踪所有的变化,从 Firebug,你将能够应用它们与一个简单的点击 IDE 内部。

CSS-X-Fire window inside the IDE.

火文件

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

我是 CSS-X-Fire 的作者,索林 · 斯巴尼亚也在这个帖子中友好地发表了这篇文章。我想我来晚了一点;)

CSS-X-Fire 发出 CSS 属性更改,从 Firebug 到 IDE,在 IDE 中可以应用或丢弃这些更改。

这个解决方案比其他大多数只知道文件名和浏览器下载内容的现有工具有一些优势(见 NickFitz 在原文中的评论)。

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

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

以上是 CSS-X-Fire 擅长的场景示例。由于它与源文件一起工作,并且知道语言结构,它还有助于找到 Firebug 不知道的副本,跳转到代码,等等。

CSS-X-Fire 在 Apache2许可下是开源的。 项目主页: http://code.google.com/p/css-x-fire/rel = “ nofollow”> http://code.google.com/p/css-x-fire/

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

引自 Firebug 常见问题解答:

编辑页

  • 我可以保存到源代码的更改,我看到的网页?

    正如约翰 · J · 巴顿(John J. Barton)在新闻组上所写的:

    在 Firebug 中编辑有点像从餐厅的三明治中取出腌黄瓜并加入芥末: 你可以享受这个结果,但是餐厅的下一位顾客仍然会得到腌黄瓜而没有芥末。

    这是一个长期需求的功能,所以有一天它将可以直接从 Firebug 获得。同时,你可以尝试 费尔德里夫,这是 Kevin Decker 的 Firebug 扩展。

  • 我怎样才能输出所有的变化,已经作出了一个网站的 CSS 在 Firebug?

    这是 Kevin Decker 的 费尔德里夫中实现的一个特性。

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

一个更好的解决方案:

当您按下保存 在你的文本编辑器里时,浏览器会自动反映 CSS 更改 没有重新装弹

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

这种方法存在两个主要问题。首先,允许编辑可能没有 id选择器的单个元素。因此,即使您能够从 Web 检查器复制/粘贴生成的 CSS,它也必须生成一个 id来确定 CSS 的范围。比如:

#element-127 {
background: red;
}

那会把你的犯罪现场搞得一团糟。

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

Webkit Inspector

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

我还是继续玩 TextMate 吧。

理想的做法是在文本编辑器 并让浏览器在不重新加载页面的情况下反映更改中编写 CSS。这样你就可以在做小改动的时候写出最终的 css 了。

下一个级别是使用动态 CSS 语言编写,比如触笔,更少,SCSS 等,并用生成的 CSS 更新浏览器。通过这种方式,你可以开始创建像 box-shadow()这样的混合器,抽象出复杂性,这是 web 检查员绝对做不到的。

有一些东西可以做到这一点,但在我看来没有什么真正的流线型。

  • LiveRelload : 当你按下保存键时,不刷新 css,而是按下 这是个 Mac 应用键,所以很难自定义。
  • CodeKit : 也是一个 Mac 应用程序,但每次保存时都会刷新浏览器。

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

为了解决这个问题,我特意将 https://github.com/viatropos/design.io放在一起,并使之成为:

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

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

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

不是我要插管什么的,但是我为这个问题挣扎了很久。

希望能帮上忙。

我来这里正是为了寻找这个特性,即能够将编辑后的 CSS属性保存回原始文件(在我的本地开发机器上)。不幸的是,在搜索了很多,没有找到任何符合我需要的东西(好吧,有 CSS 更新程序,但你必须注册,它是一个付费的扩展...)之后,我放弃了 Firefox + Firebug,转而为 Google Chrome 寻找类似的东西。你猜怎么着... ... 我刚刚发现了一篇很棒的文章,它展示了一种很好的方法来实现这个功能(内置在 Chrome 中——不需要额外的扩展) :

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

enter image description here

我现在已经试过了,它可以很好地突出显示改变后的行。只要点击保存,你就完成了! :)

这里有一个视频解释这一点和更多: Google I/O 2011: Chrome 开发工具重新加载

如果在编辑 CSS 文件时改变浏览器对你没有影响的话,我希望这会有所帮助。我现在已经做了改变,但是我真的很想把这个功能内置到 Firebug 中。:)


[更新1]

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

[更新2]

如果你碰巧使用 Visual Studio 2013网页基本资料,你可以自动同步 CSS,如下图所示:

Web 要点: 浏览器工具集成