Posted at

console.logまとめ 2016年夏

More than 1 year has passed since last update.

console.log関連についてまとめました。

モダンブラウザであればどれも使用できると思いますが、基本出力結果等はchromeで確認したものです。


console.hogehogeのいろいろ


console.log

基本

スクリーンショット 2016-08-16 18.59.32.png

引数を入れることで出力結果をカスタマイズできます

スクリーンショット 2016-08-16 19.00.30.png


console.info、console.warn、console.error

それぞれで見た目を変えることができます。

スクリーンショット 2016-08-16 19.03.55.png

スクリーンショット 2016-08-16 19.04.19.png

スクリーンショット 2016-08-16 19.04.52.png


console.assert

式を評価してfalseの場合にログ出力します。

スクリーンショット 2016-08-16 19.05.49.png


console.count

ログの出力結果が同じ場合にカウント数が自動的に増えていきます。

スクリーンショット 2016-08-16 19.07.22.png


console.dir

オブジェクトのプロパティの中身をログに出力します。

スクリーンショット 2016-08-16 19.08.08.png


console.dirxml

HTMLとかXMLの要素を渡すと、下の要素が全部見れるようになります。

スクリーンショット 2016-08-16 18.58.01.png


console.group、conosle.groupCollapsed

console.logをグループ化して見やすくします。

console.groupで開始して、console.groupEndで終了。

console.groupCollapsedで開始をするとデフォルトでグループが閉じた状態でログに出力されます。

スクリーンショット 2016-08-16 19.09.14.png


console.profile、console.profileEnd

console.profileから.profileEndまでの、javascriptのCPU profileが見れます。

下記のようにtestを設定すると

スクリーンショット 2016-08-17 19.56.41.png

Profilesパネルにtestが追加されます

スクリーンショット 2016-08-17 19.58.05.png


console.time、console.timeEnd

console.timeからconsole.timeEndまでの時間を測れます。

スクリーンショット 2016-08-16 19.10.32.png


console.timeStamp

chromeの検証 > Timelineに追加することができます。

  function hoge() {

ret = 0;
for(var i=0; i<100000; i++) {
ret = i;
}
console.log(ret);
}
console.timeStamp("hogeStamp")

スクリーンショット 2016-08-16 18.34.31.png


console.trace

メソッド実行時のスタックトレースが見れます。

どのメソッド経由してきたかが知りたい時に便利。

スクリーンショット 2016-08-16 19.11.26.png


console.table

テーブル表示ができます。

スクリーンショット 2016-08-17 20.08.31.png


文字列の置換とフォーマットの設定

特定の文字列を置換できます。

使いみちあんまりわからないけど、、、

置換文字

%s
string型の置換

%i,%d
int型の置換

%f
float型の置換

%o
DOM要素の置換

%O
JavascriptObjectの置換

%c
スタイルの置換

%s

スクリーンショット 2016-08-17 19.40.33.png

%i,%d

スクリーンショット 2016-08-17 19.41.20.png

%f

スクリーンショット 2016-08-17 19.44.59.png

%o

スクリーンショット 2016-08-17 19.42.16.png

%O

スクリーンショット 2016-08-17 19.42.46.png

%c

%c以降の文字列に設定したスタイルを適用します。

スクリーンショット 2016-08-17 18.41.22.png

・facebookの場合

スクリーンショット 2016-08-17 19.46.29.png

・cookpadの場合

スクリーンショット 2016-08-17 19.46.01.png


本番環境では出力をしないようにしたい

本番環境ではconsole.logを出したくないということがあるかと思います。

参考になる記事がありましたので、紹介します。

console.logのみなので、他の関数でも使いたい場合はそれぞれのラッパーを作る必要がありますね。

console.log()を使うときのおすすめ記述方法