もはや使ってないサイトを探すほうが難しいんじゃないかって感じのjavascriptやjQueryですが、サイト作成の時に、実行後のDOMの状態がどうなってるのかを確認できなくて苦労した経験ありませんか？
HTML(DOM)が不明
javascriptやjQueryを使うとページが動的に変化してくれて、それはそれで嬉しいんだけど、その結果、いまHTMLというかDOMがどんな状態になってるのかよくわからない！ということありませんか？
私はよくあります！！
特に内部でどんなことをしてるのかよくわかってないjQueryのライブラリ何かを使うと、もはや応用なんて全く効かせられないくらいわかりません。
で、そんなときはどうしても、実行結果のHTMLがみたいですよね。
chromeで見るなら
chromeでソースを見る、で出てくるHTMLはjavascript実行前のデフォルトのHTMLです。なので、結果がわからない！！
そこで、以下の方法で確認が可能みたいです。
ブラウザ右上のメニューから「その他のツール -> ディベロッパーツール」です。あるいは「Ctrl+Shift+I」ですね。どっちでもディベロッパツールが開きます。
それで、ディベロッパツールのメニューの一番右にある「console」を押して、そこに以下の文言を記載します。
document.getElementsByTagName("HTML")[0].outerHTML);これだけです！
たったこれだけで、見ることができます。（ただ見にくい）
なんか他にいい方法ないですかね…
chrome以外で見る方法
どうもfirefoxで見ると常にリアルタイムのHTMLが見れるみたいです。
それから、vbaでdom操作してエクセルに書き出してあげる、なんてのも私の場合はよくやります。（VBAでブラウザ操縦を良くするからだけども。笑）
そんなわけで、あんまり画期的な方法ではないですが、そんな感じですね。
おしまい
たった１行のためにだいぶ書きました。
要するにディベロッパツールのコンソールからパーン！(Enter)で出てくるよ、という話でした！
