groundwalker.com

Javascript で書き換えられた後の Webページの内容を表示するブックマークレット(bookmarklet)

ソース表示

Javascript で書き換えられたページの内容を確認する方法として、

• document.body.innerHTML を表示
  参考: Kazuho@Cybozu Labs: Ajax な HTML ページのソースコードを表示する
• document.documentElement.outerHTML を表示
  参考: spiritlooseのはてなダイアリー - 見ているページのソースを表示するBookmarklet
• (Firefox限定) ページ全体を選択して、「選択した部分のソースを表示」
  参考: Yak blog - FireFoxで動的な HTMLソースを表示する

などが紹介されているが、document.body.innerHTML だと body限定の表示になるし、outerHTML は FIrefoxでは機能しない（参考 Hatena::Group::Perl - perl 覚え書き日記 - [JavaScript]innerHTMLとか（IEとFireFoxの差異）。「選択した部分のソースを表示」は狭い範囲だと手軽でいいのだが、複雑なページだと処理が重いようだ。

というわけで、document.documentElement.innerHTML を表示するのが クロスブラウザ的にもよいんではないかと。ポップアップブロックされていると動かないけど、こんなかんじ↓。

var w=window.open('');
if (w) {
    var d=w.document;
    d.write('<xmp>'+document.documentElement.innerHTML+'</xmp>');
    d.close();
}

<xmp>（<plaintext>も）は W3C の仕様では廃止されている（参考：Obsolete Elements of HTML）のだが、IE, Firefox, Safari でまだサポートされているので実用上はよしとする（してください）。上記コードは IE6, Firefox2, Safari で動作確認した。

ということで、見ているページの現在のソースを確認する Bookmarklet

ソース表示