「要素の詳細を表示」の仕様

Safariの右クリックメニュー内にある「要素の詳細を表示」はソース表示と似たような感じですが、ソース表示と決定的に違う点に先日、今更気付きました。
それは、「要素の詳細を表示」ではJavaScript実行後のDOMツリーが完成した状態を表示することです。
通常のソース表示はHTMLファイルをそのまま表示するので、JavaScriptで生成されたタグや文章などは反映されてません。
今までJavaScriptで動的に処理した結果を、ソースはこんな感じになってるなと想像だけでやっていましたが、これでちゃんと結果を見ることが出来ますね。
尚、現在構造解析は色んなブラウザに搭載されていますが、FireFoxで試したところやはりDOMツリー完成後の状態が表示されました。
個人的にはSafariの解析よりFireFoxの方が使い勝手が良さそうでした。



よくわかるJavaScriptの教科書 教科書シリーズ

よくわかるJavaScriptの教科書 教科書シリーズ