HTML
CSS
JavaScript
Chrome

[Chrome] console.log()の色々な書き方

More than 5 years have passed since last update.
console.log('しゅつりょく');
console.log(obj);

こんな感じで書くのが普通ですが、引数として出力する変数を取る書き方がいくつかあります。

var str = "もじれつ";
var num = 555;
var flo = 1.7320508075;

console.log('Stringの出力 : %s', str);
console.log('Numberの出力 : %d', num);
console.log('Floatの出力  : %f', flo);

console.log('複数出力 : %s %d %f',str,num,flo);

出力結果

Stringの出力 : もじれつ 
Numberの出力 : 555
Floatの出力  : 1.7320508075 

複数出力 : もじれつ 555 1.7320508075

floatの桁数指定とかはまだ実装されてないみたいです。


他にもハイパーリンクとして出力、スタイルを指定して出力なんかもあります。

var url = "http://qiita.com/"
var sty = 'color:#fff;background:#000;';

console.log('Linkの出力   : %o', url);
console.log('%c:スタイルを指定して出力', sty);

出力結果

Linkの出力   : "http://qiita.com/" ※ console上でクリックすると飛べるようになります
:スタイルを指定して出力 ※ console出力すると実際には黒背景に白文字になります

Cライク?な書き方ができるのがおもしろい。

console.log()で文字列連結して変数の出力するときとか、ちょっと楽かも?


※追記
%O指定の出力について書きました。
console.log()でオブジェクトを出力するときにラベルをつける方法


参考URL:Chrome Devtools Cheatsheet