JavaScript で生成したコードのソースを見る (2) IE 編

以前 JavaScript で生成した HTML コードを見る方法を firefox 限定で紹介して、IE で同じことはできないものかと書いた。そしたら、Climber(通りすがり) さんがコメントを、MOONGIFT さんがトラックバックを下さった。ありがとうございます。

彼らのコメントを纏めると、こうなる。

1. IE 自体に JavaScript で生成した HTML コードを見る機能はない。
2. タグ・ブラウザー unDonut に、選択部分のコード表示機能がある　(by MOONGIFT さん)。
3. タグ・ブラウザー Sleipnir にも、同様の機能がある (by Climber さん & MOONGIFT さん)。

というわけで、お二方の支持を受けた Sleipnir を試してみた。

Sleipnir 2.0 beta3

Sleipnir は丁度 version 2.0 のベータ版が出ていた。新らし物好きとしては試さずにいられない。Sleipnir は HTML レンダリング・エンジンとして、IE コンポーネントと Gecko を切り替えられるらしい。Gecko は firefox で利用されている。今回欲しいのは IE と同じ出力なので、Gecko エンジンには拘らない。

インストールは簡単で、公式ホームページにあるインストーラー版をダウンロードして実行するだけ。IE の設定を引き継ぐことができるので、すぐに使える。

機能豊富なようだけれども、まずは範囲を指定して HTML のソースを見てみる。firefox だと右クリックでできたけど、Sleipnir ではメニューの [表示] から「選択範囲のソースを見る」を選ぶ。すると、凶悪なことに Word が起ち上がった （なんてこった!）。これはメニューから [ツール]->[インターネット・オプション]->[プログラム] と辿って、「HTML エディター」を Word 以外のもの （Notepad しか見つからなかったけど...) に変えればいい。JavaScript で生成したコードも見れた。

しかし、見えなくもある。

ただし、この機能、firefox ほど完璧ではないように見える。今回、生成されてるはずのコードは

<span id="foo" onclick="function(){bar();}">hogehoge...

なのに、Sleipnir で見ると

<span id="foo">hogehoge...

onclick 属性が抜けてしまった （firefox なら、もちろん大丈夫）。でも、hogehoge をクリックすると、関数 bar は呼ばれてる。この onclick は span_node.setAttribute('onclick','function(){bar();}'); のように設定したのだけど、それが拙いのかな? なんか IE は setAttribute 系と相性が悪そうだし。それとも、Sleipnir のバグだろうか。うーん、ドツボに嵌って行く感じ。