Firebugは、CSSを編集するために私が見つけた最も便利なツールです。なぜCSSに単純な「保存」オプションがないのですか？

私は常にFirebugで微調整を行っていることに気づき、次に元の.cssファイルに戻って微調整を複製しています。

誰かがより良い解決策を考え出しましたか？

編集：私はコードがサーバーに保存されていることを知っていますが（ほとんどの場合私自身ではありません）、私は自分のウェブサイトを構築するときにそれを使用します。

Firebugは、Firefoxがサーバーからダウンロードした.cssファイルを使用するだけで、どのファイルのどの行を編集しているかを正確に把握しています。新しい.cssファイルを保存できる「エクスポート」または「保存」オプションがない理由がわかりません。（私はそれからリモートのものを置き換えることができました）。

一時的な場所を調べて、[ファイル] > [ 保存...]を選択し、Firefoxで出力オプションを試してみましたが、それでも方法が見つかりませんでした。

編集2： 公式ディスカッショングループには多くの質問がありますが、回答はありません。

私はこの機能を正確に探して、つまり編集したCSSプロパティを元のファイル（ローカルの開発マシン）に保存できるようになりました。残念ながら、たくさん検索しても自分のニーズに合ったものは見つかりませんでした（OK、CSSアップデータはありますが、登録する必要があり、有料の拡張機能です...）Firefox + Firebugをあきらめて、Google Chromeに似たものを探しました。何だと思います...これを機能させる良い方法を示すこの素晴らしい投稿を見つけました（Chromeに組み込まれています-追加の拡張機能は必要ありません）。

Chromeデベロッパーツールを使用してローカルファイルシステムでCSSを変更して保存します

私は今それを試しました、そしてそれは変更された行を強調することで素晴らしい働きをします。[保存]をクリックするだけで完了です。:)

これとそれ以上のことを説明するビデオは次のとおりです。GoogleI / O 2011：Chrome Dev Tools Reloaded

CSSファイルの編集中にブラウザを変更しても問題にならない場合に役立つことを願っています。私は今のところすでに変更を加えましたが、この機能をFirebugに組み込みたいと思っています。:)

[更新1]

今日私はこのビデオを見たばかりです：SublimetextでのFirefox CSSライブ編集（作業中）確かに有望に見えます。

[更新2]

Web EssentialsでVisual Studio 2013を使用している場合は、次のビデオに示すように、CSSを自動的に同期できます。

Web Essentials：ブラウザーツールの統合

かなり長い間同じことを
考えていましたが、Firebugを使用した瞬間的なフリースタイルのCSSが
偶発的なリロードなどによって一部が吹き飛ばされてしまったとき、ただのガチガチです...

私の意図と目的のために、ようやくツールを見つけました...：FireDiff。

それはあなたに新しいタブ、おそらく「変更」と呼ばれる奇妙なデビッド・ボウイ参照を与えます。これにより、Firebug、つまり自分が何をしているかを確認/保存できるだけでなく
、ページ自体によって加えられた変更を追跡することもできます。

再入力する必要がないことに感謝し、または再想像してから再入力する必要があります。私が作成するすべての cssルール...

ここに開発者へのリンクがあります（最初の登場によって軽視されないでください。Mozillaアドオンリポジトリに直接アクセスすることもできます）。

Web開発者のアドオン letがあなたの編集内容を保存します。Firebugの編集とWeb Developerの保存機能を組み合わせたいのですが。

「保存」ボタンを使用して（CSSメニュー-> [CSSの編集]をクリック）、変更したCSSをディスクに保存します。

推奨事項：「スティック」ボタンを使用して、他のブラウジングを行うためにタブを変更したときに変更内容が失われないようにします。可能であれば、1つのタブのみを使用して編集を行い、他のFirefoxウィンドウで関連する検索、ウェブメールなどを使用します。

私はmozillaアドオンサンドボックスでFirebugアドオンをリリースしましたが、それはあなたが望むことをかなり実行するかもしれません：https : //addons.mozilla.org/en/firefox/addon/52365/

実際には、「 1つのファイルのwebservice phpスクリプトとの通信により」「タッチされた」cssファイルをオンデマンドでWebサーバーに保存します。

ドキュメントは私のホームページまたはアドオンページにあります

テスト、バグレポート、コメント、評価、これに関するディスカッションは、まだ初期ベータ版ですが、すでに正常に動作するはずなので、私は感謝します。

CSS-X-Fire

それがこの質問にまだリストされていないことに驚いていますが、おそらくそれは新しく、作者がまだそれを宣伝する時間を持っていなかったためです。

