热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

为什么我不能在Firebug中保存CSS更改?-Whycan'tIsaveCSSchangesinFirebug?

FirebugisthemostconvenienttoolIvefoundforeditingCSS-sowhyisntthereasimplesave

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使用的是从服务器上下载的。css文件Firefox,它可以准确地知道要编辑哪些行。我不明白为什么没有一个“导出”或“保存”选项,允许您存储新的.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.

我试过在临时位置查找,并选择File > Save…在Firefox上尝试输出选项,但我还是找不到方法。

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

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

23 个解决方案

#1


27  

I got here looking exactly for this feature, that is, being able to save edited CSS properties 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 Updater but 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,寻找类似谷歌的Chrome浏览器。你猜怎么着……我刚刚发现了这篇很棒的文章,它展示了一种很好的方式来让它工作(内置到Chrome中——不需要额外的扩展):

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

使用Chrome开发工具更改CSS并保存在本地文件系统上

enter image description here

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

这里有一个视频解释这个,还有更多:谷歌I/O 2011: Chrome开发工具重新加载

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.

今天我看到了这个视频:Firefox CSS live edit in Sublimetext(正在开发)看起来确实很有前途。

[Update 2]

(更新2)

If you happen to be using Visual Studio 2013 with Web Essentials you'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:浏览器工具集成。

#2


104  

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 in-the-moment-freestyle-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引用,叫做“改变”;不仅可以让你看到/保存firebug,即你,还一直在做,但选择跟踪更改的页面本身....如果它和/或你如此倾向。

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

感谢您没有重新输入,或者重新想象,然后重新输入,我制定的每一个css规则……

Here is 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插件存储库。

#3


15  

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

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

alt text

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.

Recomendation:使用“Stick”按钮,防止在更改选项卡进行其他浏览时丢失更改。如果可能的话,只使用一个选项卡进行编辑,使用其他firefox窗口进行相关的搜索、webmail等等。

#4


13  

CSS-X-Fire

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

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

It is called CSS-X-Fire and 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中简单地点击一下就能应用它们。

CSS-X-Fire window inside the 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。

#5


13  

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

我刚刚在mozilla addon沙箱中发布了一个firebug addon,它可能会做你想做的事情: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脚本通信)。

Documentation can be found at my homepage or on the addon page

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

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

我非常感谢任何测试,bug报告,评论,评级,关于这个的讨论,因为它仍然处于早期测试阶段,但是应该已经很好了。

#6


10  

You could link firebug to eclipse with fireclipse and then save the file from eclipse

您可以将firebug与eclipse链接到tapestry,然后从eclipse保存文件

#7


9  

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文件的内容。

#8


7  

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.

我们刚刚引入了一个事与愿违的开源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- css- changes-madamebug/

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

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

#9


3  

I know this doesn't answer your question, but surprisingly, Internet Explorer 8's Firebug clone "developer toolbar" (accessible via F12) offers the option to "save html". This function saves the current DOM to a local file, which means that if you edit the DOM somehow, e.g. by adding a style attribute somewhere, this will be saved too.

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

Not particularly useful if you're using Firebug to mess around with CSS like everyone does, but a step in the right direction.

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

#10


3  

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之间的映射,以及保存FTP细节,就像FireFTP已经做的那样。

#11


3  

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、jumpto -code等等的副本。

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/

#12


3  

FireFile

Firebug was created to detect a problem not to be a debugger. but you can save change if you add new tool that integrate firebug with save changes. it is FireFile, click here http://thelistoflist.blogspot.com/2010/04/how-to-save-change-you-make-in-firebug.html.

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

FireFile provide the desired functionality by adding a small PHP file to the server side.

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

#13


2  

Since Firebug is not working on your server but taking the CSS from the site and storing it locally and showing you the site with those local changes.

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

#14


2  

Use the CSS editor in the Firefox Web Developer toolbar:

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

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

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

It's got enough good stuff to use in conjunction with Firebug, and it lets you save your CSS out to a text file.

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

#15


2  

Use Backfire.

使用会适得其反。

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/

It's an open source solution that sends CSS changes back to the server and saves them.

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

Backfire uses a single Javascript file, and the sourcecode package has a working .NET server implementation example that is easily portable to other platforms.

事与愿违使用了一个Javascript文件,并且sourcecode包有一个工作的。net服务器实现示例,很容易移植到其他平台。

#16


2  

I had this problem forever as well, and finally decided that we shouldn't be editing things in the web inspector and built something for it (https://github.com/viatropos/design.io).

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

