JavaScriptのデバッグ方法についてまとめてみました。
デバッグ方法を知らないと、効率が悪い。
そんな事は百も承知だが、そんなに困る事もないので大方の人達は以下の方法を取っていると思われる。（少なくとも以前の僕はそうだった）
alert(hoge);
でhoge変数の中身を確認したり
console.log(hoge);
でchrome、Safari、IE(8以上)、FireFox(Firebug使用) のコンソールを利用したり
・・・そんな事では、いかん！ と思い、家にあったパーフェクトJavaScriptなんぞを手にとってみる。
↓
デバッグ方法が、P231～236に詳しく書いていました。 以下は、その中より抜粋したものです。
●alert
printfデバッグのJavaScript版。 どのWebブラウザでも利用可能。
これをコード内に大量に仕込むと、alertダイアログが沢山出てくる。先に進めるためにはそれをいちいち閉じる必要が出てくる。本著では、この方法はあまりお勧めできないと書いている。 うん、今後は使わないでおこうｗｗ
●console
もともとのFirefoxのアドオンであるFirebugで実装されていた機能。Firebugを利用する開発者が多かった為、Safari、Chromeなどで標準搭載するようになったとの事。(へぇ～ x 3)
いちいち、ダイアログを閉じるような操作は必要ないので、alertよりも使い勝手が良い。またalertよりも詳細情報を表示する事が出来る。
console.log()、console.debug()、console.error()、console.warn()、console.info()等があるが、log()とその他のメソッドとの違いは、行数が出たり、アイコンや文字の色が異なるぐらいとか。基本的には、console.log()を知っていれば十分との事。
他にも、consoleの各メソッドを利用したデバッグ方法が書かれていた。 全てここに書くと記事が長くなるので、以下のページに分けて書きました。色々あるものですねぇ。 これで開発効率アップ間違いなし！？
- JavaScriptでオブジェクトの内容を確認する方法 （ console.dir()メソッド ）
- JavaScriptで関数がどこから呼ばれたか調べる方法 （ console.trace()メソッド ）
- JavaScriptでレスポンス（パフォーマンス）速度を計測する方法 （ console.time()メソッド ）
- JavaScriptでアサーションを使う （ console.assert()メソッド ）
って、結局Consoleに頼ってデバッグすることになるのですねぇ。
他にいい方法を見つけたらまた更新しますね(^^)
