FirebugでCSSの変更を保存できないのはなぜですか？
Firebugは、私がCSSを編集するために見つけた最も便利なツールです。CSSに単純な「保存」オプションがないのはなぜですか？
私はいつもFirebugで微調整を行ってから、元の.cssファイルに戻って微調整を複製します。
誰かがより良い解決策を考え出しましたか？
編集： コードはサーバー（ほとんどの場合、自分のものではない）に保存されていますが、自分のWebサイトを構築するときに使用します。
Firebugは、サーバーからFirefoxをダウンロードした.cssファイルを使用するだけで、どのファイルのどの行が編集されているかを正確に把握しています。新しい.cssファイルを保存できる「エクスポート」または「保存」オプションがない理由がわかりません。 （その後、リモートのものを置き換えることができます）。
一時的な場所を探して、File>Save ...Firefoxの出力オプションを試してみましたが、まだ方法が見つかりませんでした。
編集2： 公式のディスカッショングループには 多くの質問 がありますが、回答はありません。
ここでこの機能を正確に探しました。つまり、編集したCSSプロパティを元のファイル（ローカル開発マシン上）に保存できるようにしました。残念ながら、たくさん検索して、自分のニーズに合ったものを見つけられなかった（OK、 CSS Updater がありますが、登録する必要があり、有料の拡張機能です...）Firefox + Firebugをあきらめて探しましたGoogle Chromeでも同様です。推測してみてください...これを機能させる素敵な方法を示した素晴らしい投稿を見つけました（Chrome-追加の拡張機能は不要です）：
Chrome開発者ツール を使用してローカルファイルシステムのCSSとSAVEを変更します
私は今それを試してみましたが、変更された行を強調してうまく機能します。 [保存]をクリックするだけで完了です。 :)
これとその他の詳細を説明するビデオを次に示します。 Google I/O 2011：Chrome Dev Tools Reloaded
CSSファイルの編集中にブラウザを変更しても問題ない場合に役立つと思います。私は今のところすでに変更を行っていますが、この機能をFirebugに組み込みたいと思っています。 :)
[更新1]
今日、私はこのビデオを見ました： Firefox CSSのSublimetextでのライブ編集（進行中） 本当に有望に見えます。
[更新2]
Visual Studio 201 with Web Essentials を使用している場合、このビデオに示すようにCSSを自動的に同期できます。
かなり以前から同じことを考えていましたが、
firebugを使用したin-the-moment-freestyle-css'ingが次々に吹き飛ばされたとき、ただガッツリ
偶発的なリロードまたはその他....
私の意図と目的のために、私はついにツールを見つけました。 FireDiff。
新しいタブが表示されます。おそらく、「変更」と呼ばれる奇妙なDavid Bowieの参照です。どのfirebugを見る/保存するだけでなく、i。 e。あなたは、やってきた、
また、オプションで、ページ自体によって行われた変更を追跡します。
ですから、タイプし直したり、イメージし直してからタイプし直したりする必要がないことに感謝します。 毎回 私が作るCSSルール...
ここ は開発者へのリンクです（最初の外観にbyしないでください。おそらく、 Mozillaアドオンリポジトリ に直接進んでください。
Web Developerアドオン 編集内容を保存できます。 Firebugの編集とWeb Developerの保存機能を組み合わせたいと思います。
「Save」ボタン（CSSメニュー-> Edit CSSをクリック）を使用して、変更したCSSをディスクに保存します。
推奨事項：「Stick」ボタンを使用して、変更が失われないようにします。他のブラウジングを行うためにタブを変更します。可能な場合は、1つのタブのみを使用して編集を行い、他のFirefoxウィンドウで関連する検索、ウェブメールなどを行います。
Mozilla addon sandboxでfirebug addonをリリースしました。これはあなたが望むものを何でもできるかもしれません： https://addons.mozilla.org/en/firefox/addon/52365/
実際に「タッチされた」CSSファイルをオンデマンドでWebサーバーに保存します（1ファイルのwebservice phpスクリプトとの通信により）。
ドキュメントは私のホームページまたはアドオンページにあります
テスト、バグ報告、コメント、評価、議論については、まだ初期のベータ版であるので感謝しますが、すでに正常に動作するはずです。
CSS-X-Fire
この質問にまだリストされていないことに驚いていますが、おそらく新しいものであり、著者がまだ宣伝する時間がなかったためです。
CSS-X-Fireと呼ばれ、JetBrainsシリーズのIDEのプラグインです： IntelliJ IDEA 、PHPWebStorm、PyCharm、WebStorm、RubyMine 。
仕組み：これらのIDEのいずれかをインストールし、展開を構成します（FTPおよびSCPをサポート）。これにより、サーバーとの同期を維持できます。
この後、このプラグインをインストールします。起動すると、FirebugとIDEの統合を行うために、Firefoxのプラグインをインストールするように指示されます。プラグインのインストールに失敗した場合は、ドラッグアンドドロップ技術を使用してインストールしてください。
インストールすると、Firebugからのすべての変更が追跡され、de IDE内でクリックするだけでそれらを適用できます。
FireFile
FireFileは、変更されたcssをアップロードできるようにするために、サーバー側に1つの小さなphpファイルを追加する必要がある代替手段です。
firebug を fireclipse でEclipseにリンクし、Eclipseからファイルを保存できます。
最も近いのは、Firebugの編集モードに入り、CSSファイルの内容をコピーして貼り付けることです。
Backbugを導入しました。これは、FirebugとWebkitインスペクターで行われたCSSの変更をサーバーに保存できるオープンソースのjavascriptエンジンです。ライブラリには、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の組み合わせに加えて、Webサイトをローカルで実行するときにローカルファイルシステムに直接アクセスするコードを含むソリューションを提案します。
シナリオは次のとおりです。
リモートマシンでホストされているWebサイトでの作業
この場合、FTPの詳細とCSS/HTML/Javascriptの場所を指定すると、Firebugは変更を保存するときにこれらのファイルを更新します。ファイル自体を見つけて、正しいファイルがあることを確認するように求めることもできます。ファイル名が一意であれば、問題になることはありません。
ローカルマシンで実行されているWebサイトで作業中
この場合、FirebugにWebサイトのローカルフォルダーの場所を提供できます。同じ動作を使用して、ファイルの照合と検証を行います。ローカルファイルシステムへのアクセスは、必要に応じてFireFTPを介して実行できます。
FTPアクセスなしでリモートでホストされるWebサイトで作業する
この場合、FireFileアドオンのようなものを実装する必要があります。
追加の機能は、ローカルファイルとそれらが関連付けられているURLとの間のマッピングを保存するプロジェクトファイルを保存して開く機能、およびFireFTPが既に行っているようにFTPの詳細を保存する機能です。
私はCSS-X-Fireの著者であり、Sorin Sbarneaもこのスレッドで親切に投稿しました。私は少し遅れていると思う;）
CSS-X-Fireは、CSSプロパティの変更をFirebugからIDEに送信します。ここで、変更を適用または破棄できます。
このソリューションには、ファイル名とブラウザによってダウンロードされたコンテンツのみを知っている他のほとんどの既存のツールに比べていくつかの利点があります（元の投稿のNickFitzコメントを参照）。
シナリオ1：ユーザーが選択できる少数のテーマを持つWebサイト（プロジェクト）がある。各テーマには独自のCSSファイルがありますが、Firebugが認識しているのは現在の1つだけです。 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/
FireFile
Firebugは、デバッガーではない問題を検出するために作成されました。ただし、firebugと変更の保存を統合する新しいツールを追加すると、変更を保存できます。 FireFileです。ここをクリックしてください http://thelistoflist.blogspot.com/2010/04/how-to-save-change-you-make-in-firebug.html 。
FireFileは、サーバー側に小さなPHPファイルを追加することにより、目的の機能を提供します。
Backfireを使用します。
http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/
これは、CSSの変更をサーバーに送信して保存するオープンソースソリューションです。
Backfireは単一のjavascriptファイルを使用し、ソースコードパッケージには、他のプラットフォームに簡単に移植できる作業用の.NETサーバー実装例があります。
Firebugはサーバー上では動作せず、サイトからCSSを取得してローカルに保存し、それらのローカルの変更を含むサイトを表示するためです。
私もこの問題を永遠に抱えていましたが、最終的にはWebインスペクターで編集するべきではないと判断し、そのために何かを構築しました（ https://github.com/viatropos/design.io ） 。
より良い解決策：
ブラウザは、テキストエディタで保存を押すと、リロードせずにCSSの変更を自動的に反映します。
Webインスペクターでcssを編集している主な理由（私はwebkitを使用していますが、FireBugも同じラインに沿っています）は、少し調整する必要があり、ページのリロードに時間がかかりすぎるためです。
このアプローチには2つの主な問題があります。最初に、idセレクターを持たない個別の要素を編集できます。そのため、Webインスペクターから生成されたCSSをコピー/貼り付けできたとしても、CSSをスコープするためにidを生成する必要があります。何かのようなもの：
_#element-127 {
background: red;
}
_それはあなたのCSSを混乱させ始めます。
既存のセレクター（以下のWebkitインスペクターイメージの_.space_クラスセレクター）のスタイルを変更するだけで、この問題を回避できます。
それでも、2番目の問題。そのことへのインターフェイスはかなり荒いです、大きな変更を加えることは難しいです-あなたが本当にこのcssのブロックをこの場所にコピーするか、何でもしようとする場合のように。
私はむしろTextMateに固執したいです。
理想は、テキストエディタでCSSを記述し、ページをリロードせずにブラウザに変更を反映させることです。このようにして、少し変更を加えながら最終的なCSSを作成します。
次のレベルは、Stylus、Less、SCSSなどの動的なCSS言語で記述し、生成されたCSSでブラウザーを更新することです。この方法で、box-shadow()のようなミックスインの作成を開始できます。これにより、Webインスペクターが絶対にできなかった複雑さを抽象化できます。
そのようなことをすることはいくつかありますが、私の意見ではそれを本当に合理化するものはありません。
- LiveReload ：保存を押すと更新せずにcssがブラウザーにプッシュされますが、 macアプリ なので、カスタマイズするのは難しいでしょう。
- CodeKit ：Macアプリでもありますが、保存するたびにブラウザーが更新されます。
これらの動作を簡単にカスタマイズする機能がないことが、私がそれらを使用しなかった主な理由です。
私は https://github.com/viatropos/design.io をまとめて、この問題を解決するために、具体的に次のようにしました。
- ブラウザは、ページをリロードせずに、保存するたびにcss/js/html/etcを反映します
- 任意のテンプレート/言語/フレームワーク（スタイラス、Less、CoffeeScript、Jade、Hamlなど）を処理できます。
- これはJavaScriptで記述されており、JavaScriptで拡張機能をすばやくまとめて作成できます。
このように、CSSにこれらの小さな変更を加える必要がある場合、たとえば、背景色を設定し、保存を押して、まったく見えない、色相を10で調整する、保存する、いや、5で調整する、保存する、見栄えが良いと言うことができます。
動作方法は、ファイルを保存するたびに（OSレベルで）監視し、ファイルを処理し（これが拡張機能の機能）、WebSocketを介してブラウザにデータをプッシュし、処理されます（クライアント側の拡張子）。
プラグインなどはしませんが、私はこの問題に長い間苦労しました。
お役に立てば幸いです。
Firefox Web DeveloperツールバーのCSSエディターを使用します。
http://chrispederick.com/work/web-developer/
Firebugと併用するのに十分なものがあり、CSSをテキストファイルに保存できます。
なぜ目の前にあるテキストをうまく選択してコピーできないのだろうと思っていました。特に、「選択してコピーする」ことができると他の人が言う場合。あなたはcanであることが判明し、任意のテキストのドラッグoutsideを開始するだけです（つまりテキストの上またはテキストの左にある溝）をクリックすると、クリックまたはドラッグに関係なく、任意のテキストでプロパティエディターがすぐに呼び出されます。また、外側のテキストをクリックしてカーソルを取得し（常に表示されていなくても）、矢印キーで移動してテキストを選択できます。
クリップボードにコピーされたテキストには、残念ながらインデントがありませんが、少なくとも、CSSファイルのコンテンツ全体を手動で書き写すことはありません。オリジナルと比較するときに、差分プログラムに空白の変更を無視させるだけです。
ファイル名パラメーターとコンテンツパラメーターを取る独自のサーバースクリプトファイルを作成できます。
サーバースクリプトは、要求されたファイルを見つけ、その内容を新しいファイルに置き換えます。
Firebugの情報を利用して有用なデータを取得するJavascriptを作成するのは難しい部分です。
個人的には、firebugの開発チームに機能を提供するように依頼します。彼らにとってはそれほど難しくないはずです。
最後に、Ajaxはファイル名/コンテンツのペアを作成したphpファイルに送信します。
Firebug FAQ から引用：
ページの編集
見ているウェブページに加えた変更をソースに保存できますか？
今はできません。ジョン・J・バートンがニュースグループで書いたように：
Firebugでの編集は、ピクルスを取り出してレストランのサンドイッチにマスタードを追加するようなものです。結果を楽しむことができますが、レストランの次の顧客はまだピクルスを受け取り、マスタードはありません。
これは長らく要求されていた機能なので、いつかFirebugから直接利用できるようになります。一方、 Firediff 、Kevin Deckerによるfirebugの拡張機能を試すことができます。
firebug内でサイトのCSSに加えられたすべての変更を出力するにはどうすればよいですか？
これはKevin Deckerの Firediff で実装されている機能です。
Firebugは計算済み CSS（ファイルにCSSを入れて継承などを適用することで得られるものに加えて、JavaScriptで行われた変更）で動作します。これはおそらく、ブラウザ/バージョン固有のHTMLファイルに含めるために直接使用できなかったことを意味します（Firefoxだけを気にしない限り）。一方、オリジナルと計算されたものを追跡します...そのCSSをテキストファイルにエクスポートできるようにするために、FirebugにJSを追加することはそれほど難しくないと思います。
ページを「編集」する非常に簡単な方法は、インターネットブラウザ経由でサイトにアクセスすることです。ページをHTMLとしてのみデスクトップに保存します。デスクトップに移動し、新しいWebページファイルを右クリックして、[開く]を選択し、メモ帳を選択して、そこからページを編集します（htmlが簡単な場合）。すべての編集が完了したら、ファイルを保存してWebページを再度開きます。正しく行われていれば、変更がそこにあるはずです。その後、編集した新しいページを使用して、リモートの場所にエクスポートまたはコピーできます
これは部分的な解決策です。変更を行った後、関連ファイルへのリンクのいずれかをクリックします。これは元のファイルですので、firebugペインの右上にあるオプションメニューボタンの下にあるファイルを更新する必要があります。これで、変更したcssページができました。コピーして貼り付けることができます。明らかに、CSSファイルごとにそれを行う必要があります。
編集： Mark Biek はより速いバージョンです