Firebug で CSS の変更を保存できないのはなぜですか?[閉まっている]
https://stackoverflow.com/questions/162644
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
Firebug は、CSS を編集するために私が見つけた中で最も便利なツールです。では、なぜ CSS に単純な「保存」オプションがないのでしょうか?
私はいつも、Firebug で調整を行ってから、元の .css ファイルに戻ってその調整を複製していることに気づきました。
誰かがより良い解決策を思いついた人はいますか？
編集： コードがサーバー (ほとんどの場合、自分のものではない) に保存されていることは知っていますが、自分の Web サイトを構築するときにそれを使用します。
Firebug は、Firefox がサーバーからダウンロードした .css ファイルを使用しているだけで、どのファイルのどの行を編集しているのかを正確に認識します。新しい .css ファイルを保存できる「エクスポート」または「保存」オプションがない理由がわかりません。（これでリモートのものを置き換えることができます）。
一時的な場所を探して選択してみました ファイル > 保存... Firefox の出力オプションを試していますが、まだ方法が見つかりません。
編集2:公式ディスカッショングループには、 たくさんの質問, 、しかし答えはありません。
解決
ここでこの機能を正確に探しました。つまり、編集した CSS プロパティを元のファイル（ローカル開発マシン上）に保存できるようにしました。残念ながら、多くを検索し、私のニーズに合ったものを見つけられなかった後（OK、 CSS Updater がありますが、登録する必要がありますそれは有料の拡張機能です...）私はFirefox + Firebugをあきらめ、Google Chromeに似たものを探しました。推測してみてください。これを機能させる良い方法を示すこの素晴らしい投稿を見つけました（Chromeに組み込まれています-追加の拡張機能は必要ありません）：
CSSを変更して保存Chrome開発者ツールを使用してローカルファイルシステムで
今すぐ試してみましたが、変更された行を強調してうまく機能します。 [保存]をクリックするだけで完了です。 ：）
これとその他の詳細を説明するビデオがあります： Google I / O 2011：Chrome Dev Tools Reloaded
CSSファイルの編集中にブラウザを変更しても問題ない場合に役立つと思います。私は今のところすでに変更を行っていますが、この機能をFirebugに組み込みたいと思っています。 ：）
[アップデート1]
今日、私はこのビデオを見ました： Firefox CSSのSublimetextでのライブ編集（進行中）
[更新2]
Visual Studio 2013 を Web Essentials このビデオに示すように、CSSを自動的に同期できます。
他のヒント
かなり長い間同じことを考えていたようです、
firebugでのin-the-moment-freestyle-css'ingが次々と吹き飛ばされたとき、ただガッツリします
偶発的なリロードまたはその他....
意図と目的のために、ついにツールを見つけました。...： FireDiff 。
新しいタブが表示されます。おそらく、「変更」と呼ばれる奇妙なDavid Bowieの参照です。
どのfirebugを見る/保存するだけでなく、i。 e。あなた、やってきた、
必要に応じて、ページ自体によって行われた変更を追跡することもできます。
だから、再入力する必要がなく、再想像してから再入力する必要がないことに感謝します。
こちらは、開発者へのリンクです（最初の外観にdisされないでください。 Mozillaアドオンリポジトリに直接アクセスしてください。
Web Developerアドオンでは、編集内容を保存できます。 Firebugの編集とWeb Developerの保存機能を組み合わせたいと思います。
＆quot; 保存＆quot;ボタン（[CSS]メニュー-＆gt; [CSSの編集]をクリック）をクリックして、変更したCSSをディスクに保存します。
推奨事項：＆quot; スティック＆quot;他のブラウジングを行うためにタブを変更したときに変更が失われないようにするボタン。可能な場合は、1つのタブのみを使用して編集を行い、他のFirefoxウィンドウで関連する検索、ウェブメールなどを行います。
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ファイルを追加する必要がある代替手段です。
Mozillaアドオンサンドボックスで firebugアドオンをリリースしました。 https://addons.mozilla.org/en/firefox/addon/52365/
実際には「タッチ」を保存します; Webサーバーへのcssファイルのオンデマンド（1ファイルのwebservice phpスクリプトとの通信による）。
ドキュメントは、ホームページまたはアドオンページで見つけることができます
テスト、バグ報告、コメント、評価、議論はまだ初期のベータ版であるため、感謝しますが、すでに正常に動作するはずです。
最も近いのは、Firebugで編集モードに入り、CSSファイルの内容をコピーして貼り付けることだと思います。
Backfireを導入しました。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/
これはあなたの質問に答えないことはわかっていますが、驚くべきことに、Internet Explorer 8のFirebugクローン＆quot; developer toolbar＆quot; （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に送信し、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 セレクターを持たない可能性がある個々の要素を編集できます。そのため、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にこれらの小さな変更を加える必要がある場合、たとえば、背景色を設定し、保存を押して、いいえを確認しますよさそうだ。
機能する方法は、ファイルを保存するたびに（osレベルで）監視し、ファイルを処理し（これが拡張機能の機能）、websocketを介してブラウザにデータをプッシュし、その後処理されます（拡張機能のクライアント側）。
プラグインなどはしませんが、私はこの問題に長い間苦労しました。
役立つこと。
Firebugは、計算済み CSS（ファイルにCSSを取り、継承などを適用することで得られるものに加えて、JavaScriptで行われた変更）で動作します。これはおそらく、ブラウザ/バージョン固有のHTMLファイルに含めるために直接使用できなかったことを意味します（Firefoxだけを気にしない限り）。一方、オリジナルと計算されたものを追跡します...そのCSSをテキストファイルにエクスポートできるようにするために、FirebugにJSを追加することはそれほど難しくないと思います。
目の前のテキストをうまく選択してコピーできないのはなぜだろうと思っていました。特に、「選択してコピーする」ことができると他の人が言う場合。どうやら できるので、マウスダウンとして、任意のテキスト（つまり、テキストの上または左の溝）の外側にドラッグを開始するだけです。それはクリックまたはドラッグです-任意のテキストですぐにプロパティエディタが起動します。また、テキストの外側をクリックしてカーソルを取得し（常に表示されていなくても）、矢印キーで移動してテキストを選択できます。
クリップボードにコピーされたテキストには、残念ながらインデントがありませんが、少なくとも、CSSファイルの内容全体を手動で書き写すことはありません。オリジナルと比較するときに、差分プログラムに空白の変更を無視させるだけです。
ファイル名パラメーターとコンテンツパラメーターを取る独自のサーバースクリプトファイルを作成できます。
サーバースクリプトは要求されたファイルを見つけ、その内容を新しいファイルに置き換えます。
firebugの情報を利用して有用なデータを取得するJavascriptを作成するのは難しい部分です。
個人的には、firebugの開発チームに機能を提供するように依頼します。彼らにとっては難しくないはずです。
最後に、Ajaxは作成したphpファイルにファイル名/コンテンツのペアを送信します。
Firebug FAQ から引用：
ページの編集
表示しているWebページに加えた変更をソースに保存できますか？
今はできません。ジョン・J・バートンがニュースグループで書いたように：
Firebugでの編集は、ピクルスを取り出してレストランのサンドイッチにマスタードを追加するようなものです。結果を楽しむことはできますが、レストランの次の顧客はまだピクルスを受け取り、マスタードはありません。
これは長らく要求されていた機能なので、いつかFirebugから直接利用できるようになります。一方、 Firediff は、Kevin Deckerによるfirebugの拡張機能です。
firebug内でサイトのCSSに加えられたすべての変更を出力するにはどうすればよいですか
これは、Kevin Deckerの Firediff で実装されている機能です。
これは部分的な解決策です。変更を行った後、関連ファイルへのリンクのいずれかをクリックします。これは元のファイルですので、firebugペインの右上にあるオプションメニューボタンの下にあるファイルを更新する必要があります。これで、変更したcssページができました。これをコピーして＆amp;ペースト。明らかに、CSSファイルごとに行う必要があります。
編集： Mark Biek はより速いバージョン
「編集」する非常に簡単な方法あなたのページはインターネットブラウザ経由でサイトにアクセスします。ページをHTMLとしてのみデスクトップに保存します。デスクトップに移動し、新しいWebページファイルを右クリックして[開く]を選択し、メモ帳を選択して、そこからページを編集します（htmlが簡単な場合）。すべての編集が完了したら、ファイルを保存してWebページを再度開きます。正しく行われていれば、変更がそこにあるはずです。その後、編集した新しいページを使用して、リモートロケーションにエクスポートまたはコピーできます
実際、Firebugはデバッグおよび分析ツールです。エディターではなく、明らかに1つとは見なされません。もう1つの理由はすでに説明しました。Webページのデバッグ時にサーバーに保存されているCSSを変更する方法を教えてください。
