css - Why can't I save CSS changes in Firebug?

Question

Firebug is the most convenient tool I've found for editing CSS - so why isn't there a simple "save" option for CSS?

I am always finding myself making tweaks in Firebug, then going back to my original .css file and replicating the tweaks.

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).

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.

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

score 104 · Accepted Answer

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

私の意図と目的のために、私は最終的にツールを見つけました....：FireDiff。

「変更」と呼ばれる、おそらく奇妙なデヴィッド・ボウイの参照である新しいタブが表示されます。これにより、firebug、つまりあなたが行っていることを確認/保存できるだけでなく
、ページ自体によって行われた変更をオプションで追跡することもできます....

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

開発者へのリンクは次のとおりです (最初に登場したからといって侮辱されないでください。Mozilla Add-On リポジトリに直接アクセスすることもできます。

score 27 · Accepted Answer

私はまさにこの機能、つまり、編集し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 live edit in Sublimetext (work in progress)確かに有望に見えます。

【アップデート2】

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

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

score 15 · Accepted Answer

Web 開発者アドオンを使用すると、編集を保存できます。Firebug の編集機能と Web Developer の保存機能を組み合わせたいと考えています。

_{(出典: mozilla.org )}

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

推奨事項:他のブラウジングを行うためにタブを変更するときに変更が失われないようにするには、[固定] ボタンを使用します。可能であれば、1 つのタブのみを使用して編集を行い、他の Firefox ウィンドウで関連する検索、Web メールなどを行います。

score 13 · Accepted Answer

CSS-X-ファイア

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

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

仕組み: これらの IDE のいずれかをインストールし、展開を構成します (FTP と SCP をサポートします)。これにより、サーバーとの同期を維持できます。

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

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

IDE 内の CSS-X-Fire ウィンドウ。

FireFile

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

score 13 · Accepted Answer

mozilla アドオンサンドボックスで firebugアドオンをリリースしました。

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

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

テスト、バグレポート、コメント、評価、これに関する議論を歓迎します。これはまだ初期ベータ版ですが、既に正常に動作しているはずです。

score 10 · Accepted Answer

fireclipse を使用して firebug をeclipse にリンクし、eclipse からファイルを保存できます。

score 9 · Accepted Answer

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

score 7 · Accepted Answer

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

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

Google Code でホストされているコードは次のとおりです: http://code.google.com/p/backfire/

score 3 · Accepted Answer

これでは質問に答えられないことは承知していますが、驚くべきことに、Internet Explorer 8のFirebugクローン「開発者ツールバー」（F12からアクセス可能）には、「htmlを保存」するオプションがあります。この関数は、現在のDOMをローカルファイルに保存します。つまり、どこかにスタイル属性を追加するなどしてDOMを編集すると、これも保存されます。

みんなのようにFirebugを使ってCSSをいじり回している場合は特に便利ではありませんが、正しい方向への一歩です。

score 3 · Accepted Answer

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

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、jump-to-codeなどに知られていない重複を見つけるのにも役立ちます。

CSS-X-Fireは、Apache2ライセンスに基づくオープンソースです。プロジェクトホーム：http ：//code.google.com/p/css-x-fire/

score 3 · Accepted Answer

Firebug と FireFTP の組み合わせ、および Web サイトをローカルで実行するときにローカルファイルシステムに直接アクセスするコードを含むソリューションを提案します。

シナリオは次のとおりです。

リモートマシンでホストされている Web サイトでの作業

この場合、FTP の詳細と CSS/HTML/Javascript の場所を提供し、変更を保存すると Firebug がこれらのファイルを更新します。ファイル自体を見つけて、正しいファイルがあることを確認するように求めることさえできる場合があります。ファイル名が一意であれば問題ありません。

ローカルマシンで実行されている Web サイトでの作業

この場合、Web サイトのローカルフォルダーの場所を Firebug に提供すると、同じ動作を使用してファイルの照合と検証が行われます。ローカルファイルシステムへのアクセスは、必要に応じて FireFTP を介して実行できます。

FTP アクセスなしでリモートでホストされている Web サイトでの作業

この場合、FireFile アドオンのようなものを実装する必要があります。

追加の機能は、ローカルファイルとそれらが関連付けられている URL の間のマッピングを保存するプロジェクトファイルを保存して開く機能と、FireFTP が既に行っているように FTP の詳細を保存する機能です。

score 3 · Accepted Answer

FireFile

Firebug は、デバッガーではない問題を検出するために作成されました。ただし、firebug と変更の保存を統合する新しいツールを追加すると、変更を保存できます。FireFile です。ここをクリックしてください http://thelistoflist.blogspot.com/2010/04/how-to-save-change-you-make-in-firebug.html。

FireFile は、小さな PHP ファイルをサーバー側に追加することで、必要な機能を提供します。

score 2 · Accepted Answer

Firebugはサーバー上で機能していませんが、サイトからCSSを取得してローカルに保存し、それらのローカルの変更をサイトに表示しているためです。

score 2 · Accepted Answer

バックファイアを使用します。

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

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

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

score 2 · Accepted Answer

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

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

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

score 2 · Accepted Answer

私もこの問題を永遠に抱えていましたが、最終的に 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 インスペクター画像のクラスセレクター) のスタイルを変更するだけで、これを回避できます。

