FirebugでCSSの変更を保存できないのはなぜですか?[閉まっている]


143

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

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

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

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

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

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

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


しばらく前に私がグループに対して行った投稿は次のとおり
group

cssUpdater.comを試しましたか?FireBugで編集したら、[今すぐ同期]ボタンをクリックして、すべての変更を元のCSSファイルに転送します。
ジョンテ

2
Firebugには、これを行う特定の方法があります。右側のcssビューでルールを追加してcssをいくつか変更した後、右端の参照されているスタイル要素のアドレスをクリックし、トップメニューのドロップダウン(ソース編集ではない)から[ライブ編集]を選択して、ライブ編集であなたの心のコンテンツにコピー/貼り付けます。
Chris Like

ローカルファイルの変更時にブラウザで自動再読み込み。そうすれば、エディターに留まることができます。ただし、ローカルでのみ機能します。
Nils Lindemann

回答:


27

私はこの機能を正確に探して、つまり編集した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:ブラウザーツールの統合


1
別のオプションは、クロムカナリアであなたは、JSとCSSファイルの直接マッピングを有効にすることができカナリアワークスペース実験有効にする方法については、この記事を参照して、ありdevcoma.blogspot.it/2013/01/...
マッテオ・コンタ

とてもいい@contam。物事は本当に進化しています!更新していただきありがとうございます。:)
Leniel Maccaferri 2013

@LenielMacaferi [Update 2]:Web Essentialsで実際のCSSを更新することはできませんでした。設定する必要がある構成はありますか?
Arvand、2016年

104

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

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

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

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

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


そのような小さなツールで、多くの工数が節約され、今日は全員が勝者です;-) FireDiffを離れて作者に乾杯。ToDo:メール作成者、感謝の気持ちを表明
Morten Bergfall 2009

著者はケビン・デッカーです。次のユーザーである可能性があります:stackoverflow.com/users/238459/kevin-decker
Jonathan Parker

はい、彼のサイトへのリンクは同じなので、このユーザーです。
ジョナサンパーカー

1
神の甘い母。これは素晴らしいです。
Jason

3
OMG-とてもオタクが爆発しました!
グリセリン

15

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

代替テキスト

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

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


1
私はWeb開発者プラグインを使用しています。しかし、私はオプションを探してみましたが、見つかりませんでした。新しいスタイルシートを保存するにはどうすればよいですか?
ディーンむしろ

FirebugでCSSを編集すると、変更がWebDeveloperツールバーの「CSSの編集」に同期されません。それらをどのように同期しますか?
Gerold Meisinger

13

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

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

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

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


13

CSS-X-Fire

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

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

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

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

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

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

FireFile

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


素敵な発見!しかし、FirebugとIntelliJ以外の他のMac IDEまたはエディターとの間に同様の導管があるのだろうか。
Henrik

@hcedあなたの願いは叶えられました、FireFileをチェックしてください。
ソリン


9

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


それが私が探していた解決策でした...今まで気づかなかった明白な答えが大好きです。CthuluはStackOverflowをすべての形で呪っています。
OhkaBaka 2010

2
BAH ...それは機能しません...それは元のソースです...そしてそれは私のすべての変更を一掃しました。
OhkaBaka 2010

7

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/


素晴らしいですね。そして、WebKit Web Inspectorについても?わーい!
jocap 2010年

3

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

Firebugを使用して、誰もがそうであるようにCSSをいじる場合は特に役に立ちませんが、正しい方向への一歩です。


3

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

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

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

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

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

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

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

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


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


いいですね、やってみます!
Dean Rather

3

私は、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/


3

FireFile

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

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


2

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




2

私もこの問題を永遠に経験し、最終的に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でブラウザーを更新することです。このよう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を介してデータをブラウザにプッシュし、その後処理されます(クライアント側)拡張子)。

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

お役に立てば幸いです。


1

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


1
これは完全に真実ではありません。Firebugは、要素に適用されるすべてのスタイルを表示します。スタイルは、それらがどこから来たのかを含み、より具体的/後発/重要なルールによって置き換えられている場合は、それらを取り消し線で囲みます。あらゆるレベルでルールを変更/追加できます。計算されたスタイルのみを表示するオプションもありますが、デフォルトのビューではすべてのスタイルが表示されます。
SpoonMeiser 2009年

1

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


1

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

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

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

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

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


1

Firebug FAQから引用:

ページの編集

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

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

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

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

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

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


0

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

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


組み合わせる方法:コピーと貼り付けにはMark Biekのソリューションを使用しますが、Eduardo Molteniのソリューションを使用し、それを開発者ツールに貼り付けて保存します。それが今のところです。これがFBに追加されていればいいのですが!
Rob

0

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


1
本当ですが、問題は、Firebugで行われた変更を適用したCSSファイルを保存する方法だと思います。
Henrik

-4

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


なぜあなたが反対票を投じられたかはわかりませんが、私から+1されます。人々がこのほぼ不可能である機能を求め続ける主な理由の1つは、デバッガーとエディターの違いを理解していないことです。
NickFitz 2009年

4
Firebugは、デバッガではない問題を解決するために作成されました。解決する必要がある別の問題がある場合、なぜそれをFirebugに追加できないのですか?
ジョナサンパーカー

3
確かに、Firebugはデバッガですが、たとえばCSSを編集できるのはなぜですか?デバッガーが変更された出力の結果を保存できないようにすべきだと誰が言いますか?私の印象は、Firebugは非常に多くの人にとって非常に多くのことです。一部の人にとっては、デバッガーの使用や関数のステップイン/アウトなどが主なものです–それでも、一部の人にとっては、ライブ更新でCSSを変更する機能が主な取引です。
Henrik
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.