A better solution:

一个更好的解决方案:

The browser automatically reflects CSS changes without reloading when you press save in your text editor.

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

The main reason we're editing css in the web inspector (I use webkit, but FireBug is along the same lines) is because we need to make small adjustments, and it takes too long to reload the page.

我们在web inspector(我使用webkit,但是FireBug是沿着同一条线编辑css)中编辑css的主要原因是我们需要进行小的调整,重新加载页面需要很长时间。

There are 2 main problems with this approach. First, you're allowed to edit an individual element that may not have an id selector. So even if you were able to copy/paste the generated CSS from the web inspector, it would have to generate an id to scope the css. Something like:

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

#element-127 {
  background: red;
}

That would start making your css a mess.

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

You could get around that by only changing styles for an existing selector (the .space class selector in the webkit inspector image below).

您可以通过只改变现有选择器的样式来解决这个问题(webkit inspector映像中的.space类选择器)。

Webkit Inspector

Still though, the second problem. The interface to that thing is pretty rough, it's hard to make big changes - like if you want to try real quick copying this block of css to this place, or whatever.

尽管如此,第二个问题。这个东西的界面很粗糙,很难做出大的改变——比如如果你想尝试快速复制这个块的css到这个地方,或者别的什么。

I'd rather just stick to TextMate.

我宁愿只听TextMate。

The ideal would be to just write the CSS in your text editor and have the browser reflect the changes without reloading the page. This way you'd be writing your final css as you're making the little changes.

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

The next level would be to write in a dynamic CSS language, like Stylus, Less, SCSS, etc, and have that update the browser with the generated CSS. This way you could start creating mixins like box-shadow(), that abstracted away the complexities, which the web inspector definitely couldn't do.

下一个级别是使用动态CSS语言编写,比如手写笔、Less、SCSS等,并使用生成的CSS更新浏览器。通过这种方式,您可以开始创建像box-shadow()这样的混合器,这样就消除了复杂性,这是web inspector绝对做不到的。

There's a few things out there that kind of do this, but nothing really streamlining it in my opinion.

有一些事情可以做到这一点,但在我看来,没有什么能真正使它变得简洁。

  • LiveReload: pushes css to browser without refreshing when you press save, but it's a mac app, so it'd be difficult to customize.
  • LiveReload:当你按下save时,将css推送到浏览器,但它是一个mac应用程序,所以很难定制。
  • CodeKit: also a mac app, but it refreshes the browser every time you save.
  • CodeKit:也是一款mac应用,但每次保存时都会刷新浏览器。

Not having the ability to easily customize the way these work is the main reason I didn't use them.

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

I put together https://github.com/viatropos/design.io specifically to solve this problem, and make it so:

我特意将https://github.com/viatropos/designio整合到一起解决这个问题,并使之成为:

  1. The browser reflects the css/js/html/etc anytime you save, without reloading the page
  2. 浏览器反映css/js/html等任何时候你保存,没有重新加载页面
  3. It can handle any template/language/framework (Stylus, Less, CoffeeScript, Jade, Haml, etc.)
  4. 它可以处理任何模板/语言/框架(手写笔、更少、咖啡稿、翡翠、Haml等)。
  5. It's written in Javascript, and you can whip together extensions real quick in Javascript.
  6. 它是用Javascript编写的,您可以在Javascript中快速组合扩展。

This way, when you need to make those little changes to CSS, you can say, set background color, press save, see nope, not quite, adjust the hue by 10, save, nope, adjust by 5, save, looks good.

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

The way it works is by watching whenever you save a file (at the os level), processing the file (this is where the extensions work), and pushing the data to the browser through websockets, which are then handled (the client side of the extension).

它的工作方式是观察保存文件(在os级别)、处理文件(这是扩展工作的地方)以及通过websockets将数据推送到浏览器,然后进行处理(扩展的客户端)。

Not to plug or anything, but I struggled with this issue for a long ass time.

不是为了插入或其他什么,但我在这个问题上挣扎了很长一段时间。

Hope that helps.

希望有帮助。

#17


1  

Firebug works on the computed CSS (the one which you get by taking the CSS in the files and applying inheritance, etc. plus the changes made with Javascript). This means that probably you couldn't use it directly to include in an HTML file, which is browser/version specific (unless you care only about Firefox). On the other hand, it keeps track of what is original and what is computed... I think it should not be very difficult to add some JS to Firebug to be able to export that CSS to a text file.

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