Webkit インスペクター

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

私はむしろ TextMate に固執したいと思います。

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

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

このようなことを行うものはいくつかありますが、私の意見では、それを本当に合理化するものは何もありません.

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

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

この問題を解決するためにhttps://github.com/viatropos/design.ioを具体的にまとめました。

ブラウザーは、ページをリロードすることなく、保存するたびに css/js/html/etc を反映します
任意のテンプレート/言語/フレームワーク (Stylus、Less、CoffeeScript、Jade、Haml など) を処理できます。
これは JavaScript で書かれており、JavaScript で拡張機能をすばやく組み合わせることができます。

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

その仕組みは、ファイルを保存するたびに (OS レベルで) 監視し、ファイルを処理し (ここで拡張機能が機能します)、Websocket を介してデータをブラウザーにプッシュし、それが処理されます (クライアント側で処理されます)。拡張子）。

プラグインなどではありませんが、私はこの問題に長い間苦労しました.

それが役立つことを願っています。

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

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

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

個人的には、firebug の開発チームに関数の提供を依頼したいのですが、彼らにとってはそれほど難しいことではありません。

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

score 1 · Accepted Answer

Firebug FAQから引用:

ページの編集

表示中の Web ページに加えた変更をソースに保存できますか?

今はできません。John J. Barton がニュースグループに書いたように:

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

これは長い間要望されていた機能であるため、いつか Firebug から直接利用できるようになります。一方、 Kevin Decker による firebug の拡張であるFirediffを試すことができます。

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

これは、Kevin Decker のFirediffで実装された機能です。

score 1 · Accepted Answer

目の前のテキストをうまく選択してコピーできないのはなぜだろうと思っていました。特に、「選択してコピーする」だけでよいと他の人が言う場合。可能であることがわかりました。テキストの外側(つまり、テキストの上または左のガター) でドラッグを開始するだけです。編集者。また、テキストの外側をクリックしてカーソルを取得し (常に表示されていなくても)、矢印キーで移動してテキストを選択することもできます。
残念ながら、クリップボードにコピーされたテキストにはインデントがありませんが、少なくとも、CSS ファイルの内容全体を手動で転記する手間を省くことができます。オリジナルと比較するときに、差分プログラムに空白の変更を無視させるだけです。

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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

score -4 · Accepted Answer

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

css - Why can't I save CSS changes in Firebug?

23 に答える 23

CSS-X-ファイア

FireFile

FireFile

ページの編集

Related

Reference