search
LoginSignup
214

More than 5 years have passed since last update.

posted at

updated at

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
214