#18


1  

I was wondering why can't I bloody well select and copy the text in front of my eyes. Especially when others say you can just "select and copy". Turns out you can, you just have to start the drag outside of any text (i.e. in the gutter above or to the left of the text) as any mousedown -- whether it's a click or drag -- on any text immediately invokes the property editor. You can also click outside text to get a cursor (even if it's not always visible) which you can then move around with the arrow keys and select text that way.
The text copied to the clipboard is devoid of any indenting, unfortunately, but at least it saves you from manually transcribing the entire contents of the CSS file. Just have your diff programme ignore changes in whitespace when comparing against the original.

我在想为什么我不能很好地选择和复制文本在我的眼前。尤其是当别人说你可以“选择和复制”的时候。结果是,你可以,你只需要在任何文本之外启动拖拽(例如,在文本的上方或左边),就像任何鼠标点击或拖动一样——任何文本上的鼠标点击或拖拽都会立即调用属性编辑器。您还可以单击外部文本来获取游标(即使它并不总是可见的),然后您可以使用箭头键四处移动并以这种方式选择text。不幸的是,复制到剪贴板的文本没有任何缩进,但至少可以避免手工改写CSS文件的全部内容。让您的diff程序在与原来的空白进行比较时忽略空白中的变化。

#19


1  

You could write your own server script file that takes a filename parameter and a content parameter.

您可以编写自己的服务器脚本文件,它接受文件名参数和内容参数。

The server script would find the requested file and replace its contents with the new one.

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

Writing the Javascript that taps into firebug's info and retrieves the useful data would be the tricky part.

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

I'd personally rather ask the dev team at firebug to supply a function, it shouldn't be too hard for them.

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

Finally, Ajax sends the filename/content pair to the php file you created.

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

#20


1  

Quoted from the Firebug FAQ:

引用Firebug FAQ:

Editing Pages

  • Can I save to the source the changes I made to the webpage I'm seeing?

    我可以把我对我所看到的网页所做的修改保存到源代码中吗?

    Right now you can't. As John J. Barton wrote on the newsgroup:

    现在你不能。正如约翰·巴顿(John J. Barton)在新闻组上所写:

    Editing in Firebug is kinda like taking out the pickles from and adding mustard to a restaurant sandwich: you can enjoy the result, but the next customer at the restaurant will still get pickles and no mustard.

    Firebug的编辑有点像把泡菜从餐厅里拿出来,然后往餐厅的三明治里加点芥末:你可以享受这个结果,但是餐厅的下一个顾客仍然会得到泡菜和芥末。

    This is a long-requested functionality, so someday it'll be available directly from Firebug. Meanwhile, you can try Firediff, an extension for firebug by Kevin Decker.

    这是一个长期请求的功能,因此有一天它将直接从Firebug中获得。与此同时,你可以试试Firediff, Kevin Decker为firebug开发的扩展。

  • How can I output all changes that have been made to a site's CSS within firebug?

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

    That's a feature implemented in Kevin Decker's Firediff.

    这是凯文·戴克的Firediff实现的特性。

#21


0  

Here's a partial solution. After you make your changes, click on one of the links to the relevant file. This is the original file, so you'll have to refresh the file, which is under the options menu button in the upper right of the firebug pane. Now you have the modified css page, which you can copy & paste. Obviously, you'll have to do it for each css file.

这里有一个部分解决方案。更改后,单击相关文件的链接之一。这是原始文件,因此您必须刷新文件,该文件位于firebug窗格右上角的options菜单按钮下。现在有了修改后的css页面,可以复制粘贴。显然,您必须对每个css文件都这样做。

Edit: looks like Mark Biek has a quicker version

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

#22


0  

A very easy way to "edit" your page is to go onto the site via your internet browser. Save the page as html only onto your desktop. Go to your desktop and right click on the new web page file and select open with, choose notepad and edit the page from there, if you know html it will be easy. After all your editing is done, save the file and reopen your webpage, the changes should be there if done correctly. You can then use your new edited page and export or copy it to your remote location

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

#23


-4  

Actually Firebug is a debug and analyze-Tool: not an editor and obviously not considered to be one. The other reason was already mentioned: how to you want to change CSS, stored on a server when debugging a webpage?

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


推荐阅读
  • Nginx使用AWStats日志分析的步骤及注意事项
    本文介绍了在Centos7操作系统上使用Nginx和AWStats进行日志分析的步骤和注意事项。通过AWStats可以统计网站的访问量、IP地址、操作系统、浏览器等信息,并提供精确到每月、每日、每小时的数据。在部署AWStats之前需要确认服务器上已经安装了Perl环境,并进行DNS解析。 ... [详细]
  • 搭建Windows Server 2012 R2 IIS8.5+PHP(FastCGI)+MySQL环境的详细步骤
    本文详细介绍了搭建Windows Server 2012 R2 IIS8.5+PHP(FastCGI)+MySQL环境的步骤,包括环境说明、相关软件下载的地址以及所需的插件下载地址。 ... [详细]
  • 本文介绍了如何使用php限制数据库插入的条数并显示每次插入数据库之间的数据数目,以及避免重复提交的方法。同时还介绍了如何限制某一个数据库用户的并发连接数,以及设置数据库的连接数和连接超时时间的方法。最后提供了一些关于浏览器在线用户数和数据库连接数量比例的参考值。 ... [详细]
  • 本文介绍了Hyperledger Fabric外部链码构建与运行的相关知识,包括在Hyperledger Fabric 2.0版本之前链码构建和运行的困难性,外部构建模式的实现原理以及外部构建和运行API的使用方法。通过本文的介绍,读者可以了解到如何利用外部构建和运行的方式来实现链码的构建和运行,并且不再受限于特定的语言和部署环境。 ... [详细]
  • http:my.oschina.netleejun2005blog136820刚看到群里又有同学在说HTTP协议下的Get请求参数长度是有大小限制的,最大不能超过XX ... [详细]
  • 本文介绍了Web学习历程记录中关于Tomcat的基本概念和配置。首先解释了Web静态Web资源和动态Web资源的概念,以及C/S架构和B/S架构的区别。然后介绍了常见的Web服务器,包括Weblogic、WebSphere和Tomcat。接着详细讲解了Tomcat的虚拟主机、web应用和虚拟路径映射的概念和配置过程。最后简要介绍了http协议的作用。本文内容详实,适合初学者了解Tomcat的基础知识。 ... [详细]
  • 如何使用Java获取服务器硬件信息和磁盘负载率
    本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务,并获取服务器的磁盘信息,并将结果输出。然后在本地使用JS编写一个AJAX脚本,远程请求服务端的程序,得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]
  • 使用Ubuntu中的Python获取浏览器历史记录原文: ... [详细]
  • 图解redis的持久化存储机制RDB和AOF的原理和优缺点
    本文通过图解的方式介绍了redis的持久化存储机制RDB和AOF的原理和优缺点。RDB是将redis内存中的数据保存为快照文件,恢复速度较快但不支持拉链式快照。AOF是将操作日志保存到磁盘,实时存储数据但恢复速度较慢。文章详细分析了两种机制的优缺点,帮助读者更好地理解redis的持久化存储策略。 ... [详细]
  • 本文介绍了RPC框架Thrift的安装环境变量配置与第一个实例,讲解了RPC的概念以及如何解决跨语言、c++客户端、web服务端、远程调用等需求。Thrift开发方便上手快,性能和稳定性也不错,适合初学者学习和使用。 ... [详细]
  • 如何在服务器主机上实现文件共享的方法和工具
    本文介绍了在服务器主机上实现文件共享的方法和工具,包括Linux主机和Windows主机的文件传输方式,Web运维和FTP/SFTP客户端运维两种方式,以及使用WinSCP工具将文件上传至Linux云服务器的操作方法。此外,还介绍了在迁移过程中需要安装迁移Agent并输入目的端服务器所在华为云的AK/SK,以及主机迁移服务会收集的源端服务器信息。 ... [详细]
  • 本文介绍了在Windows环境下如何配置php+apache环境,包括下载php7和apache2.4、安装vc2015运行时环境、启动php7和apache2.4等步骤。希望对需要搭建php7环境的读者有一定的参考价值。摘要长度为169字。 ... [详细]
  • 本文介绍了在mac环境下使用nginx配置nodejs代理服务器的步骤,包括安装nginx、创建目录和文件、配置代理的域名和日志记录等。 ... [详细]
  • WebSocket与Socket.io的理解
    WebSocketprotocol是HTML5一种新的协议。它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送 ... [详细]
  • Java在运行已编译完成的类时,是通过java虚拟机来装载和执行的,java虚拟机通过操作系统命令JAVA_HOMEbinjava–option来启 ... [详细]
author-avatar
mobiledu2502900597
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有