Ajaxで動的に作成されたHTMLソースをファイルに保存する方法

Ajaxなサイト(HMLTエレメントが動的に生成・削除される)については、ブラウザの「ソースを表示」をしてもタグの構造などが見えません。

Gmailに至っては、bodyタグすら無いのです。


Firefox拡張であるFirebugを使い、『Html』タブをクリックすることで、Ajaxなサイトでも全てのHTML構造を見ることができるようになりました。


しかし、ここで表示されるHTMLをもろもろの理由でファイルに落としたい場合、HTMLのコピーが取れれば良いのですが、
Firebugで表示されるHTMLは、ブロック要素ごとに開閉する機能(最初は閉じている)があるためにその全文をコピーしてHTMLを作成することが難しいのです。
(全部のブロックを開いてあげる必要がある)


Fireclipseという、コンソールの内容をEclipseのコンソールに転送するプラグインもあるようなのですが、インストール方法が分からない...というかまだ出来てない??


というわけで、私のやっているやり方です。Gmailを例に手順を記します。

目的のサイトにアクセスしてFirebugのConsoleを開き、コマンドを入力

Consoleには以下のコマンドを入力します。

console.dirxml(document);

アップしている画面ですが、FirebugのConsoleのOptionsで 「Larger Command Line」を有効にしています。

Runボタンを押し、HTMLがコンソールに表示されるのを待つ

ここで注意です。
ちょっと時間がかかる場合があります。また、コマンドが空振りする場合もあります。
(処理中はRunボタンが押されたままの状態になる)


空振りした場合はFirefoxを再起動してもう一度試すと上手くいったりします。

コンソール上で、コマンドの行に戻り、コマンドをクリックする

さて、このHTMLをコピーする方法です。

表示されているHTMLをクリックするとHTMLタブに飛ばされてしまうので、なんとかコンソール内にフォーカスを当てるために、上部のコマンド行をクリックします。

画面上にある、以下の行がそのコマンド行です。

>>> console.dirxml(document);

Ctrl + a と Ctrl + Cでコンソールの全文をクリップボードにコピーする。

コピーに成功しました。

エディタに貼り付ける

前後のコンソールログもクリップボードに入るので、削除してください。

感想

コンソールに表示される時点でHTMLのインデントが整形されているようです。
改行が入るので見栄えそのままコピーとならない場合があります。