カメニッキ

カメとインコと釣りの人です

JavaScriptのデバッグ時に、変数やオブジェクトの中身を確認する

old

JavaScriptで作成したプログラムをデバッグしている時に、ある時点での変数やオブジェクトの中身がなんなのかを確認したい事がよくあると思います。
現在、主要ブラウザにはデバッガが搭載されているので、ブレークポイント等で動きを止めつつ、変数を覗いて確認することは出来ます。
しかし、逐次変化する変数をいちいちブレークポイントで停止させながら追っていくのは非常に面倒くさいです。
ましてや、いちいちalert()で出すなど以ての外です…。（僕は毎回これでやってて大嫌いになりました）

そこで今回はデバッガのコンソールに出力させる方法を紹介します。

■console.log()を使う
引数に渡した値をデバッガのコンソールに出力させることが出来ます。カンマ区切りで複数指定することも可能です。

例：1から１０までインクリメントしている変数iを確認したい場合
javascript

for(var i=1;i<=10;i++){
　　console.log("i = " + i);
}

コンソール

i　=　1
i　=　2
i　=　3
i　=　4
　…

■console.dir()を使う
引数に渡したオブジェクトをデバッガのコンソールに出力することが出来ます。「document」や「window」などをまとめて確認したい時に非常に便利です。

例：documentを確認したい場合
javascript

console.dir(document);

コンソール

HTMLDocument
　…

■おまけ〜デバッガの起動方法
主要ブラウザのデバッガ起動方法をメモしておきます。

javascriptをデバッグする以外にも、html要素の検証等行えるので非常に便利です。
是非活用してみてください。