web-dev-qa-db-ja.com

Firebugで編集した後、操作されたDOM / HTMLを保存する

ランダムなサイト（slashdot.orgなど）でFirebugを有効にしてFirefoxを起動したと仮定します。サイトを読み込んだ後、Firebug > HTMLパネルを使用してページの編集を開始します。これまでのところ、私の変更はFirefoxですぐに表示されます。

私の質問：

  • 編集したDOMツリー（HTMLとして表される）を保存するにはどうすればよいですか？
  • 以前に操作したDOMツリー/ HTMLファイルをページの「元のコンテキスト」（例ではslashdot.org）にロードするにはどうすればよいですか？すべての参照エンティティ（CSS、画像など）が正しく読み込まれるように、元のコンテキストが必要です。
htmlfirefoxdomfirebug
14
knorv

編集したDOMツリー（HTMLとして表される）を保存するにはどうすればよいですか？

Firebugには、現在のDOMをファイルに保存するために使用できるメソッドは含まれていません。ただし、FirebugをWeb Developer拡張機能と組み合わせて使用​​して、DOMをファイル（HTMLとして表される）に保存することができます。

FirebugでDOMの操作が完了したら、Web Developer (toolbar at the top) > View Source > View Generated Source > Archive > Save Page As...を選択します。

以前に操作したDOMツリー/ HTMLファイルをページの「元のコンテキスト」（例ではslashdot.org）にロードするにはどうすればよいですか？すべての参照エンティティ（CSS、画像など）が正しく読み込まれるように、元のコンテキストが必要です。

Firebugには、以前に保存したDOMツリーをページの「現在のコンテキスト」に再読み込みするメソッドは含まれていません。ただし、FirebugをWeb Developer拡張機能と一緒に使用すると、要求された機能を実現できます。以前に保存したHTMLをメモ帳などのエディターで開き、HTMLをクリップボードにコピーするだけです。次に、Web Developer > Miscellaneous > Edit HTMLを選択し、HTMLを貼り付けます。完了！

8
knorv

「元のコンテキスト」の意味はわかりませんが、保存したHTMLの先頭に次のように追加してみてください。

 <base href = "http://slashdot.org/" />
2
johnmdonahue

CssUpdaterを試してみてください。これは、ソケットサーバーを介してFireBug cssの変更をリッスンし、元のcssソースファイルを同期できるFireFoxアドオンで構成されています。デスクトップアプリケーションもインストールする必要があります。

したがって、ワークフローは次のようになります。

  1. FireBugで編集
  2. CssUpdaterで[同期]をクリックします
  3. サイトをリロードして、変更が保存されていることを確認します

ここでテストして使用できます http://www.cssupdater.com

1
Jhonte

FirebugのHTMLセクションにいるときは、Firebugのメインツールバーのすぐ下のバーに[編集]ボタンがあります。このボタンをクリックすると、HTMLのプレーンテキストビュー（編集内容を含む）が表示され、テキストエディタにコピーできます。

1
Derek Swingley

これは良い質問だと思います。つまり、firebugは編集内容を「保持」するように作成されていないため、ページに「深く」入りすぎないワークフローを見つけることをお勧めします。 1つは、HTMLを保存することですが、編集したCSSを保存するのはさらに困難です。これがあなたの質問に対する私の解決策です：

  1. HTMLタグをクリックし、[編集]をクリックします。コピーして別のテキストファイルに貼り付けます。

  2. Firebugで操作されたHTMLを「リロード」することはできません。ただし、結果に満足した後（または不満になった後）に、操作されたHTMLをコピーできます。クリップボードに保存してテキストファイルにコピーし、再度使用する場合は、Firebug編集コンソールにコピーして戻す必要があります。

1
Jesse Burcsik

ファイル→名前を付けてページを保存...編集したマークアップをHTMLとして保存しますが、Firebuで生成されたコンテンツも保存できるようです（正確にはwhatはFirebugのバージョン）。

0
Alex Barrett

試すことができることの1つは、Webページを選択して（右クリックし、ポップアップメニューからすべてを選択）、[選択ソースの表示]を選択することです。これにより、変更されたHTMLがソースウィンドウに表示され、エディターでコピーして保存できます。テキストエディタで削除できるFirebugによって追加されたものがいくつか追加される場合があります。

0
user165097

外部エディターを構成できます。 Firebugを開きます。左側にFirebugアイコンがあり、それを押してエディターで開くをクリックしてから、エディターを構成します。 GeditとBluefishで動作します。

Geditを構成するには：FireBugの構成エディターを開いて[追加]をクリックし、geditという名前を付けてから、「usr/bin」内の実行可能ファイルを参照し、geditを選択または入力します。保存する前に構成をテストできます。

0
lapisdecor