[js] javascriptとかjQuery実行後のhtml(DOM)を確認する方法 with Chrome

もはや使ってないサイトを探すほうが難しいんじゃないかって感じの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でブラウザ操縦を良くするからだけども。笑)

そんなわけで、あんまり画期的な方法ではないですが、そんな感じですね。

おしまい

たった1行のためにだいぶ書きました。
要するにディベロッパツールのコンソールからパーン!(Enter)で出てくるよ、という話でした!

タイトルとURLをコピーしました