10月 122012
 
このエントリーをはてなブックマークに追加
はてなブックマーク - JavaScript デバッグ方法 まとめ
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Post to Google Buzz
Bookmark this on FC2 Bookmark
Share on FriendFeed

 

JavaScriptのデバッグ方法についてまとめてみました。

 

デバッグ方法を知らないと、効率が悪い。

そんな事は百も承知だが、そんなに困る事もないので大方の人達は以下の方法を取っていると思われる。(少なくとも以前の僕はそうだった)

 

alert(hoge);

でhoge変数の中身を確認したり

 

console.log(hoge);

でchrome、Safari、IE(8以上)、FireFox(Firebug使用) のコンソールを利用したり

 

 

・・・そんな事では、いかん! と思い、家にあったパーフェクトJavaScriptなんぞを手にとってみる。

デバッグ方法が、P231~236に詳しく書いていました。  以下は、その中より抜粋したものです。

 

●alert

printfデバッグのJavaScript版。 どのWebブラウザでも利用可能。

これをコード内に大量に仕込むと、alertダイアログが沢山出てくる。先に進めるためにはそれをいちいち閉じる必要が出てくる。本著では、この方法はあまりお勧めできないと書いている。 うん、今後は使わないでおこうww

 

●console

もともとのFirefoxのアドオンであるFirebugで実装されていた機能。Firebugを利用する開発者が多かった為、Safari、Chromeなどで標準搭載するようになったとの事。(へぇ~ x 3)

いちいち、ダイアログを閉じるような操作は必要ないので、alertよりも使い勝手が良い。またalertよりも詳細情報を表示する事が出来る。

console.log()、console.debug()、console.error()、console.warn()、console.info()等があるが、log()とその他のメソッドとの違いは、行数が出たり、アイコンや文字の色が異なるぐらいとか。基本的には、console.log()を知っていれば十分との事。

他にも、consoleの各メソッドを利用したデバッグ方法が書かれていた。 全てここに書くと記事が長くなるので、以下のページに分けて書きました。色々あるものですねぇ。 これで開発効率アップ間違いなし!?

 

 

って、結局Consoleに頼ってデバッグすることになるのですねぇ。

他にいい方法を見つけたらまた更新しますね(^^)

 

 


 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam Protection by WP-SpamFree

Get Adobe Flash player