【Javascript】consoleオブジェクトが持つlog以外の便利メソッド18（後編）
こんにちは、橋本です。
前回にひきつづき、Safari、ChromeのWebインスペクターやFirefoxのFireBugで使えるconsoleオブジェクトの使い方について書いてみたいと思います。
consoleオブジェクトには以下の19個(logを除くと18個)のメソッドがあります。
- assert
- count
- debug
- dir
- dirxml
- error
- group
- groupCollapsed
- groupEnd
- info
- log
- markTimeline
- profile
- profileEnd
- time
- timeEnd
- timeStamp
- trace
- warn
そのうち前回は、assertメソッドからgroupEndメソッドまで見て行 きました。
今回はinfoメソッドからwarnメソッドまでの使い方について書いていきたいと思います。
infoメソッド
console.info(message-object)
引数で渡されたメッセージをインフォメーションアイコンつきで表示するメソッドです。
Safariではアイコンが表示されませんでしたが、FireBugでは表示されています。
var hoge = 'インフォだよ？';
console.info(hoge);
前回紹介したerrorメソッドや、のちほど紹介するwarnメソッドと一緒につかって、メッセージに意味付けを行うと便利に使えると思います。
logメソッド
console.log(message-object)
ご存知logメソッドです。引数で渡された値を出力します。
引数の値なのですが、カンマ区切りで複数渡すことも可能です。
また、あまり知られていないと思いますが、logメソッド(debugなどのメッセージを出力する系のメソッドも含む)では、printf-styleのプレスホルダの一部を使用することも可能です。
- %s 文字列
- %d, %i 数値
- %f 浮動小数点数
- %o オブジェクトへのリンク
など。
FireBugでは、%cプレースホルダをつかって、メッセージのスタイルを設定することもできます。
以下、サンプルです。
var str = 'ほげほげ',
intNum = 10,
floatNum = 10.12345678,
obj = {hoge: 'hoge'},
styl = 'color: hsl(0, 50%, 50%);font-weight: bold;';
console.log(str, intNum, floatNum, obj);
console.log('文字列: %s', str);
console.log('数値(整数): %i', intNum);
console.log('数値(整数): %d', intNum);
console.log('数値(浮動小数点数): %f', floatNum);
console.log('オブジェクト: %o', obj);
console.log('%cFireBugでスタイル指定', styl);
プレースホルダはなにげに便利なので、今まで使ったことのない人は是非使ってみてください。
markTimelineメソッド
console.markTimeline(“string”);
markTimelineメソッドは、その他のコンソールに出力するタイプのメソッドとは異なり、WebインスペクターやFirebugのタイムラインビュー上でメソッドが呼ばれたポイントに、引数で渡されたラベルを表示するというものになります。
サンプルと実行結果をお見せしたいのですが、自分の実行環境では実行結果を確認できなかったため、今回はスキップさせて ください。すみません。
profileメソッド, profileEndメソッド
console.profile([title]);
console.profileEnd([title]);
profileメソッドとprofileEndメソッドは、関数の解析（実行にかかった時間など）を行うためのメソッドです。
profileメソッドが呼ばれてから、profileEndメソッドが呼ばれるまでの間に実行された関数について解析を行います。
profileメソッドとprofileEndメソッドにはそれぞれタイトルを設定することが出来、profileEndメソッドにタイトルを渡した場合、そのタイトルに対応するprofileメソッドのみ解析を終了します。（指定しない場合には、すべてのprofileメソッドの解析を終了します。）
以下、サンプルです。
function hoge() {
var ret = 0;
for (var i = 0; i < 100000; i++) {
ret += i;
}
console.log(ret);
}
function fuga() {
var ret = 1;
for (var i = 1; i <= 10; i++) {
ret *= i;
}
console.log(ret);
}
console.profile('a');
console.profile('b');
hoge();
console.profileEnd('b');
console.profile('c');
fuga();
console.profileEnd('c');
console.profileEnd('a');
特定箇所の関数の実行速度や実行内容を確認したい場合に有用ですね。
timeメソッド, timeEndメソッド
console.time(name);
console.timeEnd(name);
timeメソッドとtimeEndメソッドは、タイマーの開始と終了を行うメソッドです。timeメソッドでタイマーを開始し、timeEndメソッドでタイマーを終了し、時間をlogに表示します。
以下、サンプルです。
function hoge() {
var ret = 0;
for (var i = 0; i < 10000000; i++) {
ret += i;
}
console.log(ret);
}
function fuga() {
hoge();
hoge();
}
console.time('all');
console.time('hoge');
hoge();
console.timeEnd('hoge');
console.time('fuga');
fuga();
console.timeEnd('fuga');
console.timeEnd('all');
実行速度を計りたいときは、これで決まりですね。
timeStampメソッド
console.timeStamp(“string”);
timeStampメソッドは、メソッド実行時の時間をlogに出力するメソッドです。
FireBugでは実行結果を確認できたのですが、Safari, Chromeでは実行結果を確認できませんでした。
以下、サンプルです。
function hoge() {
var ret = 0;
for (var i = 0; i < 10000000; i++) {
ret += i;
}
console.log(ret);
}
function fuga() {
hoge();
hoge();
}
console.timeStamp('start');
hoge();
fuga();
console.timeStamp('stop');
このメソッドの使いドコロは、いまいち思い浮かびませんでした。
常にスクリプトの最初に実行しておくようにすれば、logを見て、
「いっけねー、もうこんな時間！」
なんて感じで、時間管理に便利かもしれませんね。
traceメソッド
console.trace();
traceメソッドは、メソッド実行時のスタックトレースを表示するメソッドです。
以下、サンプルです。
function hoge() {
function fuga() {
function piyo() {
console.trace();
}
piyo();
}
fuga();
}
hoge();
どのメソッドを経由して来たのか、ということを確認したい場合には有用かもしれませんね。
warnメソッド
console.warn(message-object)
引数で渡されたメッセージを警告アイコンつきで表示するメソッドです。
var hoge = '警告です！！';
console.warn(hoge);
前回 紹介したerrorメソッドや、infoメソッドと一緒につかって、メッセージに意味付けを行うと便利に使えると思います。
以上、前回と今回の２回に渡り、consoleオブジェクトのメソッドについて見てきました。
使えそうなものや、いまいち使えなさそうなものなど様々ありますが、
いろいろと試してみて、便利なメソッドは是非使っていっていただければ思います。