これはCSS-X-Fireと呼ばれ、JetBrainsシリーズのIDE（IntelliJ IDEA、PHPWebStorm、PyCharm、WebStorm、RubyMine）のプラグインです。

仕組み：これらのIDEの1つをインストールし、配置を構成します（FTPおよびSCPをサポートします）。これにより、サーバーとの同期を保つことができます。

この後、このプラグインをインストールします。起動すると、FirebugとIDEを統合するために、Firefoxのプラグインをインストールするかどうかを尋ねられます。プラグインのインストールに失敗した場合は、ドラッグアンドドロップ技術を使用してプラグインをインストールしてください。

インストールすると、Firebugからのすべての変更が追跡され、IDE内をクリックするだけで変更を適用できるようになります。

FireFile

FireFileは、変更されたcssをアップロードできるようにするために、サーバー側に小さなphpファイルを1つ追加する必要がある代替手段です。

あなたはリンクでき放火犯をしてEclipseにfireclipse、次に日食からファイルを保存します

Firebugで編集モードに入り、CSSファイルのコンテンツをコピーして貼り付けることで、最も近いと思います。

FirebugおよびWebkitインスペクターで行われたCSSの変更をサーバーに保存できるオープンソースのJavaScriptエンジンであるBackfireを紹介しました。ライブラリには、受信した変更をCSSに保存する方法のC＃実装の例が含まれています。

これがどのように機能するかについてのブログ投稿は次のとおりです：http : //blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/

そして、これがGoogle Codeでホストされているコードです：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詳細を保存する機能があります。

私は、Sorin Sbarneaもこのスレッドで親切に投稿したCSS-X-Fireの作者です。私は少し遅れていると思います;）

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ファイルをサーバー側に追加することにより、必要な機能を提供します。

Firebugはサーバーで動作していないため、CSSをサイトから取得してローカルに保存し、ローカルでの変更をサイトに表示します。

Firefox Web DeveloperツールバーのCSSエディターを使用します。

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

Firebugと組み合わせて使用​​するのに十分な機能があり、CSSをテキストファイルに保存できます。

Backfireを使用します。

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

これは、CSSの変更をサーバーに送信して保存するオープンソースソリューションです。

Backfireは単一のjavascriptファイルを使用し、ソースコードパッケージには、他のプラットフォームに簡単に移植できる.NETサーバー実装例が含まれています。

私もこの問題を永遠に経験し、最終的にWebインスペクターで編集するべきではないと判断し、それのために何かを構築しました（https://github.com/viatropos/design.io）。

より良いソリューション：

ブラウザは、テキストエディタで[保存]を押すと、再読み込みせずに CSSの変更を自動的に反映します。

Webインスペクターでcssを編集している主な理由（私はwebkitを使用していますが、FireBugは同じ行に沿っています）は、小さな調整を行う必要があり、ページの再読み込みに時間がかかりすぎるためです。

このアプローチには2つの主な問題があります。まず、idセレクターがない可能性のある個々の要素を編集できます。したがって、生成されたCSSをWebインスペクターからコピー/貼り付けできたとしてもid、CSSをスコープするを生成する必要があります。何かのようなもの：

#element-127 {
  background: red;
}

それはあなたのCSSを混乱させ始めるでしょう。

既存のセレクター（.space下のwebkitインスペクター画像のクラスセレクター）のスタイルを変更するだけで、問題を回避できます。

それでも、2番目の問題。そのことへのインターフェースはかなりラフで、大きな変更を加えるのは難しいです-あなたがこのCSSのブロックをこの場所に実際にすばやくコピーしたい場合など。

私はむしろTextMateに固執したい。

理想は、テキストエディターでCSSを記述し、ページをリロードせずにブラウザーに変更を反映させることです。このようにして、小さな変更を加えながら、最終的なCSSを記述します。

次のレベルは、Stylus、Less、SCSSなどの動的CSS言語で記述し、生成されたCSSでブラウザーを更新することです。このようbox-shadow()にして、Webインスペクターでは絶対に実行できない複雑さを抽象化したのようなミックスインの作成を開始できます。

この種のことを行う方法はいくつかありますが、私の意見ではそれを実際に合理化するものはありません。

• LiveReload：保存を押すと、更新せずにcssをブラウザーにプッシュしますが、これはMacアプリであるため、カスタマイズが困難です。
• CodeKit：これもMacアプリですが、保存するたびにブラウザを更新します。

これらの作業を簡単にカスタマイズする機能がないことが、私がそれらを使用しなかった主な理由です。

私は特にこの問題を解決するためにhttps://github.com/viatropos/design.ioをまとめて、そうしました：

