consoleってプログラマのデバッグモニターみたいに思っていたんだが、英語を直訳したら「慰める」って意味なんだね。
知らんかった・・・
もしかして、プログラマを慰める画面なのかな？
慰めて貰わなくてもいいのにね。
consoleの種類
恐らく誰もが、「console.log」を思い浮かべるだろうが、console関数は以下のような種類を持っている。
assert
count
debug
dir
dirxml
error
group
groupCollapsed
groupEnd
info
log
markTimeline
profile
profileEnd
time
timeEnd
timeStamp
trace
warn
こんなにいっぱいあるのに何で今までlogしか知らなかったんだろう・・・
そしてこの中には非常に便利な命令も存在している。
便利命令抜粋
プログラム進行の経過時間を計測する
console.timeEnd("hoge");
var count=0;
for(var i=0;i<10000;i++){count+=1}
console.timeStamp("hoge");
#結果
hoge: 1475930593732.358ms
timeからtimeEndで挟まれているプログラムの命令を計測するのだが、引き渡している値の"hoge"の部分を他の文字列に変更することでいくつかの計測を同時に走らせられる。
表示アイコンをコントロール
console.error("error!!");
console.info("info!!");
console.warn("warning!!");
アイコンを切り替えられるので、用途に応じて使い分けよう。
カウントアップ
console.count("hoge");
console.count("hoge");
console.count("hoge");
"hoge"という引数の呼ばれた回数を表示できる。
色んな関数に遷移するようなプログラムの回数計測を行うのがいいんじゃない？
メソッドのスタックトレース
console.trace($);
jQueryの読み込まれているページで上記をコンソール画面で実行すると、下記のような返り値が表示される。
PHPで言うところのvardumpみたいなものかもね。
配列をtable表示
var arr = document.getElementsByTagName("a");
console.table(arr);
エレメントを調査する時に使うと便利そうだ。
コンソールの無駄なデバッグ表示は本番ページでは不具合と見られてしまう
開発時点でのコンソール表示は非常に有効だし、バグ検知において、非常に有効なのだが、プログラムに埋め込んだまま本番リリースしてしまうと、不具合として捉えられてしまうケースもあるので、開発者は要注意だ。
そして残念なことにtimeEndなどは変数で保持したい所なのだが、コンソール画面に表示するしかできないのがconsole関数という事も理解しておこう。
画面以外のログに残すことも出来なければ、サーバーに残すこともできない。
もし変数として保持したければ、独自に計算して保持するしかないからね。
デバッグもユニットテストも、プログラムに埋め込む場合は、手作りで行い、コンソール画面に打ち込んで確認できるレベルで使うのがいいのかもしれない。
それぞれの環境で是非試してもらいたい。
そして、いい使い方があれば是非教えていただきたい。
参考ページ
1. 使い分けるだけで今すぐデバッグ効率を上げる、consoleオブジェクトの関数
2. MDN
3. consoleオブジェクトが持つlog以外の便利メソッド18（前編）
