Help us understand the problem. What is going on with this article?

[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

nakajmg
フロントの人。JavaScript/CSS/HTML
http://nakajmg.github.io/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away