しゃのんあどべんとかれんだー 7日目 (JavaScript 一発ネタ console.table) 匿名 匿名 この記事は [Shanon Advent Calendar 2015](http://qiita.com/advent-calendar/2015/shanon) の 7 日目の記事です。 ![JS](http://2.bp.blogspot.com/-KFUv23DscEY/Vopw1NcqdPI/AAAAAAAAAVI/XktA6V9b0d4/s200/js_logo.png) # JavaScript の配列要素を楽に確認したい! という状況、ありますよね? 画面の table 要素の中身を Ajax で動的更新する際、JSON の配列が返ってきてごにょごにょとか、ありますよね? 例えば、こんな配列があったとします。 `var arr = [ { code: 100, msg: 'success' }, { code: 200, msg: 'warn' }, { code: 300, msg: 'error' } ];` この中身を確認する際、 `console.log(object)` を実行すると、JavaScript コンソールには `[Object, Object, Object]` と表示されて、中身を確認するのにクリックしまくりーの、他の要素と比較しづらいーのですよね。。。 ![console.log実行時](http://4.bp.blogspot.com/-rBcSvIrdJ08/Vng5YkOMhqI/AAAAAAAAARo/6Xs4ASrtUkk/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2015-12-22%2B2.30.33.png) # そこで console.table ですよ! これを使うと、配列の要素を1レコードとみなして、JavaScript コンソールにテーブル表示されます! 試しに、`console.table(arr)` を実行してみると。。。 ![console.table](http://4.bp.blogspot.com/-7lyJL90_3Rw/Vng6xwnJnzI/AAAAAAAAAR0/gXmu9h3TIWg/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2015-12-22%2B2.44.26.png) あら、見やすい。 [Mozillaのリファレンス](https://developer.mozilla.org/ja/docs/Web/API/Console/table)を見ると、より詳しいことがわかると思います。 デバッグの幅が広がりそうですね! レッツ Enjoy! (・ω・)ノ Tweet Share Share Share Share