javascriptのデバッグにはconsole.tableを使おう

配列やオブジェクトを綺麗に表示するconsole.table

javascriptのソースをデバッグしていたのですが、みなさん変数の確認はどうしていますか?

やはりconsole.log関数を呼び出しますよね。実はconsole.ほにゃららには仲間が居て、その中のconsole.tableさんがすごい便利でしたので知らない方は是非使ってみてください。

最初は「ほげー、console.logに適当に配列とかなげてもちゃんと見れる、すげー」とか言っていたのですが、console.tableに出会って目玉が吹っ飛ぶかと思いました。

 

百聞は一見にしかず

緯度と経度の配列をconsole.tableで表示してみます。

f:id:myon886:20160801233517p:plain

はいドン!

どうですか綺麗なテーブルでしょう!

これでもう左のちっちゃい三角を押す必要がなくなりました。

 

ちなみにこれはChromeです。他のブラウザでどう表示されるかはわかりません。

 

その他にも時間を計測したり、関数の呼び出し元を調べたりと、デバッグに便利な機能が以下のサイトで詳しく解説されていました。

postd.cc

 

これでjavascriptデバッグが捗りそうです。