1. ブラウザは、ページをリロードせずに、保存するたびにcss / js / html / etcを反映します
2. テンプレート/言語/フレームワーク（スタイラス、Less、CoffeeScript、Jade、Hamlなど）を処理できます。
3. これはJavaScriptで記述されており、拡張機能をJavaScriptですばやく作成できます。

このように、CSSにこれらの小さな変更を加える必要がある場合は、背景色を設定し、[保存]を押して、「いいえ」を参照してください。色相を10ずつ調整してください。

それが機能する方法は、ファイルを保存するたびに（OSレベルで）監視し、ファイルを処理し（これは拡張機能が動作する場所です）、WebSocketを介してデータをブラウザにプッシュし、その後処理されます（クライアント側）拡張子）。

プラグインや何もしないが、私はこの問題に長い間悩まされていた。

お役に立てば幸いです。

Firebugは計算された CSS（ファイル内のCSSを取得して継承などを適用することで得られるCSSに加えて、JavaScriptで行われた変更）で機能します。これは、おそらくそれを直接使用してHTMLファイルに含めることができなかったことを意味します。これは、ブラウザー/バージョン固有です（Firefoxのみに関心がある場合を除く）。一方、何がオリジナルで何が計算されたかを追跡します...そのCSSをテキストファイルにエクスポートできるようにするために、JSをFirebugに追加することはそれほど難しくないと思います。

なぜ私の目の前にあるテキストを流血でうまく選択してコピーできないのかと思っていました。特に他の人があなたが単に「選択してコピーする」ことができると言うとき。あなた判明ができ、あなただけのドラッグを開始する必要が外にそれはクリックやドラッグのかどうか- -任意のテキストにすぐにプロパティを呼び出す任意のマウスダウンのように（つまり、テキストの左上かに側溝で）任意のテキストのを編集者。また、外側のテキストをクリックしてカーソルを取得することもできます（常に表示されていない場合でも）。カーソルを矢印キーで移動し、その方法でテキストを選択できます。
残念ながら、クリップボードにコピーされたテキストにはインデントがありませんが、少なくともCSSファイルの内容全体を手動で文字変換する手間が省けます。オリジナルと比較するときに、diffプログラムに空白の変更を無視させるだけです。

ファイル名パラメータとコンテンツパラメータを取る独自のサーバースクリプトファイルを作成することもできます。

サーバースクリプトは、要求されたファイルを見つけ、その内容を新しいファイルで置き換えます。

firebugの情報を利用して有用なデータを取得するJavascriptを作成するのは難しい部分です。

個人的には、firebugの開発チームに関数を提供するように依頼したいのですが、それほど難しくはないはずです。

最後に、Ajaxは作成したphpファイルにファイル名とコンテンツのペアを送信します。

Firebug FAQから引用：

ページの編集

• 表示しているWebページに加えた変更をソースに保存できますか？

  今はできません。ジョン・J・バートンがニュースグループに書いたように：

  Firebugでの編集は、ピクルスを取り出してマスタードをレストランのサンドイッチに追加するようなものです。結果を楽しむことはできますが、レストランの次の顧客はピクルスを入手し、マスタードは入手しません。

  これは長くリクエストされた機能であるため、いつかFirebugから直接利用できるようになるでしょう。その間、Kevin Deckerによるfirebugの拡張であるFirediffを試すことができます。

• firebug内でサイトのCSSに加えられたすべての変更を出力するにはどうすればよいですか？

  これは、Kevin DeckerのFirediffに実装されている機能です。

これが部分的な解決策です。変更後、関連ファイルへのリンクの1つをクリックします。これは元のファイルなので、Firebugペインの右上にあるオプションメニューボタンの下にあるファイルを更新する必要があります。これで、CSSページが変更され、コピーして貼り付けることができます。もちろん、CSSファイルごとに行う必要があります。

編集：Mark Biekの方が速いバージョンのようです

ページを「編集」する非常に簡単な方法は、インターネットブラウザを介してサイトにアクセスすることです。ページをHTMLとしてデスクトップにのみ保存します。デスクトップに移動し、新しいWebページファイルを右クリックして[アプリケーションから開く]を選択し、メモ帳を選択して、そこからページを編集します。htmlを知っている場合は簡単です。すべての編集が完了したら、ファイルを保存してWebページを再度開きます。正しく行われていれば、変更が反映されているはずです。次に、新しく編集したページを使用して、リモートの場所にエクスポートまたはコピーできます。

実際、Firebugはデバッグおよび分析ツールです。エディターではなく、明らかにエディターとは見なされません。もう1つの理由は既に述べました。Webページのデバッグ時にサーバーに保存されているCSSをどのように変更したいですか？