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);
エディタに貼り付ける
前後のコンソールログもクリップボードに入るので、削除してください。
感想
コンソールに表示される時点でHTMLのインデントが整形されているようです。
改行が入るので見栄えそのままコピーとならない場合があります。